:root {
  --bg: #F5F3FF;
  --card: #ffffff;
  --purple: #7C3AED;
  --blue: #2563EB;
  --cyan: #0891B2;
  --pink: #DB2777;
  --green: #059669;
  --orange: #EA580C;
  --text: #1E1B4B;
  --muted: #6B7280;
  --border: #E5E7EB;
  --shadow: 0 8px 24px rgba(76, 29, 149, 0.12);
  --radius: 20px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
  -webkit-tap-highlight-color: transparent;
}
body { padding: 16px; }
.phone-chrome {
  max-width: 430px;
  margin: 0 auto;
}
.header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.avatar {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 24px;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
.avatar.meera { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.avatar.sai { background: linear-gradient(135deg, #0891B2, #22D3EE); }
.avatar.bobby { background: linear-gradient(135deg, #2563EB, #60A5FA); }
.avatar.swathi { background: linear-gradient(135deg, #DB2777, #F472B6); }
.avatar.sm { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; }
h1 { font-size: 1.55rem; line-height: 1.2; }
h2 { font-size: 1.25rem; margin-bottom: 8px; }
.sub { color: var(--muted); font-size: 0.95rem; }
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  border: 1px solid rgba(124,58,237,0.08);
}
.card.hero {
  background: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);
  color: #fff;
  border: none;
}
.card.hero .sub { color: rgba(255,255,255,0.85); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.big-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  width: 100%; text-align: left;
  background: #fff; border: none; border-radius: 18px;
  padding: 18px; box-shadow: var(--shadow);
  font: inherit; color: inherit; cursor: pointer;
  min-height: 110px;
}
.big-btn .emoji { font-size: 2rem; }
.big-btn .label { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.big-btn .hint { color: var(--muted); font-size: 0.85rem; }
.big-btn.word { border-top: 5px solid var(--orange); }
.big-btn.article { border-top: 5px solid var(--green); }
.stars { font-size: 1.4rem; letter-spacing: 2px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #EDE9FE; color: var(--purple);
  padding: 6px 12px; border-radius: 999px;
  font-weight: 600; font-size: 0.85rem;
}
.pill.fire { background: #FFEDD5; color: var(--orange); }
.list-day {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.list-day:last-child { border-bottom: none; }
.badge {
  background: #FEF3C7; color: #B45309;
  padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
}
.badge.done { background: #D1FAE5; color: #047857; }
.badge.wait { background: #DBEAFE; color: #1D4ED8; }
.input {
  width: 100%; font-size: 1.35rem; padding: 16px 18px;
  border: 3px solid #DDD6FE; border-radius: 16px;
  outline: none; font-weight: 600; text-align: center;
  background: #FAF5FF;
}
.input:focus { border-color: var(--purple); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--purple); color: #fff; border: none;
  padding: 16px 22px; border-radius: 16px;
  font-size: 1.1rem; font-weight: 700; cursor: pointer;
  min-height: 56px; width: 100%;
  box-shadow: 0 6px 16px rgba(124,58,237,0.35);
}
.btn.secondary { background: #fff; color: var(--purple); border: 2px solid #DDD6FE; box-shadow: none; }
.btn.green { background: var(--green); box-shadow: 0 6px 16px rgba(5,150,105,0.35); }
.btn.speaker {
  width: 72px; height: 72px; border-radius: 50%;
  font-size: 1.8rem; padding: 0; flex-shrink: 0;
}
.row { display: flex; gap: 12px; align-items: center; }
.word-display {
  font-size: 2.4rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--purple); text-align: center; margin: 12px 0;
}
.sentence {
  background: #EEF2FF; border-radius: 14px; padding: 14px 16px;
  font-size: 1.05rem; line-height: 1.45; color: #312E81;
}
.feedback {
  margin-top: 12px; padding: 12px; border-radius: 12px;
  font-weight: 700; text-align: center;
}
.feedback.ok { background: #D1FAE5; color: #047857; }
.article-emoji {
  font-size: 4.5rem; text-align: center;
  background: linear-gradient(180deg, #ECFDF5, #D1FAE5);
  border-radius: 24px; padding: 24px; margin-bottom: 14px;
}
.article-body { font-size: 1.15rem; line-height: 1.6; }
.choice {
  display: block; width: 100%; text-align: left;
  padding: 16px 18px; margin-bottom: 10px;
  border: 3px solid #E5E7EB; border-radius: 16px;
  background: #fff; font-size: 1.05rem; font-weight: 600;
  cursor: pointer;
}
.choice:hover, .choice.selected { border-color: var(--purple); background: #F5F3FF; }
.progress-bar {
  height: 10px; background: #E5E7EB; border-radius: 999px; overflow: hidden; margin: 10px 0 18px;
}
.progress-bar > span { display: block; height: 100%; width: 15%; background: linear-gradient(90deg, var(--purple), var(--blue)); }
.admin-kid {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.admin-kid:last-child { border-bottom: none; }
.switch {
  width: 52px; height: 30px; border-radius: 999px; background: #D1D5DB;
  position: relative; flex-shrink: 0;
}
.switch.on { background: var(--green); }
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: left 0.15s;
}
.switch.on::after { left: 25px; }
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.stat {
  background: #F3F4F6; border-radius: 12px; padding: 10px 12px; flex: 1; min-width: 90px;
}
.stat b { display: block; font-size: 1.3rem; color: var(--purple); }
.stat span { font-size: 0.75rem; color: var(--muted); }
.login-wrap { max-width: 400px; margin: 40px auto 0; text-align: center; }
.logo {
  width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 24px;
  background: linear-gradient(135deg, #7C3AED, #2563EB);
  display: grid; place-items: center; color: #fff; font-size: 2.5rem; font-weight: 800;
  box-shadow: var(--shadow);
}
.name-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid #E5E7EB; border-radius: 16px;
  padding: 12px 16px; margin: 6px; font-weight: 700; font-size: 1.05rem;
  cursor: pointer; box-shadow: var(--shadow);
}
.name-chip:hover { border-color: var(--purple); }
.homescreen {
  background: linear-gradient(180deg, #0B1026 0%, #1E1B4B 40%, #312E81 100%);
  min-height: 100vh; margin: -16px; padding: 48px 24px 32px;
  color: #fff; position: relative; overflow: hidden;
}
.hs-status {
  display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600;
  margin-bottom: 36px; opacity: 0.9;
}
.hs-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px;
  justify-items: center;
}
.hs-app { text-align: center; width: 72px; }
.hs-icon {
  width: 62px; height: 62px; border-radius: 14px;
  display: grid; place-items: center; margin: 0 auto 6px;
  font-weight: 800; font-size: 1.5rem; color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.hs-icon.meera { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.hs-icon.generic { background: linear-gradient(135deg, #64748B, #94A3B8); font-size: 1.1rem; }
.hs-label { font-size: 0.72rem; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.hs-dock {
  position: absolute; bottom: 28px; left: 16px; right: 16px;
  background: rgba(255,255,255,0.18); backdrop-filter: blur(12px);
  border-radius: 28px; padding: 14px; display: flex; justify-content: space-around;
}
.alert {
  background: #FEF3C7; border: 2px solid #FCD34D; border-radius: 14px;
  padding: 12px 14px; margin-bottom: 14px; font-size: 0.95rem;
}
.tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tab {
  padding: 10px 14px; border-radius: 999px; background: #fff;
  border: 2px solid #E5E7EB; font-weight: 700; font-size: 0.9rem;
}
.tab.active { background: var(--purple); color: #fff; border-color: var(--purple); }
@media (min-width: 700px) {
  body { padding: 28px; }
  .phone-chrome { max-width: 760px; }
  .grid2 { gap: 18px; }
  h1 { font-size: 1.9rem; }
}

/* App shell additions */
#app { max-width: 820px; margin: 0 auto; min-height: 100vh; }
.hidden { display: none !important; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.big-btn.quiz { border-top: 5px solid var(--pink); }
.big-btn.math { border-top: 5px solid #3B82F6; }
.big-btn.locked { opacity: 0.55; cursor: not-allowed; }
.step-dots { display: flex; gap: 6px; margin: 6px 0 12px; }
.step-dots span { flex: 1; height: 6px; border-radius: 999px; background: #E5E7EB; }
.step-dots span.on { background: var(--purple); }
.step-dots span.done { background: var(--green); }
.cal {
  display: grid; grid-template-columns: 72px repeat(7, 1fr);
  gap: 6px; align-items: center; font-size: 0.8rem;
}
.cal .hd { text-align: center; color: var(--muted); font-weight: 700; font-size: 0.72rem; }
.cal .name { font-weight: 800; font-size: 0.85rem; }
.daycell {
  aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center;
  font-weight: 700; font-size: 0.7rem; min-height: 36px; background: #F3F4F6; color: #9CA3AF;
}
.daycell.done { background: #A7F3D0; color: #047857; }
.daycell.partial { background: #FDE68A; color: #B45309; }
.daycell.missed { background: #FECACA; color: #B91C1C; }
.daycell.today { outline: 2px solid var(--purple); outline-offset: 1px; }
.chart { height: 120px; display: flex; align-items: flex-end; gap: 8px; padding-top: 8px; }
.bar {
  flex: 1; border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #7C3AED, #A78BFA);
  min-height: 8px; position: relative;
}
.bar span {
  position: absolute; top: -18px; left: 0; right: 0;
  text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--purple);
}
.bar-labels { display: flex; gap: 8px; margin-top: 6px; font-size: 0.65rem; color: var(--muted); text-align: center; }
.bar-labels span { flex: 1; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.toggle-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row .text { flex: 1; }
.time-pick {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 8px;
  background: #F5F3FF; border: 2px solid #DDD6FE; border-radius: 12px;
  padding: 8px 12px; font-weight: 700; color: var(--purple);
}
.time-pick input { border: none; background: transparent; font: inherit; color: inherit; width: 5.5rem; }
.switch { cursor: pointer; }
.choice.selected { border-color: var(--purple); background: #F5F3FF; }
.error-banner {
  background: #FEE2E2; color: #B91C1C; border-radius: 12px; padding: 12px; margin-bottom: 12px; font-weight: 600;
}
.success-banner {
  background: #D1FAE5; color: #047857; border-radius: 12px; padding: 12px; margin-bottom: 12px; font-weight: 600;
}
.topbar {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.linkish { background: none; border: none; color: var(--purple); font-weight: 700; font: inherit; cursor: pointer; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
@media (max-width: 700px) {
  .two-col { grid-template-columns: 1fr; }
  .cal { grid-template-columns: 56px repeat(7, 1fr); }
}
@media (min-width: 700px) {
  .grid3 { gap: 16px; }
  .big-btn { min-height: 140px; }
}

/* Photo cropper (Contacts-style) */
.crop-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, 0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; color: #fff;
}
.crop-stage {
  position: relative; width: min(86vw, 340px); height: min(86vw, 340px);
  border-radius: 50%; overflow: hidden;
  touch-action: none; background: #111;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.85), 0 12px 40px rgba(0,0,0,0.45);
  cursor: grab;
}
.crop-stage:active { cursor: grabbing; }
.crop-stage img {
  position: absolute; left: 50%; top: 50%;
  transform-origin: center center;
  user-select: none; -webkit-user-drag: none;
  max-width: none;
}
.crop-hint { margin: 16px 0 8px; text-align: center; font-size: 0.95rem; opacity: 0.9; }
.crop-zoom {
  width: min(86vw, 340px); margin: 8px 0 16px;
  accent-color: #A78BFA;
}
.crop-actions { display: flex; gap: 10px; width: min(86vw, 340px); }
.crop-actions .btn { flex: 1; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

.crop-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(15, 23, 42, 0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  color: #fff;
  -webkit-user-select: none; user-select: none;
}
.crop-stage {
  position: relative; width: min(86vw, 340px); height: min(86vw, 340px);
  border-radius: 50%; overflow: hidden;
  touch-action: none; background: #0f172a;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 12px 40px rgba(0,0,0,0.45);
}

/* ===== v2 admin dashboard (scoped) ===== */
body.admin-mode { background: #F4F5FB; color: #111827; }
body.admin-mode #app { max-width: 1100px; }
.adm { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; padding-bottom: 32px; }
.adm .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 8px; }
.adm .brand { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.adm .brand small { display: block; font-weight: 500; font-size: .8rem; color: #6B7280; }
.adm .chip { background: #fff; border: 1px solid #E5E7EB; border-radius: 999px; padding: 7px 12px; font-size: .8rem; font-weight: 600; color: #374151; cursor: pointer; font-family: inherit; white-space: nowrap; }
.adm .chip:disabled { opacity: .5; }
.adm .card { background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06); margin-bottom: 16px; border: none; }
.adm .h { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.adm .sub { color: #6B7280; font-size: .82rem; }
.adm .kidhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.adm .kidhead .avatar { width: 52px; height: 52px; border-radius: 50%; font-size: 1.3rem; box-shadow: none; }
.adm .kidactions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 759px) { .adm .kidactions { flex-basis: 100%; justify-content: flex-start; } }
.adm .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 4px; }
.adm .stat { background: #F9FAFB; border-radius: 14px; padding: 10px 6px; text-align: center; min-width: 0; }
.adm .stat b { display: block; font-size: 1.1rem; color: #111827; }
.adm .stat span { font-size: .7rem; color: #6B7280; }
.adm .levels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.adm .lv { font-size: .72rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.adm .lv.m { background: #DBEAFE; color: #1D4ED8; } .adm .lv.s { background: #FFEDD5; color: #C2410C; } .adm .lv.e { background: #DCFCE7; color: #15803D; }
.adm .weekhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 6px; }
.adm .weeknav { display: flex; align-items: center; gap: 6px; }
.adm .navbtn { border: 1px solid #E5E7EB; background: #fff; border-radius: 10px; width: 30px; height: 30px; font-size: 1rem; cursor: pointer; color: #374151; }
.adm .navbtn:disabled { opacity: .35; cursor: default; }
.adm .weekgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.adm .tile { border-radius: 14px; padding: 8px 4px 9px; background: #F9FAFB; border: 1.5px solid transparent; text-align: center; min-width: 0; font-family: inherit; color: inherit; cursor: pointer; }
.adm .tile:disabled { cursor: default; }
.adm .tile .d { font-size: .68rem; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: .04em; }
.adm .tile .n { font-size: 1.05rem; font-weight: 800; margin: 1px 0 5px; }
.adm .tile.completed { background: #ECFDF5; border-color: #A7F3D0; }
.adm .tile.today, .adm .tile.today-partial { border-color: #6366F1; background: #EEF2FF; }
.adm .tile.partial { background: #FFFBEB; border-color: #FDE68A; }
.adm .tile.missed { background: #FEF2F2; border-color: #FECACA; }
.adm .tile.future, .adm .tile.none, .adm .tile.off { opacity: .55; }
.adm .tile.sun { background: #FFF7ED; border-color: #FED7AA; }
.adm .tile.sun.locked { background: #F3F4F6; border-color: #E5E7EB; }
.adm .tile.sun.done { background: #ECFDF5; border-color: #A7F3D0; }
.adm .steps { display: grid; grid-template-columns: repeat(2, 14px); gap: 3px; justify-content: center; margin-bottom: 5px; }
.adm .dot { width: 14px; height: 14px; border-radius: 5px; font-size: .5rem; font-weight: 800; display: grid; place-items: center; background: #E5E7EB; color: #9CA3AF; }
.adm .dot.ok.w { background: #FB923C; color: #fff; } .adm .dot.ok.e { background: #22C55E; color: #fff; }
.adm .dot.ok.m { background: #3B82F6; color: #fff; } .adm .dot.ok.qz { background: #EC4899; color: #fff; }
.adm .sc { font-size: .62rem; color: #4B5563; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm .sc.money { font-weight: 700; }
.adm .star { font-size: .95rem; line-height: 1; height: 16px; }
.adm .legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: .72rem; color: #6B7280; }
.adm .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.adm .sunday { display: flex; gap: 12px; align-items: center; border-radius: 16px; padding: 14px; margin-top: 14px; background: #F9FAFB; border: 1px dashed #D1D5DB; }
.adm .sunday.open { background: #ECFDF5; border: 1px solid #A7F3D0; }
.adm .sunday .ic { font-size: 1.6rem; }
.adm .prog { height: 8px; border-radius: 99px; background: #E5E7EB; overflow: hidden; margin: 8px 0 4px; }
.adm .prog span { display: block; height: 100%; background: linear-gradient(90deg, #22C55E, #16A34A); }
.adm .pillrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.adm .pill { font-size: .7rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #FEF3C7; color: #92400E; }
.adm .grid2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.adm .grid2 > .card { margin: 0; }
.adm .side { display: grid; gap: 16px; align-items: start; }
.adm .side .card { margin: 0; }
.adm .list { display: flex; flex-direction: column; gap: 8px; }
.adm .li { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; background: #F9FAFB; font-size: .85rem; gap: 8px; }
.adm .bars { display: flex; align-items: flex-end; gap: 8px; height: 112px; padding-top: 6px; }
.adm .bars > div { flex: 1; text-align: center; font-size: .68rem; color: #6B7280; }
.adm .bars .pair { display: flex; gap: 3px; align-items: flex-end; justify-content: center; height: 90px; }
.adm .bars i { display: block; width: 12px; border-radius: 6px 6px 3px 3px; }
.adm .tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow: auto; flex-wrap: nowrap; }
.adm .tab { padding: 8px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: #fff; border: 1px solid #E5E7EB; white-space: nowrap; cursor: pointer; font-family: inherit; color: #111827; }
.adm .tab.on { background: #111827; color: #fff; border-color: #111827; }
.adm .q { border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; background: #F9FAFB; border: 1.5px solid #F3F4F6; }
.adm .q.bad { background: #FEF2F2; border-color: #FCA5A5; }
.adm .q.retry { background: #FFFBEB; border-color: #FCD34D; }
.adm .q .row { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.adm .q .p { font-weight: 600; font-size: .9rem; }
.adm .q .ans { font-size: .8rem; color: #374151; margin-top: 5px; line-height: 1.5; }
.adm .tag { font-size: .66rem; font-weight: 700; padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.adm .tag.ok { background: #DCFCE7; color: #166534; } .adm .tag.no { background: #FEE2E2; color: #991B1B; } .adm .tag.rt { background: #FEF3C7; color: #92400E; } .adm .tag.gr { background: #F3F4F6; color: #4B5563; }
.adm .note { background: #F3F4F6; border-radius: 14px; padding: 12px 14px; font-size: .85rem; color: #374151; }
.adm .back { font-size: .9rem; color: #4F46E5; font-weight: 600; margin-bottom: 10px; display: inline-block; background: none; border: none; cursor: pointer; font-family: inherit; padding: 4px 0; }
.adm .switch { width: 44px; height: 26px; }
.adm .switch::after { width: 20px; height: 20px; }
.adm .switch.on::after { left: 21px; }
.money { font-variant-numeric: tabular-nums; }
.plus { color: #15803D; } .minus { color: #B91C1C; }
@media (min-width: 760px) {
  .adm .side { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .adm .tile { padding: 12px 8px; }
  .adm .steps { grid-template-columns: repeat(2, 20px); gap: 4px; }
  .adm .dot { width: 20px; height: 20px; font-size: .62rem; }
  .adm .sc { font-size: .74rem; }
  .adm .weekgrid { gap: 10px; }
}
@media (min-width: 1100px) {
  .adm .grid2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .adm .side { grid-template-columns: 1fr; }
}

/* ===== kid results with piggy earnings ===== */
.res .dotrow { display: flex; gap: 4px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.res .rdot { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: #fff; background: #3B82F6; }
.res .rdot.no { background: #FCA5A5; color: #7F1D1D; }
.res .rdot.sp { background: #E5E7EB; color: #6B7280; }
.res .li { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-radius: 12px; background: #F9FAFB; font-size: .92rem; margin-top: 6px; gap: 8px; }
.res .li.bad { background: #FEF2F2; } .res .li.good { background: #ECFDF5; font-size: 1rem; } .res .li.total { background: #111827; color: #fff; margin-top: 10px; }
.res .li.total .plus, .res .li.total .minus { color: #fff; }
.choice.wrong { border-color: #FCA5A5; background: #FEF2F2; color: #991B1B; opacity: .8; }
.choice.right { border-color: #34D399; background: #ECFDF5; color: #065F46; }
.feedback.bad { background: #FEF3C7; color: #B45309; }

/* Sectioned articles + coming-soon card */
.article-body p { margin: 0 0 12px; }
.article-body p:last-child { margin-bottom: 0; }
.article-body .art-h { font-size: 1.2rem; margin: 18px 0 6px; color: #3b5bdb; }
.article-body .art-h:first-child { margin-top: 0; }
.coming-soon { text-align: center; padding: 28px 18px; }
.coming-soon .cs-emoji { font-size: 2.6rem; margin-bottom: 6px; }
.coming-soon h2 { margin: 4px 0 8px; }

/* Content bank stock line (admin) */
.adm .bankline { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #F1F5FF; display: flex; flex-direction: column; gap: 2px; font-size: .92rem; }
.adm .bankline span { color: #64748B; }
.adm .bankline.low { background: #FFF7ED; border: 1px solid #FDBA74; }
.adm .bankline .warn { color: #C2410C; font-weight: 700; }

/* Piggy pop-up */
.pp-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; animation: ppFade .25s ease; }
.pp-modal { position: relative; width: 100%; max-width: 380px; background: #fff; border-radius: 28px; padding: 22px 20px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: ppPop .45s cubic-bezier(.2,1.4,.4,1); overflow: hidden; }
.pp-modal.pos { background: linear-gradient(180deg, #FFFBEB 0%, #fff 45%); }
.pp-modal.neg { background: linear-gradient(180deg, #EFF6FF 0%, #fff 45%); }
.pp-pig { font-size: 4rem; line-height: 1; animation: ppBounce 1.2s ease-in-out infinite; }
.pp-title { font-size: 1.6rem; margin: 6px 0 2px; }
.pp-sub { color: #64748B; font-size: .95rem; margin-bottom: 12px; }
.pp-row { position: relative; display: flex; justify-content: space-between; align-items: center; font-size: 1.15rem; padding: 10px 14px; border-radius: 14px; margin: 6px 0; background: #F8FAFC; }
.pp-row b { font-size: 1.3rem; }
.pp-earn { background: #DCFCE7; color: #15803D; }
.pp-lose { background: #FEE2E2; color: #B91C1C; }
.pp-net { font-size: 1.25rem; font-weight: 800; margin: 10px 0 4px; }
.pp-net.up { color: #16A34A; } .pp-net.down { color: #DC2626; }
.pp-new { margin: 6px 0 4px; }
.pp-new span { display: block; color: #64748B; font-size: 1rem; }
.pp-count { display: inline-block; font-size: 2.8rem; font-weight: 900; color: #1E293B; }
.pp-count.done { animation: ppPulse .5s ease; }
.pp-msg { font-size: 1.15rem; font-weight: 700; margin: 8px 0 4px; }
.pp-note { color: #64748B; font-size: .85rem; margin: 0 0 8px; }
.pp-btn { width: 100%; font-size: 1.3rem; padding: 16px; margin-top: 8px; }
.pp-coins { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.pp-coins i { position: absolute; top: -10px; font-style: normal; font-size: 1.3rem; opacity: 0; animation: ppCoin 1.1s ease-in forwards; }
.pp-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1001; }
.pp-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: ppConf linear forwards; }
@keyframes ppFade { from { opacity: 0; } }
@keyframes ppPop { from { transform: scale(.6); opacity: 0; } }
@keyframes ppBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ppPulse { 50% { transform: scale(1.15); } }
@keyframes ppCoin { 0% { opacity: 0; transform: translateY(-30px) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px) rotate(360deg); } }
@keyframes ppConf { to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .pp-pig, .pp-coins i, .pp-confetti i { animation: none; } }

/* ───── Early (age-3) track ───── */
.adm .lv.tr { background: #FFEDD5; color: #C2410C; } .adm .lv.pw { background: #EDE9FE; color: #6D28D9; }
.adm .dot.ok.tr { background: #F97316; color: #fff; } .adm .dot.ok.pw { background: #8B5CF6; color: #fff; }
.adm .dot.pt { background: #FDE68A; color: #92400E; }
.adm .e-trrow { display: flex; flex-wrap: wrap; gap: 5px; }
.early .e-piggy { display: flex; justify-content: space-between; align-items: center; }
.early .e-piggy b { font-size: 1.6rem; }
.early .e-today { font-weight: 800; color: #059669; background: #ECFDF5; padding: 6px 12px; border-radius: 999px; }
.early .e-today.minus { color: #DC2626; background: #FEF2F2; }
.early .e-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.early .e-d { text-align: center; font-size: .72rem; font-weight: 800; color: #6B7280; background: #F9FAFB; border-radius: 12px; padding: 6px 0; }
.early .e-d span { display: block; font-size: 1.15rem; margin-top: 2px; }
.early .e-d.done { background: #FEF3C7; color: #92400E; } .early .e-d.now { outline: 2px solid #8B5CF6; }
.early .e-h2 { font-size: 1.3rem; margin: 14px 4px 8px; }
.early .e-alldone { text-align: center; font-weight: 900; font-size: 1.25rem; background: #FEF3C7; color: #92400E; border-radius: 18px; padding: 14px; margin: 12px 0; }
.early .e-steps { display: grid; gap: 12px; }
.early .e-step { display: flex; align-items: center; gap: 14px; border: 0; border-radius: 24px; padding: 18px; font: inherit; font-size: 1.45rem; font-weight: 900; color: #fff; text-align: left; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.early .e-step small { display: block; font-size: .85rem; font-weight: 700; opacity: .92; margin-top: 3px; }
.early .e-step .e { font-size: 2.6rem; background: rgba(255,255,255,.25); border-radius: 18px; width: 64px; height: 64px; display: grid; place-items: center; flex: none; }
.early .e-step.t1 { background: linear-gradient(135deg, #FB923C, #F97316); } .early .e-step.t2 { background: linear-gradient(135deg, #A78BFA, #8B5CF6); }
.early .e-step.ok { background: linear-gradient(135deg, #34D399, #059669); } .early .e-step.ok::after { content: '✓'; margin-left: auto; font-size: 2rem; }
.early .e-note { text-align: center; color: #6B7280; font-weight: 700; font-size: .85rem; margin-top: 12px; }
.early .e-chips { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.early .e-chip { font-size: 1.3rem; font-weight: 900; padding: 6px 14px; border-radius: 14px; background: #F3F4F6; color: #6B7280; }
.early .e-chip.cur { background: #F97316; color: #fff; } .early .e-chip.done { background: #D1FAE5; color: #047857; }
.early .e-say { text-align: center; font-size: 1.15rem; font-weight: 800; margin: 6px 0 8px; }
.early .e-say b { color: #F97316; font-size: 1.4rem; }
.early .e-board { background: #fff; border-radius: 26px; box-shadow: 0 6px 18px rgba(0,0,0,.08); padding: 6px; display: flex; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none; }
.early .e-board canvas { touch-action: none; display: block; }
.early .e-reps { display: flex; gap: 8px; justify-content: center; margin: 10px 0 2px; }
.early .e-reps .rep { width: 18px; height: 18px; border-radius: 50%; background: #E5E7EB; }
.early .e-reps .rep.g { background: #22C55E; } .early .e-reps .rep.y { background: #F59E0B; } .early .e-reps .rep.c { outline: 3px solid #F97316; background: #fff; }
.early .e-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin: 10px 0; }
.early .e-btns .btn { font-size: 1.25rem; padding: 16px; }
.early .e-acc { font-size: 1.3rem; color: #F97316; }
.early .e-meter { position: relative; height: 16px; border-radius: 999px; background: linear-gradient(90deg, #FCA5A5 0%, #FDE68A 40%, #86EFAC 55%, #22C55E 100%); margin-top: 8px; overflow: hidden; }
.early .e-meter span { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,0); border-right: 4px solid #111827; transition: width .5s; }
.early .e-meter i { position: absolute; left: 55%; top: -2px; bottom: -2px; border-left: 2px dashed #065F46; }
.early .e-ml { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 800; color: #6B7280; margin-top: 4px; }
.early .e-toast { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 50; font-size: 1.5rem; font-weight: 900; padding: 14px 22px; border-radius: 22px; color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.2); animation: etoast 1.1s ease both; white-space: nowrap; }
.early .e-toast.good { background: #10B981; } .early .e-toast.meh { background: #F59E0B; }
@keyframes etoast { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.9); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 85% { opacity: 1; } 100% { opacity: 0; } }
.early .e-scale summary { cursor: pointer; }
.early .e-scale .sc { display: grid; grid-template-columns: 76px 1fr auto; gap: 8px; padding: 7px 10px; border-radius: 10px; margin-top: 6px; font-size: .9rem; }
.early .e-scale .sc em { font-style: normal; font-weight: 900; }
.early .sc.g { background: #D1FAE5; color: #065F46; } .early .sc.p1 { background: #FEF9C3; color: #854D0E; } .early .sc.p2 { background: #FEF3C7; color: #92400E; }
.early .sc.p3 { background: #FFEDD5; color: #9A3412; } .early .sc.p4 { background: #FEE2E2; color: #991B1B; } .early .sc.p5 { background: #FECACA; color: #7F1D1D; }
.early .e-prog { display: flex; gap: 8px; justify-content: center; margin: 8px 0 14px; }
.early .e-prog i { width: 34px; height: 10px; border-radius: 999px; background: #E5E7EB; }
.early .e-prog i.g { background: #22C55E; } .early .e-prog i.c { background: #8B5CF6; }
.early .e-sayw { display: flex; align-items: center; justify-content: center; gap: 14px; }
.early .e-sayw b { font-size: 2rem; }
.early .e-spk { width: 76px; height: 76px; border-radius: 50%; border: 0; font-size: 2.2rem; background: #8B5CF6; color: #fff; box-shadow: 0 8px 18px rgba(139,92,246,.4); cursor: pointer; }
.early .e-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.early .e-pic { position: relative; aspect-ratio: 1; border-radius: 28px; border: 4px solid #EDE9FE; background: #fff; font-size: clamp(4rem, 22vw, 7.5rem); line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.08); display: grid; place-items: center; }
.early .e-pic.right { border-color: #22C55E; background: #ECFDF5; }
.early .e-pic.wrong { border-color: #FECACA; background: #FEF2F2; opacity: .5; }
.early .e-pic.shake { animation: eshake .4s; }
.early .e-badge { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 1rem; font-weight: 900; background: #22C55E; color: #fff; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
@keyframes eshake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@media (min-width: 700px) { .early .e-pics { max-width: 560px; margin-left: auto; margin-right: auto; } .early .e-pic { font-size: 8rem; } }
.pp-row b { white-space: nowrap; }

/* ───── Contest Practice ───── */
.big-btn.contest { grid-column: 1 / -1; background: linear-gradient(135deg, #FDE68A, #F59E0B); color: #78350F; border: 3px solid #F59E0B; }
.big-btn.contest.is-done { background: linear-gradient(135deg, #D1FAE5, #6EE7B7); border-color: #10B981; color: #065F46; }
.step-dots span:nth-child(5).on { background: #F59E0B; }
.ct-tag { display: inline-block; font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ct-prog { display: flex; gap: 6px; margin: 8px 0 12px; } .ct-prog i { flex: 1; height: 9px; border-radius: 9px; background: #E5E7EB; }
.ct-prog i.g { background: #22C55E; } .ct-prog i.r { background: #F87171; } .ct-prog i.c { background: #8B5CF6; }
.ct-card .ct-q { font-size: 1.15rem; line-height: 1.5; font-weight: 700; }
.ct-card .ct-q .ct-clue { padding-left: 6px; color: #374151; }
.ct-emoji { font-size: 2.3rem; text-align: center; margin-bottom: 6px; }
.ct-ans { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.ct-ans input { flex: 1; min-width: 0; font: inherit; font-size: 1.6rem; font-weight: 800; padding: 12px 14px; border-radius: 16px; border: 3px solid #C4B5FD; outline: none; }
.ct-ans input:focus { border-color: #7C3AED; } .ct-ans input:disabled { background: #F9FAFB; color: #374151; }
.ct-unit { font-size: 1.15rem; font-weight: 900; color: #6D28D9; white-space: nowrap; }
.scratch { font-size: .8rem; color: #9CA3AF; margin-top: 8px; }
.ct-bal { display: flex; flex-direction: column; align-items: center; margin: 6px 0; }
.ct-beam { display: flex; gap: 12px; align-items: flex-end; }
.ct-pan { width: 140px; min-height: 54px; border-bottom: 6px solid #6B7280; border-radius: 0 0 50% 50% / 0 0 30% 30%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; align-content: flex-end; padding: 4px; line-height: 1.15; }
.ct-bar { width: 290px; max-width: 92%; height: 6px; background: #6B7280; border-radius: 6px; }
.ct-ful { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 30px solid #6B7280; }
.ct-eqs { display: grid; gap: 8px; margin: 8px 0; } .ct-eq { background: #F5F3FF; border-radius: 14px; padding: 8px 12px; font-size: 1.4rem; text-align: center; font-weight: 800; } .ct-eq b { color: #7C3AED; }
.ct-banner { background: #FFFBEB; border: 2px solid #FCD34D; } .ct-banner.done { background: #ECFDF5; border-color: #6EE7B7; } .ct-banner.locked { opacity: .7; }
.ct-timer { display: flex; justify-content: space-between; align-items: center; background: #1E1B4B; color: #fff; border-radius: 20px; padding: 12px 16px; margin-top: 10px; }
.ct-timer small { display: block; font-size: .72rem; opacity: .8; } .ct-timer b { font-size: 2rem; font-variant-numeric: tabular-nums; } .ct-timer b.low { color: #FCA5A5; }
.ct-tbar { height: 8px; border-radius: 8px; background: #312E81; margin-top: 8px; overflow: hidden; } .ct-tbar span { display: block; height: 100%; background: linear-gradient(90deg, #22C55E, #A3E635); transition: width .5s linear; }
.ct-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: 10px; }
.ct-grid button { height: 30px; border-radius: 8px; border: 0; background: #E5E7EB; font: inherit; font-size: .75rem; font-weight: 800; color: #6B7280; cursor: pointer; padding: 0; }
.ct-grid button.a { background: #DDD6FE; color: #5B21B6; } .ct-grid button.c { background: #7C3AED; color: #fff; } .ct-grid button.f { outline: 2px solid #F59E0B; }
.ct-rev.ok { border-left: 5px solid #22C55E; } .ct-rev.no { border-left: 5px solid #EF4444; }
.adm .ct-admin { background: #FFFBEB; border-radius: 16px; padding: 12px 14px; margin-top: 12px; }
.adm .ct-tb { display: grid; grid-template-columns: 150px 1fr 44px; gap: 8px; align-items: center; margin: 7px 0; font-weight: 700; font-size: .82rem; }
.adm .ct-tb .b { height: 12px; border-radius: 8px; background: #F3F4F6; overflow: hidden; } .adm .ct-tb .b span { display: block; height: 100%; border-radius: 8px; }
.adm .dot.ok.ct { background: #F59E0B; color: #fff; }
.notif-enable { background: #EEF2FF; } .ios-howto { margin-top: 12px; background: #fff; border-radius: 14px; padding: 12px; font-size: .9rem; }
.ios-howto ol { margin: 6px 0; padding-left: 20px; } .kbd { display: inline-block; padding: 0 6px; border: 1px solid #CBD5E1; border-radius: 6px; }
.toggle-row .text .sub { display: block; margin-top: 2px; }
/* Picture Words: content vertically centered on iPhone + iPad */
.phone-chrome.e-pw { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; }
.e-pw .e-pw-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 6vh; }
.e-pw .e-prog { flex-wrap: nowrap; }
.e-pw .e-prog i { flex: 1; max-width: 34px; min-width: 0; } .e-pw .e-prog { gap: 5px; }

/* ───── Kumon (optional extra practice) ───── */
.kb{display:inline-flex;align-items:center;gap:8px;font-weight:900;color:#0F766E}.kb svg{flex:none}
.pill.opt{background:#F3F4F6;color:#4B5563}
button.kcard{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.kcard{border:3px solid #99F6E4;background:linear-gradient(135deg,#F0FDFA,#fff)}
.kcard.read{border-color:#FBCFE8;background:linear-gradient(135deg,#FDF2F8,#fff)}
.kcard .lvl{font-weight:900;color:#0F766E}.kcard.read .lvl{color:#BE185D}
.mbar{height:16px;border-radius:10px;background:#E5E7EB;overflow:hidden;display:flex;gap:3px}.mbar span{flex:1;background:#E5E7EB}.mbar span.on{background:linear-gradient(90deg,#14B8A6,#22C55E)}
.ktop{display:flex;justify-content:space-between;align-items:center}
.ktimer{background:#134E4A;color:#fff;border-radius:20px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.ktimer small{display:block;font-size:.7rem;opacity:.8}.ktimer b{font-size:1.9rem;font-variant-numeric:tabular-nums}
.tbar{height:8px;border-radius:8px;background:#CCFBF1;margin-top:8px;overflow:hidden}.tbar span{display:block;height:100%;background:#14B8A6;transition:width .5s}
.kumon .ws{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px;background:#fff;border-radius:22px;padding:14px;margin-top:12px;max-height:46vh;overflow-y:auto}
.kumon .pr{display:flex;align-items:center;gap:5px;font-size:.98rem;white-space:nowrap;font-weight:800;font-variant-numeric:tabular-nums;min-height:38px;cursor:pointer}
.kumon .pr .n{color:#9CA3AF;font-size:.72rem;width:18px}
.kumon .pr .a{min-width:46px;margin-left:auto;height:34px;border-radius:10px;border:2px solid #E5E7EB;display:grid;grid-auto-flow:column;align-items:center;justify-content:center;font-weight:900;padding:0 4px}
.kumon .pr .a.f{border-color:#14B8A6;color:#0F766E;background:#F0FDFA}.kumon .pr .a.c{border:3px solid #7C3AED;background:#fff;box-shadow:0 0 0 4px #EDE9FE}
.kumon .pr.cur{background:#F5F3FF;border-radius:12px;padding:0 6px;margin:0 -6px}
.kumon .cursor{display:inline-block;width:2px;height:20px;background:#7C3AED;animation:kblink 1s infinite}@keyframes kblink{50%{opacity:0}}
.kumon .pad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}
.kumon .pad button{border:0;background:#fff;border-radius:12px;padding:12px 0;font:inherit;font-weight:900;font-size:1.2rem;box-shadow:0 2px 6px rgba(0,0,0,.06);color:#1E1B4B;touch-action:manipulation}
.kumon .pad button:active{transform:scale(.96)}
.kumon .pad .go{background:#7C3AED;color:#fff;grid-column:span 2}.kumon .pad .fin{grid-column:span 2;background:#F0FDFA;color:#0F766E}
.kumon .big{font-size:3rem;font-weight:900;text-align:center;line-height:1.1}
.kumon .ledger div{display:flex;justify-content:space-between;padding:10px 12px;border-radius:14px;margin:6px 0;font-weight:800}
.kumon .ledger .lg{background:#ECFDF5;color:#047857}.kumon .ledger .lr{background:#FEF2F2;color:#B91C1C}.kumon .ledger .lt{background:#1E1B4B;color:#fff}
.kumon .ledger div.sub{background:none;font-weight:600}
.kumon .wrongs div{display:flex;justify-content:space-between;gap:8px;font-weight:800;padding:8px 10px;background:#FEF2F2;border-radius:12px;margin:6px 0}
.kumon .passage{font-size:1.18rem;line-height:1.7;font-weight:600;margin-top:12px}.kumon .passage p{margin:0 0 12px}
.kumon .q{margin:12px 0}.kumon .q .p{font-weight:800;font-size:1.02rem;line-height:1.45}
.kumon .q input{width:100%;box-sizing:border-box;font:inherit;font-size:1.15rem;font-weight:800;padding:11px 14px;border-radius:14px;border:3px solid #FBCFE8;margin-top:6px}
.kumon .q input:focus{outline:none;border-color:#DB2777;box-shadow:0 0 0 4px #FCE7F3}.kumon .q input.done{background:#FDF2F8}
.kumon .blank{display:inline-block;min-width:80px;border-bottom:3px solid #EC4899}
.kumon .rv{border-left:5px solid #22C55E}.kumon .rv.no{border-left-color:#EF4444}
.kumon .how{background:#FFFBEB;border:2px solid #FDE68A}
.btn.pink{background:#DB2777;box-shadow:0 8px 18px rgba(219,39,119,.3)}
.btn.sec{background:#fff;color:#6D28D9;border:2px solid #DDD6FE;box-shadow:none}
.kcard .lvlrow{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.kcard .lvlrow span{padding:5px 9px;border-radius:10px;font-size:.75rem;font-weight:800;background:#F3F4F6;color:#9CA3AF}
.kcard .lvlrow span.done{background:#CCFBF1;color:#0F766E}.kcard .lvlrow span.now{background:#0F766E;color:#fff}
.kcard.read .lvlrow span.done{background:#FCE7F3;color:#BE185D}.kcard.read .lvlrow span.now{background:#BE185D;color:#fff}
.kcard .note{font-size:.8rem;color:#6B7280;background:#F9FAFB;border-radius:12px;padding:8px 10px;margin-top:8px}
.ktable{width:100%;border-collapse:collapse;font-size:.85rem}.ktable td,.ktable th{padding:7px 6px;text-align:left;border-bottom:1px solid #F3F4F6}.ktable th{color:#6B7280;font-size:.72rem;text-transform:uppercase}
.ktable tr[data-kset]{cursor:pointer}.ktable tr[data-kset]:hover{background:#F9FAFB}.ktable tr.bad td{background:#FEF2F2}

/* piggy entries + what-to-practice pop-up */
.ptx{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid #F3F4F6;padding:10px 2px;cursor:pointer}
.ptx:active{background:#F9FAFB}
.ptx-top{display:flex;align-items:center;gap:8px}.ptx-date{white-space:nowrap;flex:1}.ptx-amt{white-space:nowrap}.ptx-go{color:#A78BFA;font-weight:900;font-size:1.2rem}
.ptx-memo{margin-top:2px;line-height:1.35}
.pw-modal{max-height:86vh;display:flex;flex-direction:column}.pw-body{overflow-y:auto;margin:8px 0;text-align:left}
.pw-sec{margin:10px 0}.pw-h{font-weight:900;margin-bottom:6px}
.pw-item{background:#FEF2F2;border-radius:14px;padding:9px 11px;margin:6px 0}.pw-q{font-weight:800;line-height:1.35}
.pw-a{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-weight:700}.pw-you{color:#B91C1C}.pw-ok{color:#047857}
.pw-perfect{font-size:1.5rem;font-weight:900;text-align:center;margin:16px 0 6px;color:#047857}
.pw-note{background:#FFFBEB;border:2px solid #FDE68A;border-radius:14px;padding:12px;font-weight:700;text-align:center;margin:10px 0}
.logo-img{display:block;width:110px;height:110px;border-radius:22%;margin:0 auto 16px;box-shadow:0 8px 22px rgba(76,29,149,.18),0 2px 6px rgba(0,0,0,.08)}

/* ───── Logo-matched playful background ───── */
html { background: #FFE3C7; }
body, body.admin-mode {
  background: linear-gradient(135deg, #FFD9A8 0%, #FFC2B3 22%, #FBB6D9 45%, #D9B8FF 68%, #B8D8FF 85%, #A8F0FF 100%) fixed;
  background-color: #FBC8D8;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .75;
  background-image:
    radial-gradient(circle at 8% 12%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 88% 9%, #FDE047 0 5px, transparent 6px),
    radial-gradient(circle at 18% 46%, #F472B6 0 4px, transparent 5px),
    radial-gradient(circle at 93% 38%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 6% 78%, #38BDF8 0 5px, transparent 6px),
    radial-gradient(circle at 74% 64%, #A78BFA 0 4px, transparent 5px),
    radial-gradient(circle at 40% 92%, #FDE047 0 4px, transparent 5px),
    radial-gradient(circle at 96% 88%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 55% 6%, #FB923C 0 3px, transparent 4px),
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 30%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 70%, rgba(255,255,255,.8) 0 2px, transparent 3px);
}
body::after {
  content: "✦   ⭐        ✧            ✦      ★\A\A\A        ✧              ⭐\A\A\A\A ★                ✦\A\A\A\A\A    ✧        ★             ✦";
  white-space: pre; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  color: rgba(255,255,255,.75); font-size: 18px; line-height: 2.2; padding: 24px; overflow: hidden;
}
#app, .pp-overlay { position: relative; z-index: 1; }
.pp-overlay { position: fixed; z-index: 1000; }
.btn { background: linear-gradient(120deg, #FB923C 0%, #EC4899 50%, #8B5CF6 100%); box-shadow: 0 8px 18px rgba(236,72,153,.32); }
.kpos{font-size:1.15rem;font-weight:900;letter-spacing:.01em}
.kprog{height:12px;border-radius:8px;background:#E5E7EB;overflow:hidden;margin-top:6px}.kprog span{display:block;height:100%;background:linear-gradient(90deg,#14B8A6,#22C55E);border-radius:8px}
.kumon .pad .xk{background:#FEF3C7;color:#92400E}
.kcard.rsm{border-color:#BFDBFE;background:linear-gradient(135deg,#EFF6FF,#fff)}.kcard.rsm .lvl{color:#1E3A8A}.rsm-kb{color:#1E3A8A}
.rsm-timer{background:#1E3A8A}.rsm-topic{font-size:.72rem;font-weight:800;color:#2563EB;text-transform:uppercase;letter-spacing:.03em}
.kumon .q input.rsm-in{border-color:#BFDBFE}.kumon .q input.rsm-in:focus{border-color:#2563EB;box-shadow:0 0 0 4px #DBEAFE}.kumon .q input.rsm-in.done{background:#EFF6FF}
.rsm-bar{display:grid;grid-template-columns:150px 1fr 82px;gap:8px;align-items:center;font-size:.8rem;margin:6px 0}.rsm-bar i{height:10px;background:#F3F4F6;border-radius:6px;overflow:hidden;display:block}.rsm-bar i b{display:block;height:100%}.rsm-bar em{font-style:normal;color:#6B7280;text-align:right}
.pp-modal{max-height:92vh;overflow-y:auto}.pp-wrongs{text-align:left;margin:8px 0;max-height:34vh;overflow-y:auto}
/* Kumon pencil worksheet */
.phone-chrome.kpencil{max-width:980px}
.ktiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.ktile{position:relative;border:2px solid #E5E7EB;background:#fff;border-radius:16px;padding:22px 10px 10px;font:inherit;color:#111827;display:flex;flex-direction:column;align-items:center;min-height:150px;box-shadow:0 2px 6px rgba(0,0,0,.05);touch-action:manipulation;cursor:pointer}
.ktile.cur{border-color:#7C3AED;box-shadow:0 0 0 4px #EDE9FE}.ktile.f{background:#F0FDFA;border-color:#99F6E4}
.ktile .n{position:absolute;top:6px;left:9px;font-size:.75rem;font-weight:800;color:#9CA3AF}
.ktile .ta{margin-top:auto;font-family:"Comic Sans MS","Chalkboard SE","Marker Felt",cursive;font-size:1.45rem;color:#475569;min-height:1.6rem}
.vp{font-family:"Helvetica Neue",Arial,sans-serif;font-size:1.5rem;font-weight:500;line-height:1.15;color:#111}
.vp.big{font-size:3.2rem}
.vstack{display:inline-flex;flex-direction:column;align-items:flex-end;letter-spacing:.18em}
.vstack i{font-style:normal;margin-right:1.1em}
.vstack .rule{display:block;align-self:stretch;height:2px;background:#111;margin:.12em -.35em 0 -.35em}
.vdiv{display:inline-flex;align-items:flex-start;margin-top:.5em;letter-spacing:.12em}
.vdiv .dv{padding:.12em .28em 0 0}
.vdiv .dd{border-top:2px solid #111;border-left:2px solid #111;border-top-left-radius:.5em .9em;padding:.12em .2em 0 .35em}
.vrow{display:inline-flex;align-items:center;gap:.3em}.vop{margin:0 .1em}.vq{color:#9CA3AF}
.vfr{display:inline-flex;flex-direction:column;align-items:center;line-height:1.05}.vfr span:first-child{border-bottom:2px solid #111;padding:0 .15em}
.vnote{font-size:.7rem;color:#6B7280;margin-top:2px}.vp.big+.vnote{font-size:1rem}
body.noscroll{overflow:hidden;position:fixed;inset:0;width:100%}
.kpop{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.kpop-card{position:relative;background:#fff;border-radius:24px;width:min(1000px,100%);height:min(1300px,100%);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.kpop-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid #F3F4F6}
.kx{border:0;background:#F3F4F6;border-radius:50%;width:40px;height:40px;font-size:1.1rem;cursor:pointer}
.kpop-body{flex:1;display:flex;flex-direction:column;min-height:0}
.kpop-prob{display:flex;flex-direction:column;align-items:center;padding:14px 10px 6px;gap:4px}
.kpop-ans{font-family:"Comic Sans MS","Chalkboard SE","Marker Felt",cursive;font-size:2.6rem;color:#475569;min-height:3rem}
.kcanvas-wrap{position:relative;flex:1;margin:0 14px;border-radius:16px;border:2px dashed #CBD5E1;background:repeating-linear-gradient(#fff 0 39px,#EEF2FF 39px 40px);overflow:hidden}
.kcanvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.kc-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94A3B8;font-weight:700;pointer-events:none}
.ktools{display:flex;gap:8px;padding:12px 14px;flex-wrap:wrap}
.ktools button{flex:1;min-width:84px;border:0;border-radius:14px;padding:14px 8px;font:inherit;font-weight:800;background:#F3F4F6;color:#1E1B4B;touch-action:manipulation}
.ktools button.on{background:#EDE9FE;color:#6D28D9;box-shadow:inset 0 0 0 2px #A78BFA}.ktools .kans{flex:2;background:linear-gradient(135deg,#7C3AED,#EC4899);color:#fff}
.kpad-sheet{position:absolute;left:0;right:0;bottom:0;background:#F8FAFC;border-top:1px solid #E5E7EB;padding:14px;border-radius:24px 24px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.12)}
.kpad-sheet[hidden]{display:none}
.kpad-disp{text-align:center;font-size:2.2rem;font-weight:900;color:#1E1B4B;background:#fff;border-radius:14px;padding:8px;margin-bottom:6px;min-height:3.2rem}
.kpad-sheet .pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.kpad-sheet .pad button{border:0;background:#fff;border-radius:14px;padding:16px 0;font:inherit;font-weight:900;font-size:1.5rem;box-shadow:0 2px 6px rgba(0,0,0,.06);color:#1E1B4B;touch-action:manipulation}
.kpad-sheet .pad .go{background:#7C3AED;color:#fff;grid-column:span 2}.kpad-sheet .pad .sec{font-size:1.1rem}.kpad-sheet .pad .xk{background:#FEF3C7;color:#92400E}
.e-step.az{background:linear-gradient(135deg,#FEF3C7,#FCE7F3)}.e-step.az .az-pair{margin-left:auto;font-size:1.9rem;font-weight:900;color:#7C3AED}.az-opt{font-style:normal;font-size:.7rem;background:#fff;border-radius:8px;padding:1px 6px;color:#6B7280;margin-left:4px;vertical-align:middle}
.az-strip{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin:8px 0}.az-strip span{width:22px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;background:#fff;color:#9CA3AF}
.az-strip span.g{background:#DCFCE7;color:#15803D}.az-strip span.y{background:#FEF3C7;color:#B45309}.az-strip span.c{background:#7C3AED;color:#fff;transform:scale(1.15)}
.az-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px}.az-grid span{border:2px solid #F3F4F6;border-radius:8px;text-align:center;padding:2px 0;line-height:1.1}.az-grid small{display:block;font-size:.62rem;color:#6B7280;min-height:.7rem}
.kpop-phone{align-items:flex-end;padding:0}.kpop-phone .kpop-card{height:auto;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom)}
.kpop-phone .kcanvas-wrap,.kpop-phone .ktools{display:none}.kpop-phone .kpop-body{flex:none}.kpop-phone .kpop-prob{padding-bottom:0}.kpop-phone .vp.big{font-size:2.6rem}
.kpop-phone .kpad-sheet{position:static;box-shadow:none;border-radius:0}
.e-step.az,.e-step.az small{color:#4C1D95}.e-step.az small b{color:#7C3AED}
/* RSM v2 */
body.rsm-on::before,body.rsm-on::after{display:none}
.rsm-tbtns{display:flex;gap:8px}.rsm-tbtns button{border:0;border-radius:12px;padding:10px 14px;font:inherit;font-weight:800;background:rgba(255,255,255,.18);color:#fff;touch-action:manipulation}
.rsm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-bottom:12px}
.rsm-qc{text-align:left;border:2px solid #DBEAFE;background:#fff;border-radius:16px;padding:12px 14px;font:inherit;color:#111827;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 6px rgba(0,0,0,.05);touch-action:manipulation;cursor:pointer}
.rsm-qc.f{background:#EFF6FF;border-color:#93C5FD}.rsm-qc .p{font-weight:800;font-size:1.05rem}.rsm-qa{margin-top:auto;color:#1E3A8A}
.rsm-note{font-size:.72rem;font-weight:800;background:#FEF3C7;color:#92400E;border-radius:8px;padding:1px 6px}
.rsm-pinned{padding:12px 16px;font-weight:800;font-size:1.2rem;line-height:1.35;color:#111827;background:#EFF6FF;border-bottom:1px solid #DBEAFE}
.rsm-cur{font-size:.95rem;color:#1E3A8A;font-weight:600;margin-top:4px}
.rsm-pop .kcanvas-wrap{margin-top:12px}
.rsm-big-in{width:100%;font:inherit;font-size:1.8rem;font-weight:900;text-align:center;border:2px solid #93C5FD;border-radius:14px;padding:10px;box-sizing:border-box}
@media (max-width:600px){.rsm-pop{padding:0}.rsm-pop .kpop-card{border-radius:0;height:100%}.rsm-pinned{font-size:1.05rem}}
/* Missed days */
.lockcard{border:2px solid #FDBA74;background:linear-gradient(135deg,#FFF7ED,#fff)}
.miss-steps div,.miss-list div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #F3F4F6;font-size:.95rem}.miss-steps b{color:#9CA3AF}.miss-steps b.ok{color:#15803D}
.grid2.is-locked .big-btn{opacity:.45;filter:grayscale(.6)}
.md{border:2px solid #FCD34D;border-radius:16px;padding:12px;margin-top:10px;background:#fff}.md.done{border-color:#E5E7EB;background:#FAFAFA}
.md .row{justify-content:space-between}.md textarea{width:100%;box-sizing:border-box;border:2px solid #E5E7EB;border-radius:12px;padding:8px;font:inherit;margin-top:8px;min-height:44px}
.md .acts{display:flex;gap:8px;margin-top:8px}.md .acts .btn{flex:1;margin:0;padding:10px;font-size:.9rem}.btn.appr{background:#FFE4E6;color:#BE123C;box-shadow:none}
.mtag{display:inline-block;font-size:.7rem;font-weight:800;border-radius:8px;padding:1px 7px;margin-left:6px;vertical-align:middle}.mtag.m{background:#FFE4E6;color:#BE123C}.mtag.p{background:#DCFCE7;color:#15803D}.mtag.pend{background:#FEF3C7;color:#92400E}
.ktiles.five{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
/* Admin view-as-kid */
.av-view{position:relative;border:0;background:none;padding:0;cursor:pointer;border-radius:16px}.av-view:active{transform:scale(.96)}
.av-eye{position:absolute;right:-4px;bottom:-4px;background:#fff;border-radius:50%;width:22px;height:22px;font-size:.75rem;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2)}
#viewAsBar{position:sticky;top:0;z-index:150;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));background:#1E1B4B;color:#fff;font-size:.88rem}
#viewAsBar button{border:0;border-radius:10px;background:#FDE68A;color:#1E1B4B;font:inherit;font-weight:800;padding:7px 10px;white-space:nowrap}
.va-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:400;background:#1E1B4B;color:#fff;padding:10px 14px;border-radius:12px;font-size:.88rem;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:90vw;text-align:center}
body.viewing-as #logout{display:none}
.pen-hint{text-align:center;font-weight:800;font-size:.9rem;color:#7C3AED;background:#F3E8FF;border-radius:999px;padding:4px 12px;margin:2px auto 6px;width:max-content}
/* iPad activity lock: one screen, nothing moves */
html:has(body.ipad-lock), body.ipad-lock { height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; }
body.ipad-lock { position: fixed; inset: 0; width: 100%; padding: 12px 16px; box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.ipad-lock * { touch-action: none; }
body.ipad-lock button { touch-action: manipulation; }
body.ipad-lock .phone-chrome.early { max-width: 640px; }
body.ipad-lock .early .e-scale { display: none; }
body.ipad-lock .early .e-chips, body.ipad-lock .early .e-reps { margin: 4px 0; }
body.ipad-lock .early .e-btns { margin: 6px 0; }
body.ipad-lock .early .e-btns .btn { padding: 12px; }
body.ipad-lock .early .card { padding: 10px 14px; margin-bottom: 6px; }
body.ipad-lock #traceToast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50; width: min(520px, 90vw); }
body.ipad-lock .phone-chrome.e-pw { min-height: 0; height: calc(100dvh - 24px); overflow: hidden; }
body.ipad-lock .e-pw .e-pw-mid { padding-bottom: 2vh; }
body.ipad-lock #app { min-height: 0; height: 100%; overflow: hidden; }
/* Picture Words: 6–8 choices, grid sized by fitPics() to the free space (one screen, no scroll) */
.phone-chrome.e-pw { height: calc(100dvh - 32px); min-height: 0; overflow: hidden; }
.e-pw .e-pw-mid { padding-bottom: 0; min-height: 0; justify-content: flex-start; }
.early .e-pics-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin-top: 10px; }
.early .e-pics-wrap .e-pics { margin: 0; max-width: none; gap: 12px; justify-content: center; align-content: center; }
.early .e-pics-wrap .e-pic { width: var(--pic, 120px); height: var(--pic, 120px); font-size: calc(var(--pic, 120px) * .62); border-radius: calc(var(--pic, 120px) * .2); border-width: 3px; padding: 0; }
.e-pw .e-sayw b { font-size: 1.8rem; } .e-pw .e-spk { width: 64px; height: 64px; font-size: 1.9rem; }
.e-pw .e-say { margin: 6px 0 0; } .e-pw .e-note { margin: 8px 0 0; }
body.ipad-lock .phone-chrome.e-pw { height: calc(100dvh - 24px); }
body:has(.phone-chrome.e-pw) #app { min-height: 0; }
/* Stroke-order tracing */
.early .stroke-hint { text-align: center; font-weight: 800; font-size: .95rem; color: #4C1D95; margin: 6px 0 0; min-height: 1.3em; }
.early #doneTrace.is-wait, .early #doneTrace:disabled { opacity: .45; filter: grayscale(.4); }
body.ipad-lock .early .stroke-hint { margin: 2px 0 0; }
.early .e-badge.minus { background: #DC2626; color: #fff; }
/* Match the letters */
.phone-chrome.e-match { display: flex; flex-direction: column; height: calc(100dvh - 32px); overflow: hidden; }
body.ipad-lock .phone-chrome.e-match { height: calc(100dvh - 24px); }
body:has(.phone-chrome.e-match) #app { min-height: 0; }
.e-match .m-board { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; touch-action: none; }
.e-match .m-row { display: flex; gap: 12px; justify-content: center; }
.e-match .m-mid { font-size: 1.4rem; color: #A78BFA; font-weight: 900; height: 26px; }
.e-match .m-tile { width: var(--mt, 90px); height: var(--mt, 90px); border-radius: calc(var(--mt, 90px) * .22); border: 4px solid #E9D5FF; background: #fff; font: 900 calc(var(--mt, 90px) * .58) "Arial Rounded MT Bold","Nunito",system-ui,sans-serif; color: #4C1D95; box-shadow: 0 6px 16px rgba(0,0,0,.08); cursor: pointer; display: grid; place-items: center; padding: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
.e-match .m-tile.up { color: #7C3AED; } .e-match .m-tile.low { color: #DB2777; border-color: #FBCFE8; }
.e-match .m-tile.sel { border-color: #F59E0B; background: #FFFBEB; transform: scale(1.06); box-shadow: 0 0 0 6px rgba(245,158,11,.25); }
.e-match .m-tile.bad { border-color: #F87171; background: #FEF2F2; }
.e-match .m-tile.shake { animation: eshake .4s; }
.e-match .m-tile.ok { border-color: #22C55E; background: #DCFCE7; color: #15803D; opacity: 1; }
body.ipad-lock .phone-chrome.early.e-match { max-width: 900px; }
/* Memory (flip-and-match) */
.e-bonus { font-style: normal; font-size: .7rem; background: #8B5CF6; color: #fff; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.phone-chrome.e-memory { display: flex; flex-direction: column; height: calc(100dvh - 32px); overflow: hidden; }
body.ipad-lock .phone-chrome.early.e-memory { height: calc(100dvh - 24px); max-width: 900px; }
body:has(.phone-chrome.e-memory) #app { min-height: 0; }
.e-memory .mem-dots { display: flex; gap: 6px; justify-content: center; margin: 4px 0; }
.e-memory .mem-dots i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #C4B5FD; }
.e-memory .mem-dots i.on { background: #22C55E; border-color: #22C55E; } .e-memory .mem-dots i.cur { background: #F59E0B; border-color: #F59E0B; }
.e-memory .mem-board { flex: 1; min-height: 0; display: grid; gap: 12px; place-content: center; touch-action: none; }
.e-memory .mem-card { width: var(--ms, 100px); height: var(--ms, 100px); padding: 0; border: 0; background: none; perspective: 800px; touch-action: none; -webkit-user-select: none; user-select: none; position: relative; cursor: pointer; }
.e-memory .mem-card .in { position: absolute; inset: 0; transition: transform .4s; transform-style: preserve-3d; display: block; }
.e-memory .mem-card.up .in, .e-memory .mem-card.ok .in { transform: rotateY(180deg); }
.e-memory .mem-card .b, .e-memory .mem-card .f { position: absolute; inset: 0; border-radius: 18%; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.e-memory .mem-card .b { background: repeating-linear-gradient(45deg, #8B5CF6 0 12px, #A78BFA 12px 24px); border: 4px solid #fff; color: #fff; font: 900 calc(var(--ms, 100px) * .38) system-ui, sans-serif; }
.e-memory .mem-card .f { background: #fff; border: 4px solid #F59E0B; transform: rotateY(180deg); font-size: calc(var(--ms, 100px) * .5); line-height: 1; }
.e-memory .mem-card .f small { position: absolute; bottom: 6%; font: 900 calc(var(--ms, 100px) * .11) "Nunito", system-ui, sans-serif; color: #6D28D9; }
.e-memory .mem-card.ok .f { border-color: #22C55E; background: #DCFCE7; }
.e-memory .mem-card.ok::after { content: "+1¢"; position: absolute; top: -8px; right: -6px; z-index: 2; background: #16A34A; color: #fff; font: 900 .8rem system-ui, sans-serif; padding: 2px 6px; border-radius: 8px; }
.e-memory .mem-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.e-memory .mem-done .big { font-size: 5rem; } .e-memory .mem-done h2 { margin: 0; font-size: 2rem; }
.e-memory .mem-done .pill { background: #16A34A; color: #fff; font-weight: 900; padding: 8px 18px; border-radius: 999px; font-size: 1.2rem; }
.early .e-step.t3 { background: linear-gradient(135deg, #2DD4BF, #0EA5E9); }
.early .e-step .e-bonus { background: #fff; color: #0369A1; }
/* Montessori cards */
.early .e-step.tm0 { background: linear-gradient(135deg, #FBBF24, #F59E0B); } .early .e-step.tm1 { background: linear-gradient(135deg, #F472B6, #DB2777); }
.early .e-step.tm2 { background: linear-gradient(135deg, #34D399, #059669); } .early .e-step.tm3 { background: linear-gradient(135deg, #60A5FA, #4F46E5); }
.e-mont-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .e-mont-steps { grid-template-columns: 1fr; } }
.phone-chrome.e-mont { display: flex; flex-direction: column; height: calc(100dvh - 32px); overflow: hidden; --u: 60px; }
body.ipad-lock .phone-chrome.early.e-mont { height: calc(100dvh - 24px); max-width: 900px; }
body:has(.phone-chrome.e-mont) #app { min-height: 0; }
.e-mont .e-say { margin: 2px 0; }
.mt-spk { background: #fff; color: #7C3AED; font-weight: 900; font-size: .85rem; padding: 4px 12px; border-radius: 999px; border: 0; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.mt-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(var(--u) * .3); touch-action: none; position: relative; }
.e-mont .dg { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; transition: transform .15s; }
.e-mont .dg.sel { outline: 5px solid #F59E0B; outline-offset: 2px; transform: scale(1.06); }
.e-mont .dg.lifted { opacity: .3; }
.e-mont .dg.shake { animation: eshake .4s; }
.m-ghost { position: fixed; z-index: 9999; pointer-events: none; opacity: .95; transform: scale(1.08); filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); margin: 0 !important; }
.m-shape { display: inline-block; }
/* counting */
.mc-num { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); border-radius: 22%; background: #fff; border: 5px solid #F59E0B; display: grid; place-items: center; font: 900 calc(var(--u) * 1.15) "Arial Rounded MT Bold", system-ui, sans-serif; color: #B45309; box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.mc-box { width: min(100%, calc(var(--u) * 7.4)); min-height: calc(var(--u) * 1.5); border: 6px solid #A16207; border-radius: 18px; background: repeating-linear-gradient(90deg, #FDE68A 0 40px, #FCD34D 40px 80px); position: relative; padding: 8px; margin-bottom: 20px; }
.mc-box.shake { animation: eshake .4s; }
.mc-in { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; min-height: calc(var(--u) * 1.1); }
.mc-lbl { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; font-weight: 900; color: #92400E; font-size: .95rem; }
.mc-tray { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: calc(var(--u) * 6 + 60px); background: rgba(255,255,255,.55); border-radius: 22px; padding: 10px; min-height: calc(var(--u) + 20px); }
.mc-item { font-size: calc(var(--u) * .66); width: var(--u); height: var(--u); display: grid; place-items: center; background: #fff; border-radius: 22%; box-shadow: 0 3px 8px rgba(0,0,0,.07); position: relative; }
.mc-in .mc-item { background: transparent; box-shadow: none; }
.mc-in .mc-item::after { content: attr(data-c); position: absolute; top: -4px; right: -4px; background: #7C3AED; color: #fff; font: 900 .75rem system-ui; border-radius: 999px; padding: 1px 6px; }
.mc-check { font-size: 1.2rem; padding: 10px 28px; border-radius: 18px; }
/* size order */
.ms-slots, .ms-pool { display: flex; align-items: flex-end; justify-content: center; gap: var(--g, 16px); padding: 10px var(--g, 14px); border-radius: 20px; }
.ms-slots { background: rgba(255,255,255,.55); }
.ms-slots.rods, .ms-pool.rods { flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .14); }
.ms-pool.rods { align-items: center; }
.ms-slot { border: 3px dashed #C4B5FD; border-radius: 12px; display: flex; align-items: flex-end; justify-content: center; }
.ms-slots.rods .ms-slot { height: calc(var(--u) * .36 + 10px); align-items: center; justify-content: flex-start; padding-left: 2px; }
.ms-slot.ok { border-color: #22C55E; border-style: solid; }
.ms-blk { display: block; border-radius: 10px; background: linear-gradient(135deg, #F9A8D4, #EC4899); border: 3px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.15); }
.ms-rod { display: flex; height: calc(var(--u) * .36); border-radius: 8px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.ms-rod i { flex: 1; } .ms-rod i.r { background: #EF4444; } .ms-rod i.b { background: #3B82F6; }
/* sorting */
.mo-bins { display: flex; gap: 14px; justify-content: center; width: 100%; }
.mo-bin { flex: 1; max-width: calc(var(--u) * 2.8); min-height: calc(var(--u) * 2); border-radius: 22px; background: rgba(255,255,255,.7); border: 5px solid #C4B5FD; display: flex; flex-direction: column; align-items: center; padding: 8px; gap: 6px; }
.mo-head { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 1rem; }
.mo-ic { font-size: calc(var(--u) * .45); } .mo-sw { width: calc(var(--u) * .45); height: calc(var(--u) * .45); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.mo-in { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.mo-in .mo-item { width: calc(var(--u) * .7); height: calc(var(--u) * .7); font-size: calc(var(--u) * .45); box-shadow: none; }
.mo-in .mo-item .m-shape { transform: scale(.7); }
.mo-pool { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; min-height: var(--u); }
.mo-item { font-size: calc(var(--u) * .6); width: var(--u); height: var(--u); display: grid; place-items: center; background: #fff; border-radius: 22%; box-shadow: 0 4px 10px rgba(0,0,0,.08); }
/* sequencing */
.mq-slots { display: flex; align-items: center; gap: 8px; justify-content: center; }
.mq-arrow { font-size: calc(var(--u) * .18); color: #8B5CF6; font-weight: 900; }
.mq-slot { width: var(--u); height: var(--u); border-radius: 22%; border: 4px dashed #A78BFA; display: grid; place-items: center; background: rgba(255,255,255,.35); position: relative; }
.mq-slot.ok { border-color: #22C55E; border-style: solid; }
.mq-n { font: 900 calc(var(--u) * .3) system-ui; color: #C4B5FD; }
.mq-slot .mq-pc { position: absolute; inset: -4px; width: auto; height: auto; }
.mq-slot.ok .mq-pc { border-color: #22C55E; }
.mq-pool { display: flex; gap: 14px; justify-content: center; min-height: var(--u); }
.mq-pc { width: var(--u); height: var(--u); border-radius: 22%; background: #fff; border: 5px solid #E9D5FF; display: grid; place-items: center; font-size: calc(var(--u) * .48); position: relative; box-shadow: 0 6px 16px rgba(0,0,0,.08); line-height: 1; }
.mq-pc small { position: absolute; bottom: 6%; font: 900 calc(var(--u) * .1) "Nunito", system-ui, sans-serif; color: #6D28D9; }
.mc-check { width: auto !important; align-self: center; min-width: 160px; }
.bankline .banklv { display: block; font-size: .8rem; opacity: .85; }
.bankline .banklv i { font-style: normal; padding: 0 5px; border-radius: 6px; background: rgba(34,197,94,.12); margin-right: 2px; }
.bankline .banklv i.cur { font-weight: 900; outline: 1.5px solid currentColor; }
.bankline .banklv i.low { background: rgba(239,68,68,.18); color: #991B1B; }

/* Word of the Day spelling activities */
.sg-card .sg-title { text-align: center; margin: 4px 0 10px; font-size: 1.35rem; }
.sg-q { text-align: center; font-weight: 600; margin: 6px 0 12px; }
.sg-wrong { text-align: center; font-size: 2rem; font-weight: 800; letter-spacing: 2px; color: #B45309; text-decoration: underline wavy #F59E0B; margin: 6px 0 14px; }
.sg-in { font-size: 1.4rem; text-align: center; letter-spacing: 1px; }
.sg-hint { text-align: center; margin-top: 8px; }
.sg-blanks { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin: 10px 0 6px; }
.sg-fixed, .sg-box { width: 2.3rem; height: 2.9rem; font-size: 1.7rem; font-weight: 800; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.sg-box { border: 2px solid #6366F1; border-radius: 10px; background: #EEF2FF; padding: 0; color: #1E293B; }
.sg-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sg-pick { font-size: 1.35rem; font-weight: 800; padding: 16px 8px; letter-spacing: 1px; }
.sg-pick.bad { opacity: .45; text-decoration: line-through; }
.sg-built, .sg-tiles { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.sg-tile { width: 2.7rem; height: 3rem; border-radius: 10px; border: 2px solid #CBD5E1; background: #fff; font-size: 1.6rem; font-weight: 800; color: #1E293B; touch-action: manipulation; }
.sg-tile.slot { background: #F8FAFC; border-style: dashed; border-color: #94A3B8; }
.sg-tiles .sg-tile { background: #FEF3C7; border-color: #F59E0B; }
.sg-tile.used { visibility: hidden; }
.sg-hwwrap { border: 2px solid #CBD5E1; border-radius: 14px; background: #fff; overflow: hidden; }
.sg-ink { width: 100%; height: 220px; display: block; touch-action: none; }
.sg-reveal { text-align: center; font-size: 2.2rem; font-weight: 800; letter-spacing: 3px; color: #15803D; margin: 10px 0 2px; }
.sg-bee { min-height: 3.2rem; text-align: center; font-size: 2rem; font-weight: 800; letter-spacing: 2px; border-bottom: 3px solid #F59E0B; margin: 8px 20px 12px; }
.sg-keys > div { display: flex; justify-content: center; gap: 4px; margin-bottom: 5px; }
.sg-key { flex: 0 1 2.6rem; height: 2.9rem; border-radius: 8px; border: 1px solid #CBD5E1; background: #fff; font-size: 1.25rem; font-weight: 700; color: #1E293B; touch-action: manipulation; }
.sg-key:active { background: #E0E7FF; }
.sg-sm { padding: 8px 12px; font-size: .95rem; width: auto; }
.sg-adm code { padding: 1px 6px; border-radius: 6px; font-weight: 700; }
.sg-adm code.ok { background: #DCFCE7; color: #15803D; }
.sg-adm code.bad { background: #FEE2E2; color: #B91C1C; }
.sg-adm-ink { max-width: 260px; border: 1px solid #E2E8F0; border-radius: 8px; margin-top: 6px; }

/* ---------- Harry Potter knowledge card (original CSS/emoji art only; no official logos, images or typeface) ---------- */
:root{--hpn1:#0B1026;--hpn2:#1B1F4B;--hpn3:#2B1E4F;--hpgold:#E8C46A;--hpparch:#F4E6C3;--hpparch2:#E6D09B;--hpink:#3B2414}
.hp-bg{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:5;color:var(--hpparch);background:
  radial-gradient(2px 2px at 12% 8%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 30% 18%,#fff9 50%,transparent 51%),radial-gradient(2px 2px at 72% 6%,#fffa 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 88% 22%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 55% 12%,#fff7 50%,transparent 51%),radial-gradient(2px 2px at 8% 30%,#fff6 50%,transparent 51%),
  radial-gradient(120px 120px at 85% 9%,#FFF7D6 0 26px,#fff3 27px,transparent 60px),linear-gradient(180deg,var(--hpn1) 0%,var(--hpn2) 55%,var(--hpn3) 100%);background-attachment:fixed}
.hp-wrap{max-width:820px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 22px 60px}
.hp-serif{font-family:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif}
.hp-back{background:none;border:0;color:var(--hpgold);font-weight:700;font-size:1rem;padding:6px 0;cursor:pointer;font-family:inherit}
.hp-gold{color:var(--hpgold)}.hp-h1{font-size:2rem;margin:.3em 0 .1em}.hp-p{opacity:.9;margin:0 0 14px}
.hp-label{font-weight:800;margin-top:6px}
.hp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hp-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-weight:800;font-size:.85rem;background:#E8C46A33;color:var(--hpgold)}
.hp-small{font-size:.85rem;opacity:.8}
.hp-kicker{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;opacity:.7;text-align:center}
.hp-parch{background:radial-gradient(ellipse at 30% 20%,#FBF3DC 0%,var(--hpparch) 45%,var(--hpparch2) 100%);color:var(--hpink);border-radius:14px;
  box-shadow:inset 0 0 40px #B8892B55,0 10px 30px #0008;position:relative;border:1px solid #C9A86455}
.hp-parch::after{content:"";position:absolute;inset:6px;border:1.5px dashed #9A6B2F55;border-radius:10px;pointer-events:none}
.hp-seal{width:62px;height:62px;border-radius:50%;flex:none;display:grid;place-items:center;color:#FDE68A;font-size:28px;position:relative;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--h1,#9B1C1C) 60%,#fff),var(--h1,#9B1C1C) 60%,color-mix(in srgb,var(--h1,#9B1C1C) 65%,#000));box-shadow:0 3px 8px #0007,inset 0 -3px 6px #0005}
.hp-crest{width:64px;height:76px;flex:none;clip-path:path("M32 0 L64 8 L64 38 C64 58 46 70 32 76 C18 70 0 58 0 38 L0 8 Z");display:grid;place-items:center;font-size:30px;
  background:linear-gradient(90deg,var(--c1) 0 50%,var(--c2) 50% 100%)}
.hp-crest.sm{margin:0 auto 6px;width:52px;height:62px;font-size:24px;clip-path:path("M26 0 L52 7 L52 31 C52 47 37 57 26 62 C15 57 0 47 0 31 L0 7 Z")}
.hp-btn{display:block;width:100%;padding:16px;border-radius:14px;border:0;font-weight:900;font-size:1.15rem;cursor:pointer;font-family:inherit;
  background:linear-gradient(180deg,#F5D987,#C99A3A);color:#3B2414;box-shadow:0 4px 0 #8A6420,0 8px 18px #0006}
.hp-btn:disabled{opacity:.6}
.hp-later{display:block;margin:12px auto 0;background:none;border:0;color:#6B4A2B;font-weight:700;font-size:1rem;cursor:pointer;font-family:inherit}
/* home card */
.hpcard{display:block;width:100%;text-align:left;margin-top:16px;border-radius:22px;overflow:hidden;color:var(--hpparch);position:relative;cursor:pointer;padding:0;font:inherit;
  background:radial-gradient(60px 60px at 88% 22%,#FFF7D6 0 16px,#fff2 17px,transparent 40px),linear-gradient(160deg,var(--hpn1),var(--hpn2) 60%,var(--hpn3));box-shadow:0 10px 28px #1B1F4B66;border:2px solid #E8C46A88}
.hp-castle{display:block;position:relative;height:84px;margin-top:22px}
.hp-castle i{position:absolute;bottom:0;background:#070A1A;display:block}
.hp-castle i::before{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:100%;border-left:var(--r) solid transparent;border-right:var(--r) solid transparent;border-bottom:calc(var(--r)*2.2) solid #070A1A}
.hp-castle b{position:absolute;width:6px;height:9px;background:#FCD34D;border-radius:3px 3px 0 0;box-shadow:0 0 8px #FCD34D}
.hp-in{display:flex;gap:16px;align-items:center;padding:16px 20px 18px;background:#070A1A}
.hp-txt{flex:1;display:flex;flex-direction:column;gap:3px;font-family:"Palatino Linotype",Palatino,Georgia,serif}
.hp-t{font-size:1.35rem;font-weight:800;color:var(--hpgold)}.hp-s{font-weight:700}.hp-s2{font-size:.85rem;opacity:.75}
.hp-newtag{position:absolute;top:10px;right:12px;background:var(--hpgold);color:#3B2414;font-weight:900;font-size:.75rem;padding:3px 9px;border-radius:999px;z-index:1}
/* unlock pop-up */
.hp-dim{position:fixed;inset:0;background:#0B1026E6;display:grid;place-items:center;z-index:200;padding:16px}
.hp-pop{width:min(560px,100%);text-align:center;padding:30px 26px 26px}
.hp-poph{font-size:2rem;color:#7C2D12}
.hp-snitch-path{position:relative;height:150px;overflow:hidden}
.hp-snitch{position:absolute;left:50%;top:50px;width:58px;height:58px;margin-left:-29px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF5C2,#F2C94C 40%,#B8892B 85%);box-shadow:0 0 30px #F2C94Caa,inset -4px -6px 10px #8A642088;animation:hpfly 3.2s ease-in-out infinite}
.hp-snitch::before,.hp-snitch::after{content:"";position:absolute;top:10px;width:84px;height:30px;
  background:linear-gradient(180deg,#FFFFFF,#E5E7EBCC);box-shadow:0 0 10px #fff9,inset 0 -4px 6px #CBD5E188;animation:hpflap .18s ease-in-out infinite alternate}
.hp-snitch::before{right:46px;transform-origin:right center;border-radius:80% 20% 40% 60%/70% 30% 70% 30%}
.hp-snitch::after{left:46px;transform-origin:left center;border-radius:20% 80% 60% 40%/30% 70% 30% 70%;animation-name:hpflap2}
.hp-trail{position:absolute;inset:0;background:radial-gradient(3px 3px at 20% 70%,#F2C94C 50%,transparent 51%),radial-gradient(2px 2px at 30% 55%,#FDE68A 50%,transparent 51%),radial-gradient(2px 2px at 38% 64%,#F2C94C 50%,transparent 51%),radial-gradient(3px 3px at 70% 30%,#FDE68A 50%,transparent 51%),radial-gradient(2px 2px at 80% 44%,#F2C94C 50%,transparent 51%)}
@keyframes hpfly{0%{transform:translate(-140px,30px)}30%{transform:translate(110px,-25px)}60%{transform:translate(-40px,-10px)}100%{transform:translate(-140px,30px)}}
@keyframes hpflap{from{transform:rotate(18deg)}to{transform:rotate(-14deg)}}
@keyframes hpflap2{from{transform:rotate(-18deg)}to{transform:rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.hp-snitch,.hp-snitch::before,.hp-snitch::after{animation:none}}
/* picker */
.hp-houses{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 20px}
.hp-house{border-radius:14px;padding:10px 6px;text-align:center;background:#ffffff10;border:2px solid transparent;font-weight:800;font-size:.9rem;color:var(--hpparch);cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center}
.hp-house.sel{border-color:var(--hpgold);background:#E8C46A22;box-shadow:0 0 18px #E8C46A55}
.hp-books{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp-book{display:flex;gap:14px;align-items:center;padding:14px 16px;text-align:left;cursor:pointer;font:inherit;font-family:inherit}
.hp-book>span:last-child{display:flex;flex-direction:column}
.hp-book.sel{outline:3px solid var(--hpgold);outline-offset:2px}
.hp-spine{width:46px;height:66px;border-radius:4px 8px 8px 4px;box-shadow:inset 6px 0 0 #0003,0 3px 6px #0005;display:grid;place-items:center;font-size:24px;flex:none}
.hp-lvl{display:flex;gap:3px;margin:4px 0 2px}.hp-lvl i{width:16px;height:7px;border-radius:3px;background:#3B241422}.hp-lvl i.f{background:linear-gradient(90deg,#C99A3A,#F5D987)}
@media (max-width:600px){.hp-books{grid-template-columns:1fr}.hp-houses{grid-template-columns:repeat(2,1fr)}}
/* question */
.hp-prog{height:12px;border-radius:99px;background:#ffffff22;overflow:hidden;margin:8px 0 14px}.hp-prog b{display:block;height:100%;background:linear-gradient(90deg,#C99A3A,#F5D987);transition:width .3s}
.hp-qcard{padding:22px}
.hp-qhead{display:flex;gap:14px;align-items:flex-start}
.hp-q{font-size:1.45rem;line-height:1.3;margin:.2em 0}
.hp-spk{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid #9A6B2F66;background:#ffffff66;font-size:18px;cursor:pointer}
.hp-opts{display:grid;gap:12px;margin-top:18px}
.hp-opt{display:flex;gap:14px;align-items:center;padding:16px 18px;font-weight:800;font-size:1.15rem;text-align:left;cursor:pointer;font-family:inherit}
.hp-opt .hp-k{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#3B241414;font-weight:900;flex:none}
.hp-opt.bad{background:#FEE2E2;color:#991B1B;opacity:.75;text-decoration:line-through}
.hp-opt.ok{background:#DCFCE7;color:#166534;outline:3px solid #22C55E}
.hp-fb{min-height:1.4em;margin-top:12px;font-weight:800;text-align:center}
/* results */
.hp-grade{font-size:2.2rem;color:#7C2D12;margin:.15em 0}
.hp-owl{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0}
.hp-owl span{padding:4px 10px;border-radius:999px;font-weight:800;font-size:.8rem;background:#3B241414;color:#3B241499}
.hp-owl span.me{background:linear-gradient(180deg,#F5D987,#C99A3A);color:#3B2414;box-shadow:0 2px 8px #8A642066}
.hp-wrong{padding:14px 16px;margin-top:12px}
.hp-ans{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;font-weight:800}
.hp-mine{background:#FEE2E2;color:#991B1B;padding:3px 10px;border-radius:8px}.hp-right{background:#DCFCE7;color:#166534;padding:3px 10px;border-radius:8px}

/* ───────── Skill Builder (daily step 3 from Mon Oct 19) ───────── */
.big-btn.skill{grid-column:1/-1;border-top:5px solid #0EA5E9;text-align:left;align-items:stretch;position:relative}
.big-btn.skill.is-done{background:linear-gradient(135deg,#E0F2FE,#BAE6FD)}
.big-btn.skill .sb-top{display:flex;gap:12px;align-items:center}
.sb-new{position:absolute;top:10px;right:12px;background:#0EA5E9;color:#fff;font-weight:900;font-size:.7rem;padding:3px 9px;border-radius:999px}
.sb-areas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.sb-area{border-radius:14px;padding:8px 6px;text-align:center;font-size:.78rem;font-weight:800;background:#F8FAFC;border:2px solid #E2E8F0;color:#1E1B4B}
.sb-area b{display:block;font-size:1.25rem}.sb-area small{display:block;color:#64748B;font-weight:700}
.sb-area.done{background:#DCFCE7;border-color:#86EFAC}.sb-area.now{border-color:#0EA5E9;background:#E0F2FE}
.adm .dot.ok.sb{background:#0EA5E9;color:#fff}
.sb-qtop{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:#6D28D9}
.sb-segs{display:flex;gap:5px;margin:10px 0 14px}.sb-segs i{flex:1;height:10px;border-radius:9px;background:#E5E7EB}
.sb-segs i.phonics{background:#F97316}.sb-segs i.nonfiction{background:#16A34A}.sb-segs i.geometry{background:#8B5CF6}.sb-segs i.measure{background:#0EA5E9}
.sb-segs i.todo{opacity:.35}.sb-segs i.cur{outline:3px solid #1E1B4B;outline-offset:1px;opacity:1}
.sb-chip{display:inline-flex;gap:6px;align-items:center;font-weight:900;font-size:.8rem;padding:4px 11px;border-radius:999px}
.sb-chip.phonics{background:#FFEDD5;color:#9A3412}.sb-chip.nonfiction{background:#DCFCE7;color:#166534}.sb-chip.geometry{background:#EDE9FE;color:#5B21B6}.sb-chip.measure{background:#E0F2FE;color:#075985}
.sb-card{background:#fff;border-radius:24px;padding:20px 22px;box-shadow:0 8px 24px rgba(76,29,149,.08);margin-top:10px}
.sb-q{font-size:1.4rem;font-weight:800;line-height:1.35;margin:10px 0 4px}
.sb-spk{float:right;width:46px;height:46px;border-radius:50%;border:2px solid #E9D5FF;background:#FAF5FF;font-size:20px;margin-left:8px}
.sb-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.sb-opts.one{grid-template-columns:1fr}
.sb-opt{background:#fff;border:3px solid #E5E7EB;border-radius:18px;padding:16px 14px;min-height:64px;font:inherit;font-size:1.3rem;font-weight:800;text-align:center;color:#1E1B4B;cursor:pointer;touch-action:manipulation}
.sb-opts.one .sb-opt{text-align:left;font-size:1.12rem;padding:14px 18px}
.sb-opt svg{max-width:100%;height:auto;display:block;margin:0 auto}
.sb-opt.no{border-color:#FCA5A5;background:#FEF2F2;color:#B91C1C;text-decoration:line-through;opacity:.75}
.sb-opt.yes{border-color:#22C55E;background:#DCFCE7;color:#166534}
.sb-opt:disabled{cursor:default}
.sb-money{text-align:center;color:#64748B;font-size:.85rem;margin-top:12px}
.sb-pseudo{display:flex;justify-content:center;gap:4px;margin:16px 0 6px}
.sb-pseudo span{font-size:3rem;font-weight:900;padding:4px 10px;border-radius:12px;background:#FFF7ED;color:#9A3412}
.sb-pseudo span.rime{background:#F97316;color:#fff}
.sb-emoji{font-size:5rem;text-align:center;line-height:1.2;margin:8px 0}
.sb-visual{display:flex;justify-content:center;margin:14px 0 4px}.sb-visual svg{max-width:100%;height:auto}
.sb-passage{background:#FFFDF5;border:2px solid #FDE68A;border-radius:18px;padding:16px 18px;font-size:1.08rem;line-height:1.55;margin-top:6px}
.sb-passage h3{margin:0 0 4px;font-size:1.3rem}.sb-passage h4{margin:12px 0 2px;color:#166534;font-size:1.05rem}.sb-passage p{margin:0}
.sb-fig{float:right;width:150px;margin:4px 0 6px 14px;background:#ECFEFF;border-radius:14px;padding:10px;text-align:center;font-size:.8rem;color:#155E75}
.sb-fig div{font-size:3.4rem;line-height:1.1}
.sb-gl{clear:both;margin-top:10px;background:#F0FDF4;border-left:5px solid #16A34A;padding:6px 10px;border-radius:8px;font-size:.92rem}
.sb-fb{margin-top:14px;border-radius:16px;padding:12px 14px;font-weight:800;font-size:1.05rem}
.sb-fb.good{background:#DCFCE7;color:#166534}.sb-fb.bad{background:#FEF3C7;color:#92400E}
.sb-tools{display:flex;gap:10px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.sb-tool{border:2px solid #DDD6FE;background:#F5F3FF;border-radius:14px;padding:12px 18px;font:inherit;font-weight:800;color:#5B21B6;min-height:48px}
.sb-tool.on{background:#7C3AED;color:#fff;border-color:#7C3AED}
.sb-split svg{touch-action:none;max-width:100%;height:auto}
.sb-scratch{margin-top:14px;border:2px dashed #CBD5E1;border-radius:16px;position:relative;background:#FCFCFD}
.sb-scratch canvas{display:block;width:100%;height:220px;touch-action:none}
.sb-scratch .sb-sh{position:absolute;left:12px;top:8px;color:#94A3B8;font-weight:700;font-size:.85rem;pointer-events:none}
.sb-scratch button{position:absolute;right:8px;top:6px;border:0;background:#F1F5F9;border-radius:10px;padding:6px 10px;font:inherit;font-weight:800;color:#475569}
.sb-ladder{margin-top:14px;background:#fff;border-radius:18px;padding:12px 14px;font-size:.85rem}
.sb-ladder .r{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.sb-ladder .r span{padding:4px 9px;border-radius:999px;background:#F1F5F9;color:#475569;font-weight:700}
.sb-ladder .r span.on{background:#0EA5E9;color:#fff}
.pp-group{margin-top:8px;text-align:left}.pp-group>b{display:block;font-size:.85rem;color:#475569;margin:6px 0 2px}
.sb-pill{background:#E0F2FE;color:#075985}
/* admin */
.sb-adm table{width:100%;border-collapse:collapse;font-size:.88rem}
.sb-adm th{text-align:left;color:#6B7280;font-weight:800;font-size:.72rem;text-transform:uppercase;padding:8px 6px;border-bottom:2px solid #E5E7EB}
.sb-adm td{padding:9px 6px;border-bottom:1px solid #F1F5F9;vertical-align:middle}
.sb-band{font-size:.72rem;font-weight:900;padding:3px 8px;border-radius:999px;white-space:nowrap}
.sb-band.b1{background:#FEE2E2;color:#B91C1C}.sb-band.b2{background:#FEF3C7;color:#92400E}.sb-band.b3{background:#DCFCE7;color:#166534}
.sb-lv{display:flex;gap:3px;margin-bottom:3px}.sb-lv i{width:14px;height:8px;border-radius:3px;background:#E5E7EB}.sb-lv i.f{background:#0EA5E9}
.sb-gap{font-weight:900;color:#B91C1C}
.sb-spark{display:flex;gap:2px;align-items:flex-end;height:22px}.sb-spark i{width:7px;border-radius:2px;background:#93C5FD}.sb-spark i.r{background:#FCA5A5}
.sb-tw{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sb-tw>div{background:#F9FAFB;border-radius:14px;padding:12px}
.sb-bar{height:10px;border-radius:9px;background:#E5E7EB;overflow:hidden;margin:6px 0}.sb-bar b{display:block;height:100%;background:#8B5CF6}
@media (max-width:640px){.sb-tw{grid-template-columns:1fr}.sb-adm .hide-sm{display:none}}