:root{
  --bg:#F4F2FB;
  --card:#FFFFFF;
  --ink:#26264A;
  --ink-soft:#6B6B8D;
  --accent:#6C4FE0;
  --accent-dark:#5238B8;
  --accent-soft:#EDE9FE;
  --correct:#1FA463;
  --correct-soft:#E3F8ED;
  --incorrect:#E14C63;
  --incorrect-soft:#FDE9EC;
  --hint:#2F73D6;
  --hint-soft:#E8F1FD;
  --amber:#D98C11;
  --amber-soft:#FDF3E0;
  --line:#E4E1F5;
  --shadow: 0 2px 6px rgba(38,38,74,0.06), 0 10px 28px rgba(38,38,74,0.08);
  --radius: 22px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --abacus-frame:#8B5E34;
  --abacus-frame-dark:#6B4423;
  --abacus-rod:#D8B36A;
  --abacus-heaven-bead:#D98C11;
  --abacus-earth-bead:#6C4FE0;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

button{ font-family:inherit; }

#app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--accent-dark);
  outline-offset:2px;
}

/* ---------- shell ---------- */
.screen{
  flex:1;
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:1.25rem 1.1rem 6rem;
  display:flex;
  flex-direction:column;
}
.screen.wide{ max-width:720px; }

.topbar{
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.4rem 0 1rem;
}
.topbar h1{
  font-size:1.05rem;
  font-weight:700;
  margin:0;
  flex:1;
}
.icon-btn{
  border:none;
  background:var(--card);
  box-shadow:var(--shadow);
  width:2.4rem;
  height:2.4rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color:var(--ink);
  cursor:pointer;
  flex-shrink:0;
}
.icon-btn:hover{ background:var(--accent-soft); }
.icon-btn .icon-speaker{ display:block; }
.icon-btn.is-speaking{ color:var(--accent-dark); background:var(--accent-soft); }
.icon-btn .wave{ opacity:0.35; transition:opacity 0.15s; transform-origin:8px 12px; }
.icon-btn.is-speaking .wave{ animation:wave-pulse 0.9s ease-in-out infinite; }
.icon-btn.is-speaking .wave-2{ animation-delay:0.15s; }
@keyframes wave-pulse{
  0%, 100%{ opacity:0.35; }
  50%{ opacity:1; }
}

/* ---------- welcome ---------- */
.welcome{
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:0.4rem;
  padding-top:3rem;
}
.mascot{ width:150px; height:150px; margin-bottom:0.5rem; }
.welcome h1{
  font-size:2rem;
  font-weight:800;
  margin:0.2rem 0 0.2rem;
  letter-spacing:-0.01em;
  color:var(--accent-dark);
}
.welcome p{
  color:var(--ink-soft);
  margin:0 0 2rem;
  font-size:1rem;
}
.plus-decor{
  position:absolute;
  font-weight:800;
  color:var(--amber);
  opacity:0.8;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  border:none;
  border-radius:999px;
  padding:0.9rem 1.6rem;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:transform 0.08s ease, box-shadow 0.15s ease;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(108,79,224,0.35); }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-block{ width:100%; }
.btn-secondary{ background:var(--card); color:var(--accent-dark); border:1.5px solid var(--accent-soft); }
.btn-secondary:hover{ background:var(--accent-soft); }
.btn-correct{ background:var(--correct); color:#fff; box-shadow:0 8px 20px rgba(31,164,99,0.3); }
.btn-hint{ background:var(--hint); color:#fff; box-shadow:0 8px 20px rgba(47,115,214,0.3); }
.btn-ghost{ background:transparent; color:var(--ink-soft); font-weight:600; padding:0.6rem 1rem; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

/* ---------- cards ---------- */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.4rem 1.3rem;
}

/* ---------- topics ---------- */
.topics-intro{ text-align:center; margin-bottom:1.2rem; }
.topics-intro h2{ font-size:1.3rem; margin:0 0 0.2rem; }
.topics-intro p{ color:var(--ink-soft); margin:0; font-size:0.92rem; }
.topic-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0.8rem;
}
@media (min-width:560px){
  .screen.wide .topic-grid{ grid-template-columns:1fr 1fr; }
}
.topic-card{
  display:flex;
  align-items:center;
  gap:0.9rem;
  background:var(--card);
  border:none;
  border-radius:18px;
  padding:1rem 1.1rem;
  box-shadow:var(--shadow);
  cursor:pointer;
  text-align:left;
  width:100%;
}
.topic-card:hover{ transform:translateY(-2px); }
.topic-emoji{
  width:3rem; height:3rem; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; flex-shrink:0;
}
.topic-card .t-name{ font-weight:700; font-size:1.02rem; }
.topic-card .t-sub{ font-size:0.82rem; color:var(--ink-soft); margin-top:0.1rem; }
.topic-card .chev{ margin-left:auto; color:var(--ink-soft); }

/* ---------- topic intro ---------- */
.topic-hero{
  text-align:center;
  padding:1rem 0 1.4rem;
}
.topic-hero .big-emoji{
  font-size:4.2rem;
  display:inline-block;
  margin-bottom:0.6rem;
}
.topic-hero h2{ margin:0 0 0.4rem; font-size:1.4rem; }
.topic-hero p{ color:var(--ink-soft); margin:0 0 1.6rem; max-width:34ch; margin-inline:auto; }

/* ---------- question ---------- */
.progress-pill{
  font-size:0.8rem;
  font-weight:700;
  color:var(--accent-dark);
  background:var(--accent-soft);
  padding:0.3rem 0.7rem;
  border-radius:999px;
}
.q-card{ margin-top:0.4rem; text-align:center; }
.q-prompt{
  font-size:1.35rem;
  font-weight:700;
  line-height:1.5;
  margin:0.6rem 0 1.3rem;
}
.frac{ display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; margin:0 0.15em; font-size:0.85em; line-height:1.05; }
.frac .num, .frac .den{ padding:0 0.15em; }
.frac .num{ border-bottom:2px solid currentColor; }

.answer-input{
  width:100%;
  font-size:1.15rem;
  font-weight:600;
  text-align:center;
  padding:0.85rem 1rem;
  border-radius:14px;
  border:2px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  margin-bottom:0.9rem;
}
.answer-input:focus{ border-color:var(--accent); outline:none; }
.answer-input.wrong-shake{ animation:shake 0.3s; border-color:var(--incorrect); }
@keyframes shake{
  10%,90%{ transform:translateX(-2px); }
  20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-6px); }
  40%,60%{ transform:translateX(6px); }
}
@media (prefers-reduced-motion: reduce){ .wrong-shake{ animation:none; } }

.hint-link{
  background:none; border:none; color:var(--hint); font-weight:700; font-size:0.9rem;
  cursor:pointer; padding:0.5rem 0; text-decoration:underline;
}

.hint-panel{
  background:var(--hint-soft);
  border:1px solid rgba(47,115,214,0.25);
  border-radius:16px;
  padding:1rem 1.1rem;
  margin:0.8rem 0;
  text-align:left;
}
.hint-panel .label{ font-weight:800; color:var(--hint); font-size:0.85rem; margin-bottom:0.35rem; display:block; }
.hint-panel p{ margin:0 0 0.8rem; color:var(--ink); font-size:0.95rem; line-height:1.5; }
.hint-actions{ display:flex; gap:0.6rem; }
.hint-actions .btn{ flex:1; padding:0.6rem; font-size:0.88rem; }

.feedback-panel{
  border-radius:16px;
  padding:1.1rem 1.2rem;
  margin:0.9rem 0;
  text-align:left;
}
.feedback-panel.correct{ background:var(--correct-soft); border:1px solid rgba(31,164,99,0.3); }
.feedback-panel.incorrect{ background:var(--incorrect-soft); border:1px solid rgba(225,76,99,0.3); }
.feedback-panel .label{ font-weight:800; font-size:1rem; margin-bottom:0.4rem; display:block; }
.feedback-panel.correct .label{ color:var(--correct); }
.feedback-panel.incorrect .label{ color:var(--incorrect); }
.feedback-panel p{ margin:0 0 0.9rem; color:var(--ink); font-size:0.95rem; line-height:1.5; }
.feedback-panel .frac-line{ font-size:1.1rem; font-weight:700; margin-bottom:0.6rem; }

/* ---------- results ---------- */
.results-card{ text-align:center; }
.star-row{ font-size:2.6rem; margin:0.4rem 0 0.8rem; }
.score-big{ font-size:2rem; font-weight:800; color:var(--accent-dark); margin:0 0 0.2rem; }
.score-caption{ color:var(--ink-soft); margin-bottom:1.3rem; }
.stat-row{ display:flex; gap:0.7rem; margin-bottom:1.4rem; }
.stat-tile{ flex:1; background:var(--bg); border-radius:14px; padding:0.8rem 0.5rem; }
.stat-tile .num{ font-size:1.3rem; font-weight:800; font-variant-numeric:tabular-nums; }
.stat-tile .lab{ font-size:0.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; }
.stat-tile.good .num{ color:var(--correct); }
.stat-tile.bad .num{ color:var(--incorrect); }
.results-actions{ display:flex; flex-direction:column; gap:0.6rem; }

/* ---------- progress ---------- */
.chart-card{ padding:1.4rem 1.2rem 1rem; }
.chart{
  display:flex;
  align-items:flex-end;
  gap:1rem;
  height:180px;
  margin:1.4rem 0 0.6rem;
}
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bar-pct{ font-weight:800; font-size:0.85rem; margin-bottom:0.35rem; font-variant-numeric:tabular-nums; }
.bar{ width:100%; max-width:44px; border-radius:10px 10px 4px 4px; transition:height 0.5s ease; }
.bar-label{ margin-top:0.5rem; font-size:0.78rem; color:var(--ink-soft); text-align:center; }
.chart-caption{ text-align:center; color:var(--ink-soft); font-size:0.88rem; margin-top:0.4rem; }
.progress-empty{ text-align:center; color:var(--ink-soft); padding:2rem 1rem; }

/* ---------- rewards ---------- */
.badge-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.badge-card{
  background:var(--card); border-radius:18px; box-shadow:var(--shadow);
  padding:1.1rem 0.9rem; text-align:center;
}
.badge-card.locked{ opacity:0.5; }
.badge-icon{ font-size:2.2rem; margin-bottom:0.5rem; }
.badge-name{ font-weight:800; font-size:0.9rem; margin-bottom:0.25rem; }
.badge-desc{ font-size:0.76rem; color:var(--ink-soft); line-height:1.35; }

/* ---------- admin / question import ---------- */
.admin-entry{ text-align:center; margin-top:1.6rem; }
.help-text{ font-size:0.85rem; color:var(--ink-soft); line-height:1.5; margin:0.3rem 0 0.9rem; }
.help-text code{ background:var(--bg); padding:0.1em 0.4em; border-radius:5px; font-size:0.92em; }
.file-input{
  width:100%;
  font-size:0.88rem;
  padding:0.7rem 0.6rem;
  border-radius:12px;
  border:1.5px dashed var(--line);
  background:var(--bg);
  color:var(--ink);
}
.callout-box{
  background:var(--hint-soft);
  border:1px solid rgba(47,115,214,0.25);
  border-radius:14px;
  padding:0.9rem 1rem;
  margin-bottom:1.1rem;
  font-size:0.9rem;
}
.callout-box p{ margin:0.3rem 0 0.7rem; color:var(--ink-soft); }
.import-list{ list-style:none; margin:0.6rem 0; padding:0; }
.import-row{
  padding:0.55rem 0.7rem;
  border-radius:10px;
  font-size:0.88rem;
  margin-bottom:0.4rem;
}
.import-row.ok{ background:var(--correct-soft); color:var(--correct); }
.import-row.warn{ background:var(--amber-soft); color:var(--amber); }
.import-row.missing{ background:var(--incorrect-soft); color:var(--incorrect); }
.import-errors{ font-size:0.82rem; color:var(--ink-soft); margin-top:0.6rem; }
.import-errors summary{ cursor:pointer; font-weight:600; }
.import-errors ul{ margin:0.5rem 0 0; padding-left:1.2rem; }
.import-errors li{ margin-bottom:0.25rem; }

/* ---------- abacus levels list ---------- */
.level-list{ display:flex; flex-direction:column; gap:0.8rem; }
.level-card{
  display:flex; align-items:center; gap:0.9rem;
  background:var(--card); border:none; border-radius:18px;
  padding:1rem 1.1rem; box-shadow:var(--shadow);
  cursor:pointer; text-align:left; width:100%;
}
.level-card:hover{ transform:translateY(-2px); }
.level-card.locked{ opacity:0.55; cursor:not-allowed; }
.level-card.locked:hover{ transform:none; }
.level-icon{
  width:3rem; height:3rem; border-radius:14px; flex-shrink:0;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.level-sub{ font-size:0.78rem; color:var(--accent-dark); font-weight:600; margin-top:0.15rem; }
.level-card.locked .level-sub{ color:var(--ink-soft); }

/* ---------- abacus widget ---------- */
.abacus{
  display:inline-flex; flex-direction:column; align-items:center; gap:0.8rem;
  background:var(--abacus-frame);
  border:6px solid var(--abacus-frame-dark);
  border-radius:14px;
  padding:1rem 1.2rem;
  vertical-align:middle;
  margin:0.3rem 0;
}
.abacus-rods{ display:flex; gap:0.9rem; }
.abacus-rod{ position:relative; display:flex; flex-direction:column; align-items:center; width:2.1rem; }
.abacus-rod::before{
  content:""; position:absolute; top:0; bottom:1.6rem; left:50%;
  width:2px; background:var(--abacus-rod); transform:translateX(-50%); z-index:0;
}
.abacus-heaven-track{
  display:flex; flex-direction:column; justify-content:flex-end;
  height:2.5rem; position:relative; z-index:1;
}
.abacus-earth-track{
  display:flex; flex-direction:column; justify-content:flex-start;
  height:5.6rem; position:relative; z-index:1;
}
.abacus-bar{ width:2.4rem; height:4px; background:#3A2A1A; border-radius:2px; margin:2px 0; z-index:1; }
.bead{
  width:1.9rem; height:1.15rem; border-radius:50%;
  margin:1px 0;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.3);
  opacity:0.55;
}
.heaven-bead{ background:var(--abacus-heaven-bead); }
.earth-bead{ background:var(--abacus-earth-bead); }
.bead.active{ opacity:1; }
.earth-bead.gap-before{ margin-top:0.55rem; }
.abacus.interactive .bead{ cursor:pointer; }
.abacus.interactive .bead:hover{ filter:brightness(1.1); }
.rod-value{ margin-top:0.5rem; font-size:0.72rem; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.abacus-readout{ color:#fff; font-size:0.95rem; }
.abacus-readout strong{ font-size:1.15rem; }
.abacus.interactive{ display:flex; width:100%; }
.abacus.interactive .btn{ margin-top:0.2rem; }

/* ---------- bottom nav ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0;
  background:var(--card);
  border-top:1px solid var(--line);
  display:flex;
  padding:0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
  box-shadow:0 -4px 16px rgba(38,38,74,0.06);
  z-index:10;
}
.nav-btn{
  flex:1;
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:0.2rem;
  color:var(--ink-soft);
  font-size:0.72rem;
  font-weight:600;
  padding:0.3rem 0;
  border-radius:12px;
}
.nav-btn .n-icon{ font-size:1.25rem; }
.nav-btn.active{ color:var(--accent-dark); }
.nav-btn.active .n-icon{ transform:scale(1.08); }

/* ---------- toast ---------- */
.toast{
  position:fixed;
  top:1rem; left:50%;
  transform:translateX(-50%) translateY(-140%);
  background:var(--ink);
  color:#fff;
  padding:0.7rem 1.1rem;
  border-radius:999px;
  font-size:0.88rem;
  font-weight:600;
  box-shadow:var(--shadow);
  z-index:50;
  opacity:0;
  visibility:hidden;
  transition:transform 0.35s ease, opacity 0.35s ease, visibility 0s linear 0.35s;
  white-space:nowrap;
}
.toast.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  visibility:visible;
  transition:transform 0.35s ease, opacity 0.35s ease, visibility 0s linear;
}

@media (min-width:560px){
  .screen{ padding-top:2rem; }
}