/* =============================================================
   LAYER 1 — 原始调色板（传统中文书法色调）
   定义基础变量 --ink, --cinnabar, --jade, --grid-* 等
   ============================================================= */

:root {
  color-scheme: light;
  --app-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif;
  --standard-kai: "KaiTi_GB2312", "楷体_GB2312", "KaiTi", "楷体", "STKaiti", "SimKai", serif;
  --ink: #1f211d;
  --ink-soft: #5f6259;
  --muted: #8a867b;
  --paper: #f7f2e6;
  --paper-deep: #ede3cf;
  --panel: rgba(255, 252, 244, .88);
  --panel-solid: rgba(255, 252, 244, .94);
  --panel-soft: rgba(255, 252, 244, .62);
  --field-bg: rgba(255, 252, 244, .8);
  --button-text-on-dark: #fffaf0;
  --line: rgba(55, 48, 36, .16);
  --line-strong: rgba(55, 48, 36, .28);
  --cinnabar: #c62828;
  --cinnabar-dark: #9f1f1f;
  --jade: #426f5a;
  --gold: #9a6a2f;
  --action: #c62828;
  --action-dark: #9f1f1f;
  --action-text: #fffaf0;
  --bg-wash-a: rgba(198, 40, 40, .06);
  --bg-wash-b: rgba(66, 111, 90, .08);
  --bg-top: #fbf7ed;
  --bg-mid: #f7f2e6;
  --bg-bottom: #f1e7d3;
  --texture-line: rgba(68, 57, 39, .045);
  --texture-line-soft: rgba(68, 57, 39, .035);
  --grid-line: #d7d7d7;
  --grid-border: #d7d7d7;
  --grid-text: #333333;
  --grid-line-width: 1px;
  --grid-line-half: .5px;
  --grid-border-width: 2px;
  --grid-dash: 7px;
  --grid-gap: 5px;
  --grid-font-ratio: .776;
  --shadow: 0 18px 40px rgba(47, 38, 25, .1);
  --soft-shadow: 0 10px 24px rgba(47, 38, 25, .07);
}

/* =============================================================
   LAYER 2 — 第一次 UI 刷新（竹影青绿系统）
   添加 --kid-* 变量及组件样式；同时覆盖 Layer 1 的 --panel 等少数变量。
   注意：此层的 --kid-* 色值会被 Layer 3（下方）重新定义。
   ============================================================= */
:root {
  --kid-ink: #20362d;
  --kid-ink-soft: #53675f;
  --kid-muted: #7a8b84;
  --kid-paper: #f2faf4;
  --kid-cream: #fff8dd;
  --kid-mint: #e2f5e8;
  --kid-sky: #e7f3ff;
  --kid-leaf: #2f9462;
  --kid-blue: #2f7fd1;
  --kid-coral: #e86b5c;
  --kid-yellow: #f2c94c;
  --kid-line: rgba(37, 91, 63, .16);
  --kid-shadow: 0 18px 42px rgba(27, 70, 48, .12);
  --kid-soft-shadow: 0 10px 24px rgba(27, 70, 48, .08);
  --panel: rgba(255, 255, 255, .88);
  --panel-solid: #ffffff;
  --panel-soft: rgba(255, 255, 255, .72);
  --ui-radius: 16px;
  --ui-radius-sm: 12px;
  --ui-gap: 18px;
  --ui-left: 292px;
  --ui-right: 272px;
}

html,
body {
  min-height: 100%;
  color: var(--kid-ink);
  background:
    linear-gradient(135deg, rgba(226, 245, 232, .86), rgba(242, 250, 244, .96) 42%, rgba(231, 243, 255, .72)),
    var(--kid-paper);
  letter-spacing: 0;
}

body::before,
.homeIntro::after {
  display: none;
}

.homeScreen {
  min-height: 100vh;
  padding: clamp(18px, 3vw, 32px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(226, 245, 232, .34)),
    var(--kid-paper);
}

.homeLayout {
  width: min(1280px, calc(100vw - 32px));
  min-height: auto;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 420px);
  grid-template-areas:
    "intro panel"
    "load load";
  gap: var(--ui-gap);
  align-items: start;
}

.homeIntro {
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.homeParentNote,
.homePanel,
.homeLoadRules,
.sidePanel,
.practiceCard,
.similarGamePanel,
.miniGamePanel,
.wrongToolPanel,
.overlayPanel {
  border: 1px solid var(--kid-line);
  border-radius: var(--ui-radius);
  background: var(--panel);
  box-shadow: var(--kid-soft-shadow);
  backdrop-filter: blur(14px);
}

.homeParentNote {
  max-width: none;
  margin-top: 16px;
  padding: clamp(18px, 2.2vw, 26px);
}

.homeHeroTitle {
  margin-top: 18px;
}

.homeHeroTitle .brandMark {
  margin: 0 0 10px;
}

.homeHeroTitle h1 {
  max-width: 100%;
  margin: 0;
  color: var(--kid-ink);
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1.04;
  letter-spacing: 0;
}

.homeHeroTitle .homeSubtitle {
  max-width: 680px;
  margin: 14px 0 0;
  color: var(--kid-ink-soft);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 800;
  line-height: 1.45;
}

.homeParentSection + .homeParentSection {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--kid-line);
}

.homeNoticeSection {
  border: 1px solid rgba(47, 148, 98, .12);
  border-radius: var(--ui-radius-sm);
  background: rgba(226, 245, 232, .46);
  padding: 14px 16px;
}

.homeParentNote strong,
.homeLoadHeader h2,
.homePanelTitle p {
  color: var(--kid-ink);
  font-weight: 950;
}

.homeParentNote p,
.homeLoadHeader p,
.homeGoalCards small,
.wechatAccessText p {
  color: var(--kid-ink-soft);
}

.homePanel {
  padding: clamp(20px, 2.6vw, 30px);
}

.homeLoadRules {
  grid-area: load;
  padding: 18px;
}

.homeGoalCards article {
  border: 1px solid var(--kid-line);
  border-radius: var(--ui-radius-sm);
  background: #ffffff;
  box-shadow: none;
}

.subjectSwitch {
  gap: 8px;
  width: 100%;
  padding: 6px;
  border: 1px solid rgba(47, 148, 98, .14);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, .66);
}

.subjectSwitchLink,
.subjectAppSwitch .subjectSwitchLink {
  min-width: 0;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--kid-ink-soft);
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.subjectSwitchLink {
  appearance: none;
  font-family: inherit;
  cursor: default;
}

.subjectSwitchLink.active,
.subjectAppSwitch .subjectSwitchLink.active {
  border-color: rgba(47, 148, 98, .2);
  background: #ffffff;
  color: var(--kid-leaf);
  box-shadow: 0 8px 18px rgba(27, 70, 48, .08);
}

.appShell {
  width: min(1360px, calc(100vw - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 0 28px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.mainGrid {
  display: grid;
  grid-template-columns: minmax(260px, var(--ui-left)) minmax(0, 1fr) minmax(244px, var(--ui-right));
  gap: var(--ui-gap);
  align-items: start;
}

.sidePanel {
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  overflow: auto;
  padding: 18px;
}

.controlPanel,
.reviewPanel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.sidePanel.controlPanel .appHeader {
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--kid-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brandMark,
.cardMeta,
.reviewSectionLabel {
  color: var(--kid-leaf);
  font-weight: 950;
  letter-spacing: 0;
}

.appShell .brandTitleRow h1 {
  color: var(--kid-ink);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
}

.profileSummary,
.profileSummaryTop,
.learningGoal {
  color: var(--kid-ink-soft);
}

.modeTabs {
  padding: 6px;
  border: 1px solid rgba(47, 148, 98, .14);
  border-radius: var(--ui-radius);
  background: rgba(226, 245, 232, .5);
}

.modeTab {
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: var(--kid-ink-soft);
  box-shadow: none;
}

.modeTab.active {
  background: #ffffff;
  color: var(--kid-leaf);
  box-shadow: 0 8px 18px rgba(27, 70, 48, .08);
}

.formRow span,
.settings-title,
.reviewSectionTitle,
.reviewTop h2,
.gameZone h4 {
  color: var(--kid-ink);
  font-weight: 950;
}

.formRow input,
.formRow select,
.learningCodeLoginRow input,
select,
input {
  min-height: 46px;
  border: 1px solid var(--kid-line);
  border-radius: var(--ui-radius-sm);
  background: #ffffff;
  color: var(--kid-ink);
  box-shadow: none;
}

.wechatAccessCard,
.progressOverview,
.reviewSection,
.gameZone {
  border: 1px solid var(--kid-line);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, .72);
  box-shadow: none;
}

.practicePanel {
  display: grid;
  gap: 14px;
  min-width: 0;
  min-height: calc(100vh - 40px);
  align-content: start;
}

.practicePanel .practiceCard {
  margin-top: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .86));
}

.symbolWrap {
  border-color: rgba(47, 148, 98, .12);
  border-radius: var(--ui-radius);
  background: linear-gradient(180deg, #fffefa, #f6fbf7);
}

.exampleText,
.feedbackText,
.timerText {
  border-radius: var(--ui-radius-sm);
}

.actionBar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.primaryBtn,
.softBtn,
.plainBtn,
.toolBtn,
.dangerBtn,
.modeTab {
  min-height: 46px;
  border-radius: var(--ui-radius-sm);
  font-weight: 950;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.primaryBtn {
  border: 0;
  background: linear-gradient(180deg, #37a66f, var(--kid-leaf));
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(47, 148, 98, .2);
}

.softBtn,
.toolBtn {
  border: 1px solid rgba(47, 127, 209, .16);
  background: var(--kid-sky);
  color: var(--kid-blue);
  box-shadow: none;
}

.plainBtn {
  border: 1px solid var(--kid-line);
  background: #ffffff;
  color: var(--kid-ink);
  box-shadow: none;
}

.dangerBtn {
  border: 0;
  background: linear-gradient(180deg, #f07869, var(--kid-coral));
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(232, 107, 92, .18);
}

.reviewNowBtn {
  background: linear-gradient(180deg, #f6d56d, var(--kid-yellow));
  color: var(--kid-ink);
}

.reviewActions,
.gameZone {
  display: grid;
  gap: 10px;
}

.reviewScheduleText {
  color: var(--kid-ink-soft);
  line-height: 1.45;
}

.overlayPanel {
  background: #ffffff;
}

@media (max-width: 1140px) {
  .appShell {
    width: calc(100vw - 20px);
    padding: 14px 0 18px;
  }

  .mainGrid {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 12px;
  }

  .reviewPanel {
    grid-column: 1 / -1;
    height: auto;
    position: static;
  }
}

@media (max-width: 820px) {
  .homeLayout,
  .mainGrid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "panel"
      "load";
  }

  .sidePanel {
    position: static;
    height: auto;
  }

  .actionBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Figma UI pass: make the home entry feel like one composed product screen. */
.homeHeroTitle {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.homeProductKicker {
  margin: 0;
  color: var(--kid-leaf);
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.homeIntro .homeHeroTitle h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(56px, 6.6vw, 88px);
  line-height: .98;
}

.homeIntro .homeSubtitle {
  max-width: 640px;
  margin: 4px 0 0;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.45;
}

.homePanel {
  position: relative;
  overflow: hidden;
}

.homePanel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--kid-leaf), var(--kid-blue), var(--kid-yellow));
}

/* Homepage entry final override: account status stays secondary to Start Learning. */
.homePanelTitle h2 {
  margin: 0;
}

.homePanel .profileForm > .formRow {
  order: 1;
}

.learningCodeLoginRow {
  order: 2;
}

.learningCodeLoginRow[hidden] {
  display: none;
}

.wechatAccessCard {
  order: 5;
  margin: 0;
  padding: 14px;
}

.wechatAccessCard[data-account="logged"] {
  order: 3;
  background: rgba(255, 255, 255, .78);
}

.wechatAccessCard[data-account="guest"] {
  order: 5;
  background: rgba(231, 243, 255, .54);
}

#enterAppBtn {
  order: 4;
  min-height: 58px;
  font-size: 18px;
}

#enterAppBtn[aria-busy="true"] {
  cursor: wait;
  opacity: .88;
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(47, 148, 98, .16);
}

.wechatAccountName {
  margin: 0;
  color: var(--kid-ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.wechatAccountName[hidden] {
  display: none;
}

.wechatAccessActions {
  gap: 10px;
}

.wechatAccessActions[data-mode="account-row"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wechatAccessActions[data-mode="login-only"],
.wechatAccessActions[data-mode="logout-only"] {
  grid-template-columns: minmax(0, 1fr);
}

#wechatPayBtn {
  grid-column: auto;
}

.wechatAccessActions button[hidden] {
  display: none;
}

.wechatAccessActions .plainBtn,
.logoutAccountBtn {
  width: 100%;
  min-height: 42px;
  background: rgba(255, 255, 255, .82);
  color: var(--kid-ink);
}

/* Homepage entry final override: account status stays secondary to Start Learning. */
.homePanelTitle h2 {
  margin: 0;
}

.homePanel .profileForm > .formRow {
  order: 1;
}

.learningCodeLoginRow {
  order: 2;
}

.learningCodeLoginRow[hidden] {
  display: none;
}

.wechatAccessCard {
  order: 5;
  margin: 0;
  padding: 14px;
}

.wechatAccessCard[data-account="logged"] {
  order: 3;
  background: rgba(255, 255, 255, .78);
}

.wechatAccessCard[data-account="guest"] {
  order: 5;
  background: rgba(231, 243, 255, .54);
}

#enterAppBtn {
  order: 4;
  min-height: 58px;
  font-size: 18px;
}

.wechatAccountName {
  margin: 0;
  color: var(--kid-ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.wechatAccountName[hidden] {
  display: none;
}

.wechatAccessActions {
  gap: 10px;
}

.wechatAccessActions[data-mode="account-row"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wechatAccessActions[data-mode="login-only"],
.wechatAccessActions[data-mode="logout-only"] {
  grid-template-columns: minmax(0, 1fr);
}

#wechatPayBtn {
  grid-column: auto;
}

.wechatAccessActions button[hidden] {
  display: none;
}

.wechatAccessActions .plainBtn,
.logoutAccountBtn {
  width: 100%;
  min-height: 42px;
  background: rgba(255, 255, 255, .82);
  color: var(--kid-ink);
}

/* Homepage entry final: focus on whether the child can start learning. */
.homePanelTitle h2 {
  margin: 0;
}

.homePanel .profileForm > .formRow {
  order: 1;
}

.learningCodeLoginRow {
  order: 2;
}

.learningCodeLoginRow[hidden] {
  display: none;
}

.wechatAccessCard {
  order: 5;
  margin: 0;
  padding: 14px;
}

.wechatAccessCard[data-account="logged"] {
  order: 3;
  background: rgba(255, 255, 255, .78);
}

.wechatAccessCard[data-account="guest"] {
  order: 5;
  background: rgba(231, 243, 255, .54);
}

#enterAppBtn {
  order: 4;
  min-height: 58px;
  font-size: 18px;
}

.wechatAccountName {
  margin: 0;
  color: var(--kid-ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.wechatAccountName[hidden] {
  display: none;
}

.wechatAccessActions {
  gap: 10px;
}

.wechatAccessActions[data-mode="account-row"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wechatAccessActions[data-mode="login-only"],
.wechatAccessActions[data-mode="logout-only"] {
  grid-template-columns: minmax(0, 1fr);
}

#wechatPayBtn {
  grid-column: auto;
}

.wechatAccessActions button[hidden] {
  display: none;
}

.wechatAccessActions .plainBtn,
.logoutAccountBtn {
  width: 100%;
  min-height: 42px;
  background: rgba(255, 255, 255, .82);
  color: var(--kid-ink);
}

/* Final product naming: the Chinese home entry is "小学语文字词表". */
.homeHeroTitle {
  display: block;
  margin: 18px 0 0;
}

.homeHeroTitle .brandMark {
  margin: 0 0 10px;
  color: var(--kid-leaf);
}

.homeIntro .homeHeroTitle h1 {
  max-width: 100%;
  margin: 0;
  color: var(--kid-ink);
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1.04;
  letter-spacing: 0;
}

.homeHeroTitle .homeSubtitle {
  max-width: 680px;
  margin: 14px 0 0;
  color: var(--kid-ink-soft);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 800;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .homeIntro .homeHeroTitle h1 {
    font-size: clamp(34px, 10vw, 54px);
  }
}

/* =============================================================
   LAYER 3 — 最终儿童友好设计（6–12岁）【当前生效主设计】
   重新定义 --kid-* 色值，并将其桥接到 Layer 1 的传统变量名
   （--ink, --paper, --cinnabar, --jade, --action 等）
   此层及后续组件样式为实际渲染所使用的最终样式。
   ============================================================= */
:root {
  --kid-ink: #263238;
  --kid-ink-soft: #51606a;
  --kid-muted: #7b8a94;
  --kid-paper: #fffdf5;
  --kid-cream: #fff6d8;
  --kid-mint: #ddf6e6;
  --kid-sky: #ddf2ff;
  --kid-leaf: #2fa66a;
  --kid-blue: #2e8af6;
  --kid-coral: #ff6b5f;
  --kid-yellow: #ffc94a;
  --kid-lavender: #e8d9ff;
  --kid-line: #dce7e1;
  --kid-shadow: 0 18px 44px rgba(38, 50, 56, .11);
  --kid-soft-shadow: 0 10px 28px rgba(38, 50, 56, .08);
  --ink: var(--kid-ink);
  --ink-soft: var(--kid-ink-soft);
  --muted: var(--kid-muted);
  --paper: var(--kid-paper);
  --paper-deep: var(--kid-cream);
  --panel: rgba(255, 255, 255, .86);
  --panel-solid: #ffffff;
  --panel-soft: rgba(255, 255, 255, .72);
  --field-bg: #ffffff;
  --line: rgba(47, 166, 106, .16);
  --line-strong: rgba(38, 50, 56, .12);
  --cinnabar: var(--kid-coral);
  --cinnabar-dark: #df524a;
  --jade: var(--kid-leaf);
  --gold: #b88512;
  --action: var(--kid-leaf);
  --action-dark: #238858;
  --action-text: #ffffff;
  --bg-wash-a: rgba(46, 138, 246, .12);
  --bg-wash-b: rgba(47, 166, 106, .12);
  --bg-top: #eff9ff;
  --bg-mid: #fffdf5;
  --bg-bottom: #ddf6e6;
  --texture-line: rgba(47, 166, 106, .025);
  --texture-line-soft: rgba(46, 138, 246, .022);
  --shadow: var(--kid-shadow);
  --soft-shadow: var(--kid-soft-shadow);
}

body {
  font-family: var(--app-font);
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 201, 74, .32), transparent 21%),
    radial-gradient(circle at 88% 12%, rgba(221, 242, 255, .88), transparent 28%),
    linear-gradient(180deg, var(--bg-top), var(--bg-mid) 48%, var(--bg-bottom));
}

body::before {
  opacity: .35;
}

.brandMark {
  color: var(--kid-leaf);
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.homeScreen {
  padding: 28px;
}

.homeLayout {
  position: relative;
  width: min(1120px, 100%);
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 420px);
  grid-template-areas:
    "intro panel"
    "load panel";
  gap: 20px 26px;
}

.homeIntro {
  position: relative;
  min-height: 520px;
  justify-items: start;
  overflow: hidden;
  padding: 52px min(7vw, 72px);
  border: 1px solid rgba(46, 138, 246, .15);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(221, 242, 255, .78), rgba(255, 253, 245, .92)),
    var(--kid-paper);
  box-shadow: var(--kid-shadow);
  text-align: left;
}

.homeIntro::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -112px;
  height: 210px;
  border-radius: 50% 50% 0 0;
  background: #cff0d9;
}

.homeIntro h1 {
  position: relative;
  z-index: 1;
  max-width: 620px;
  color: var(--kid-ink);
  font-family: inherit;
  font-size: clamp(58px, 8vw, 92px);
  font-weight: 950;
  letter-spacing: 0;
}

.homeTagline {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-top: 18px;
  color: var(--kid-ink-soft);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 800;
  line-height: 1.45;
}

.homeModeStrip {
  position: relative;
  z-index: 1;
  justify-content: flex-start;
  margin-top: 24px;
}

.homeModeStrip span {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 7px 18px rgba(38, 50, 56, .06);
  color: var(--kid-ink);
  font-family: inherit;
  font-size: 14px;
}

.homeMascot {
  position: absolute;
  z-index: 0;
  right: 72px;
  bottom: 162px;
  width: 132px;
  height: 164px;
  transform: scale(.58);
  transform-origin: right bottom;
}

.mascotHead,
.mascotBody {
  position: absolute;
  display: grid;
  place-items: center;
}

.mascotHead {
  top: 0;
  left: 29px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--kid-yellow);
  box-shadow: inset 18px -18px 0 rgba(255, 255, 255, .18);
}

.mascotHead::before,
.mascotHead::after {
  content: "";
  position: absolute;
  top: 28px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kid-ink);
}

.mascotHead::before {
  left: 22px;
}

.mascotHead::after {
  right: 22px;
}

.mascotBody {
  left: 16px;
  bottom: 0;
  width: 100px;
  height: 96px;
  border-radius: 34px 34px 26px 26px;
  background: var(--kid-coral);
  color: #fff;
  font-size: 42px;
  font-weight: 950;
}

.readRoute {
  background: var(--kid-mint);
}

.readRoute span {
  color: var(--kid-leaf);
}

.writeRoute {
  background: var(--kid-sky);
}

.writeRoute span {
  color: var(--kid-blue);
}

.reviewRoute {
  background: #ffe4df;
}

.reviewRoute span {
  color: var(--kid-coral);
}

.homePanel,
.homeLoadRules,
.sidePanel,
.practiceCard,
.similarGamePanel,
.miniGamePanel,
.wrongToolPanel {
  border: 1px solid var(--kid-line);
  border-radius: 28px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--kid-soft-shadow);
}

.homePanel {
  padding: 28px;
  border-radius: 32px;
}

.profileForm {
  gap: 12px;
}

.formRow {
  gap: 8px;
}

.formRow span {
  color: var(--kid-ink-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
}

.formRow input,
.formRow select {
  min-height: 54px;
  border: 1px solid var(--kid-line);
  border-radius: 18px;
  background: #fff;
  color: var(--kid-ink);
  font-family: inherit;
  font-size: 18px;
  font-weight: 850;
}

.homeLoadRules {
  border-radius: 28px;
  background: rgba(255, 255, 255, .68);
}

.homeLoadHeader h2 {
  font-family: inherit;
}

.homeLoadTable {
  overflow: hidden;
  border-radius: 18px;
}

.homeLoadTable th,
.homeLoadTable td {
  font-family: inherit;
  font-weight: 850;
}

.homeLoadTable th {
  background: var(--kid-mint);
  color: var(--kid-leaf);
}

.appShell {
  width: min(1360px, calc(100vw - 32px));
}

.appHeader {
  align-items: center;
  margin-bottom: 18px;
  padding: 18px 22px;
  border: 1px solid var(--kid-line);
  border-radius: 30px;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--kid-soft-shadow);
}

.brandTitleRow h1 {
  font-family: inherit;
  font-weight: 950;
}

.learningGoal {
  border: 0;
  border-radius: 999px;
  background: var(--kid-mint);
  color: var(--kid-leaf);
  font-size: 18px;
}

.mainGrid {
  grid-template-columns: 292px minmax(0, 1fr) 272px;
  gap: 18px;
}

.sidePanel {
  padding: 18px;
}

.softBtn,
.plainBtn,
.toolBtn,
.primaryBtn,
.dangerBtn,
.modeTab,
.similarLevelTabs button {
  min-height: 54px;
  border-radius: 18px;
  font-family: inherit;
  font-weight: 900;
}

.softBtn,
.toolBtn,
.plainBtn {
  border: 1px solid var(--kid-line);
  background: #fff;
  color: var(--kid-ink);
}

.modeTabs {
  gap: 8px;
  padding: 6px;
  border-radius: 22px;
  background: rgba(221, 242, 255, .72);
}

.modeTab {
  border: 0;
  color: var(--kid-blue);
}

.modeTab.active {
  background: #fff;
  color: var(--kid-leaf);
  box-shadow: 0 8px 18px rgba(38, 50, 56, .08);
}

.primaryBtn {
  border: 0;
  background: var(--kid-leaf);
  color: #fff;
  box-shadow: 0 10px 22px rgba(47, 166, 106, .22);
}

.dangerBtn {
  border: 0;
  background: var(--kid-coral);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 107, 95, .2);
}

.softBtn {
  background: var(--kid-sky);
  color: var(--kid-blue);
}

.reviewNowBtn {
  background: var(--kid-yellow);
  color: var(--kid-ink);
}

.plainBtn {
  color: var(--kid-ink-soft);
}

.practicePanel {
  min-height: 680px;
}

.statusStrip {
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid var(--kid-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .72);
}

#modeBadge {
  border: 0;
  border-radius: 999px;
  background: var(--kid-mint);
  color: var(--kid-leaf);
  font-size: 14px;
}

.practiceCard {
  min-height: 560px;
  overflow: hidden;
  padding: 34px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 201, 74, .18), transparent 28%),
    #fff;
}

.practiceCard::before {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--kid-yellow);
  opacity: .42;
}

.cardMeta {
  color: var(--kid-leaf);
  font-family: inherit;
  font-weight: 900;
}

.symbolWrap {
  display: grid;
  place-items: center;
  width: min(430px, 86%);
  aspect-ratio: 1;
  margin: 10px auto 0;
  border-radius: 34px;
  background: linear-gradient(180deg, #fff, #fffdf5);
}

.mainSymbol {
  color: var(--kid-ink);
}

.pinyinText {
  color: var(--kid-leaf);
  font-family: inherit;
}

.practicePanel .pinyinText {
  font-size: 18px;
  font-weight: 900;
}

.exampleText {
  color: var(--kid-blue);
}

.timerText,
.feedbackText {
  color: var(--kid-ink-soft);
  font-family: inherit;
}

.feedbackText {
  width: min(620px, 100%);
  min-height: 60px;
  margin-top: 8px;
  padding: 12px 18px;
  border-radius: 22px;
  background: rgba(221, 242, 255, .52);
}

.feedbackText.good {
  background: var(--kid-mint);
  color: var(--kid-leaf);
}

.feedbackText.bad {
  background: #ffe4df;
  color: var(--kid-coral);
}

.actionBar {
  gap: 12px;
}

.reviewTop h2,
.reviewSectionTitle,
.gameZone h4 {
  font-family: inherit;
  font-weight: 950;
}

.reviewScheduleText {
  color: var(--kid-ink-soft);
  font-family: inherit;
}

.reviewScheduleText.reviewDueText {
  color: var(--kid-coral);
}

@media (max-width: 980px) {
  .homeLayout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "panel"
      "load";
  }

  .homeIntro {
    min-height: 650px;
  }

  .homeMascot {
    right: 40px;
    bottom: 236px;
  }

}

@media (max-width: 760px) {
  .homeScreen {
    padding: 16px;
  }

  .homeIntro {
    min-height: auto;
    padding: 34px 22px 280px;
    border-radius: 28px;
  }

  .homeIntro h1 {
    font-size: 54px;
  }

  .homeMascot {
    right: 18px;
    bottom: 160px;
    transform: scale(.82);
    transform-origin: right bottom;
  }

  .mainGrid {
    gap: 14px;
  }

  .appHeader {
    padding: 16px;
    border-radius: 24px;
  }

  .learningGoal {
    max-width: 100%;
    border-radius: 20px;
  }

  .actionBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =============================================================
   田字格变量 — 当前界面固定为最终竹影青绿，仅保留字格样式差异。
   ============================================================= */

:root[data-grid-style="classic"] {
  --grid-line: rgba(198, 40, 40, .58);
  --grid-border: #c62828;
  --grid-text: #3a1616;
  --grid-line-width: 1px;
  --grid-line-half: .5px;
  --grid-border-width: 2px;
}

:root[data-grid-style="modern"] {
  --grid-line: #b3d4f0;
  --grid-border: #b3d4f0;
  --grid-text: #1e3a6f;
  --grid-line-width: 1px;
  --grid-line-half: .5px;
  --grid-border-width: 2px;
}

:root[data-grid-style="grass"] {
  --grid-line: #a3d97b;
  --grid-border: #a3d97b;
  --grid-text: #2b2b2b;
  --grid-line-width: 1px;
  --grid-line-half: .5px;
  --grid-border-width: 2px;
}

:root[data-grid-style="lotus"] {
  --grid-line: rgba(167, 68, 88, .44);
  --grid-border: #a74458;
  --grid-text: #33242b;
  --grid-line-width: 1px;
  --grid-line-half: .5px;
  --grid-border-width: 2px;
}

/* =============================================================
   HTML 基础重置 — box model、[hidden]、html/body 基线
   ============================================================= */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--standard-kai);
  background:
    radial-gradient(circle at 18% 12%, var(--bg-wash-a), transparent 26%),
    radial-gradient(circle at 86% 22%, var(--bg-wash-b), transparent 28%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 52%, var(--bg-bottom) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .45;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, var(--texture-line) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, var(--texture-line-soft) 31px 32px);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 82%, transparent);
}

button,
select,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

h1,
h2,
p {
  margin: 0;
}

/* ---- Layout tweak: header overlays left column, does not push card column down ---- */
:root {
  --cq-leftcol-w: 292px;
  --cq-header-h: 132px;
  --cq-gap: 18px;
}

/* iPad fit: tune overall width + grid so it "just fits" 1024px without horizontal scroll. */
@media (max-width: 1100px) {
  .appShell {
    width: calc(100vw - 20px);
    padding: 14px 0 18px;
  }

  .mainGrid {
    grid-template-columns: 248px minmax(0, 1fr) 248px;
    gap: 12px;
  }

  .sidePanel {
    padding: 14px;
  }

  .softBtn,
  .plainBtn,
  .toolBtn,
  .primaryBtn,
  .dangerBtn,
  .modeTab,
  .similarLevelTabs button {
    min-height: 48px;
    border-radius: 16px;
  }

  .learningGoal {
    font-size: 16px;
  }
}

@media (max-width: 980px) {
  .mainGrid {
    grid-template-columns: 232px minmax(0, 1fr) 232px;
  }
}

/* Overlay dialog */
.overlay[hidden] {
  display: none;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
}

.overlayBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .36);
}

.overlayPanel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, calc(100vw - 24px));
  max-height: min(78vh, 760px);
  overflow: hidden;
  border: 1px solid var(--kid-line, rgba(0,0,0,.14));
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
  display: grid;
  grid-template-rows: auto 1fr;
}

.overlayHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, .10);
}

.overlayHeader h2 {
  font-size: 18px;
  font-weight: 900;
}

.overlayBody {
  padding: 14px;
  overflow: auto;
}

.overlayHint {
  color: rgba(15, 23, 42, .72);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

.helpTabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .06);
  border: 1px solid rgba(15, 23, 42, .10);
  margin-bottom: 12px;
}

.helpTabs button {
  border: 0;
  background: transparent;
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 12px;
  color: rgba(15, 23, 42, .78);
}

.helpTabs button.active {
  background: #fff;
  color: rgba(15, 23, 42, .92);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}

.helpTitle {
  margin: 8px 0 10px;
  color: var(--ink);
  font-family: var(--standard-kai);
  font-size: 18px;
  font-weight: 900;
}

.helpText {
  color: rgba(15, 23, 42, .86);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
}

.helpText p {
  margin: 0 0 10px;
}

.appShell {
  width: min(1320px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 20px 0 28px;
}

.appHeader {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 0;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--line-strong);
}

.brandBlock {
  min-width: 220px;
}

.brandTitleRow {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.learningGoal {
  max-width: min(780px, 62vw);
  padding: 12px 15px;
  border: 1px solid rgba(165, 58, 42, .34);
  background: rgba(165, 58, 42, .08);
  color: var(--cinnabar);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.35;
}

/* Override to pin header to the left and keep the card area stable. */
.appShell > .appHeader {
  position: fixed;
  top: 20px;
  left: max(18px, calc((100vw - 1320px) / 2));
  width: var(--cq-leftcol-w);
  max-width: calc(100vw - 36px);
  height: var(--cq-header-h);
  padding: 16px 16px 14px;
  border: 1px solid var(--kid-line, rgba(0, 0, 0, .14));
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 28px rgba(38, 50, 56, .10);
  z-index: 50;
  overflow: hidden;
}

.appShell > .appHeader .brandTitleRow {
  display: block;
}

.appShell > .appHeader .learningGoal {
  margin-top: 10px;
  max-width: 100%;
  font-size: 16px;
  padding: 10px 12px;
}

.appShell > .appHeader .profileSummary {
  margin-top: 10px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .9;
}

/* Let the grid start at the top. (Header is now inside the left panel.) */
.mainGrid {
  margin-top: 0;
}

.sidePanel.controlPanel {
  padding-top: 0 !important;
}

.brandMark {
  margin-bottom: 6px;
  color: var(--cinnabar);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.appShell .brandTitleRow h1 {
  font-size: 22px;
}

.profileSummaryTop {
  margin-top: 6px;
  margin-bottom: 2px;
  opacity: .92;
}

/* In-app header title should be visible. */

h1 {
  color: var(--ink);
  font-family: var(--standard-kai);
  font-size: 44px;
  font-weight: 900;
  line-height: 1.05;
}

.homeScreen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
}

.homeLayout {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  grid-template-areas:
    "intro intro"
    "load panel";
  gap: 20px 24px;
  align-items: start;
}

.homeIntro {
  grid-area: intro;
  min-height: auto;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 12px 8px 4px;
  text-align: center;
}

.homeIntro h1 {
  font-size: clamp(58px, 7vw, 96px);
  line-height: .95;
}

.homeModeStrip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.homeModeStrip span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.homePanel {
  grid-area: panel;
  align-self: start;
  width: min(440px, 100%);
  padding: 26px 24px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(var(--panel-solid), var(--panel-solid)),
    repeating-linear-gradient(0deg, transparent 0 39px, var(--texture-line) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--texture-line-soft) 39px 40px);
  box-shadow: var(--shadow);
}

.profileForm {
  display: grid;
  gap: 2px;
}

.homeLoadRules {
  grid-area: load;
  justify-self: stretch;
  width: 100%;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  box-shadow: var(--soft-shadow);
}

.homeLoadHeader {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.homeLoadHeader h2 {
  color: var(--ink);
  font-family: var(--standard-kai);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
}

.homeLoadHeader p {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
}

.homeLoadTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: rgba(255, 252, 246, .54);
}

.homeLoadTable th,
.homeLoadTable td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  vertical-align: middle;
}

.homeLoadTable th:first-child,
.homeLoadTable td:first-child {
  width: 42%;
  text-align: left;
}

.homeLoadTable th:nth-child(2),
.homeLoadTable td:nth-child(2) {
  width: 29%;
}

.homeLoadTable th:nth-child(3),
.homeLoadTable td:nth-child(3) {
  width: 29%;
}

.homeLoadTable th {
  background: rgba(165, 58, 42, .08);
  color: var(--cinnabar);
}

.profileForm .primaryBtn {
  margin-top: 8px;
}

.profileSummary {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
}

.profileBox {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(55, 48, 36, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .66);
}

.mainGrid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 250px;
  gap: 16px;
  align-items: start;
}

.sidePanel {
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.controlPanel,
.reviewPanel {
  position: sticky;
  top: 16px;
}

.modeTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 16px;
  border: 1px solid var(--line-strong);
  background: var(--paper-deep);
}

.modeTab {
  min-height: 42px;
  padding: 0 6px;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-weight: 800;
  text-align: center;
  transition: background .18s ease, color .18s ease;
}

.modeTab:last-child {
  border-right: 0;
}

.modeTab.active {
  background: var(--ink);
  color: var(--button-text-on-dark);
}

.modeTab:not(:disabled):hover {
  background: var(--panel-soft);
}

.formRow {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-weight: 800;
}

select,
input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--field-bg);
  color: var(--ink);
}

input::placeholder {
  color: var(--muted);
}

.progressOverview {
  margin-bottom: 16px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.progressTableWrap {
  overflow-x: auto;
}

.progressTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.progressTable td {
  padding: 9px 8px;
  color: var(--ink-soft);
  font-size: 14px;
  text-align: left;
}

.progressTable td strong {
  color: var(--ink);
}

.progressTable .currentRow td {
  background: rgba(165, 58, 42, .07);
}

.progressGraphic {
  position: relative;
  height: 8px;
  margin-bottom: 7px;
  overflow: hidden;
  background: rgba(31, 33, 29, .1);
}

.progressBarFill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--cinnabar), var(--gold), var(--jade));
  transform-origin: left center;
}

.progressCount {
  color: var(--ink);
  font-weight: 800;
}

.progressBlock {
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 252, 244, .56);
}

.progressTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.progressTrack {
  height: 9px;
  overflow: hidden;
  background: rgba(31, 33, 29, .1);
}

#progressFill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--cinnabar), var(--jade));
  transition: width .25s ease;
}

.miniActions,
.reviewActions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

.returnLoginBtn {
  border-color: rgba(66, 165, 245, .36);
  background: rgba(221, 242, 255, .64);
  color: var(--kid-blue);
}

.exportSetting {
  margin: 12px 0 0;
}

.exportSetting span {
  font-size: 13px;
}

.softBtn,
.plainBtn,
.toolBtn,
.primaryBtn,
.dangerBtn {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-weight: 900;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.softBtn:not(:disabled):hover,
.plainBtn:not(:disabled):hover,
.toolBtn:not(:disabled):hover,
.primaryBtn:not(:disabled):hover,
.dangerBtn:not(:disabled):hover {
  transform: translateY(-1px);
}

.softBtn,
.plainBtn,
.toolBtn {
  background: var(--field-bg);
  color: var(--ink);
}

.primaryBtn {
  border-color: var(--action-dark);
  background: var(--action);
  color: var(--action-text);
}

.dangerBtn {
  border-color: rgba(31, 33, 29, .72);
  background: var(--ink);
  color: var(--button-text-on-dark);
}

.practicePanel {
  min-height: 650px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.statusStrip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 0 11px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.practiceCard .statusStrip {
  margin-top: 12px;
  padding: 11px 0 0;
  border-bottom: 0;
  border-top: 1px solid var(--line);
}

#modeBadge {
  flex: none;
  padding: 5px 9px;
  border: 1px solid rgba(165, 58, 42, .42);
  color: var(--cinnabar);
  font-size: 13px;
  font-weight: 900;
}

#statusText {
  min-width: 0;
  color: var(--ink);
  font-weight: 900;
}

.practiceCard {
  container-type: inline-size;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 530px;
  margin-top: 28px;
  padding: 30px 28px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(var(--panel-solid), var(--panel-solid)),
    repeating-linear-gradient(0deg, transparent 0 39px, var(--texture-line) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--texture-line-soft) 39px 40px);
  box-shadow: var(--shadow);
}

.practiceCard::before,
.practiceCard::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  pointer-events: none;
}

.practiceCard::before {
  left: 14px;
  top: 14px;
  display: none;
}

.practiceCard::after {
  right: 14px;
  bottom: 14px;
  display: none;
}

.similarGamePanel {
  position: relative;
  overflow: hidden;
  min-height: 530px;
  margin-top: 14px;
  padding: 28px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 36%, rgba(255, 255, 255, .2)),
    linear-gradient(var(--panel-solid), var(--panel-solid)),
    repeating-linear-gradient(0deg, transparent 0 39px, var(--texture-line) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--texture-line-soft) 39px 40px);
  box-shadow:
    var(--shadow),
    inset 0 0 0 4px rgba(255, 255, 255, .32);
}

.similarGamePanel::before,
.similarGamePanel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.similarGamePanel::before {
  inset: 12px;
  border: 1px solid rgba(165, 58, 42, .16);
}

.similarGamePanel::after {
  top: 0;
  right: 0;
  left: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--cinnabar), rgba(154, 106, 47, .76), var(--jade));
  opacity: .78;
}

.similarGamePanel[data-complete="true"] {
  border-color: rgba(66, 111, 90, .5);
  box-shadow:
    0 20px 44px rgba(47, 38, 25, .12),
    inset 0 0 0 4px rgba(66, 111, 90, .1);
}

.similarCelebration {
  position: absolute;
  inset: 8px 12px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.similarCelebration span {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: 8px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, .36);
  background: var(--cinnabar);
  opacity: 0;
}

.similarCelebration span:nth-child(3n + 2) {
  background: var(--jade);
}

.similarCelebration span:nth-child(3n) {
  background: rgba(154, 106, 47, .86);
}

.similarGamePanel[data-complete="true"] .similarCelebration span {
  animation: similarConfetti 1.55s ease-out var(--delay) forwards;
}

.similarGameTop {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(55, 48, 36, .12);
}

.similarGameTop h2 {
  color: var(--ink);
  font-family: var(--standard-kai);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
}

.similarGameStats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.similarGameStats span {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(165, 58, 42, .28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .36), transparent),
    rgba(165, 58, 42, .07);
  color: var(--cinnabar);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
  box-shadow: 0 4px 12px rgba(47, 38, 25, .06);
}

.similarLevelTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(58px, 1fr));
  gap: 0;
  min-width: 210px;
  border: 1px solid rgba(66, 111, 90, .28);
  background: rgba(255, 252, 246, .64);
  box-shadow: 0 8px 18px rgba(47, 38, 25, .06);
}

.similarLevelTabs button {
  min-height: 34px;
  border: 0;
  border-right: 1px solid rgba(66, 111, 90, .22);
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.similarLevelTabs button:last-child {
  border-right: 0;
}

.similarLevelTabs button.active {
  background: var(--jade);
  color: var(--action-text);
}

.similarGameBoard {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  gap: 12px;
  max-width: 596px;
  margin: 0 auto;
  padding: 14px;
  border: 1px solid rgba(154, 106, 47, .26);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 252, 246, .66)),
    repeating-linear-gradient(0deg, transparent 0 47px, var(--texture-line) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, var(--texture-line-soft) 47px 48px);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .28),
    0 12px 26px rgba(47, 38, 25, .08);
}

.similarGamePanel[data-board="large"] .similarGameBoard {
  grid-template-columns: repeat(6, minmax(42px, 1fr));
  gap: 8px;
  max-width: 680px;
  padding: 12px;
}

.similarGamePanel[data-complete="true"] .similarGameBoard {
  animation: similarBoardComplete .75s ease both;
}

.similarTile {
  position: relative;
  aspect-ratio: 1;
  min-height: 72px;
  border: 2px solid rgba(154, 106, 47, .36);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(165, 58, 42, .16) calc(50% - .5px), rgba(165, 58, 42, .16) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(165, 58, 42, .16) calc(50% - .5px), rgba(165, 58, 42, .16) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(135deg, rgba(255, 255, 255, .54), rgba(255, 252, 246, .96));
  color: var(--ink);
  font-family: var(--standard-kai);
  font-size: clamp(34px, 7vw, 56px);
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  box-shadow:
    0 10px 18px rgba(47, 38, 25, .09),
    inset 0 0 0 1px rgba(255, 255, 255, .56);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.similarGamePanel[data-board="large"] .similarTile {
  min-height: 58px;
  border-width: 1px;
  font-size: clamp(26px, 4.8vw, 44px);
}

.similarTile:not(:disabled):hover {
  transform: translateY(-3px);
  border-color: var(--cinnabar);
  box-shadow:
    0 14px 24px rgba(47, 38, 25, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .62);
}

.similarTile.selected {
  border-color: var(--cinnabar);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(198, 40, 40, .26) calc(50% - .5px), rgba(198, 40, 40, .26) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(198, 40, 40, .26) calc(50% - .5px), rgba(198, 40, 40, .26) calc(50% + .5px), transparent calc(50% + .5px)),
    rgba(165, 58, 42, .13);
  color: var(--cinnabar);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(165, 58, 42, .16);
  animation: similarSelectedPulse .9s ease-in-out infinite alternate;
}

.similarTile.mismatch {
  border-color: rgba(165, 58, 42, .78);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(198, 40, 40, .26) calc(50% - .5px), rgba(198, 40, 40, .26) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(198, 40, 40, .26) calc(50% - .5px), rgba(198, 40, 40, .26) calc(50% + .5px), transparent calc(50% + .5px)),
    rgba(165, 58, 42, .18);
  animation: similarMismatch .32s ease;
}

.similarTile.matched {
  border-color: rgba(75, 125, 91, .45);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(75, 125, 91, .2) calc(50% - .5px), rgba(75, 125, 91, .2) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(75, 125, 91, .2) calc(50% - .5px), rgba(75, 125, 91, .2) calc(50% + .5px), transparent calc(50% + .5px)),
    rgba(75, 125, 91, .12);
  color: var(--jade);
  cursor: default;
  opacity: .5;
  box-shadow: inset 0 0 0 1px rgba(75, 125, 91, .16);
}

.similarTile.justMatched {
  animation: similarMatchPop .66s ease both;
}

.similarTile.justMatched::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(66, 111, 90, .42);
  opacity: 0;
  animation: similarMatchRing .66s ease-out both;
}

.similarWordChallenge {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 14px auto 0;
  padding: 14px;
  border: 1px solid rgba(165, 58, 42, .24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .38), transparent),
    rgba(255, 252, 246, .72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .42),
    0 12px 24px rgba(47, 38, 25, .07);
}

.similarWordPrompt {
  display: grid;
  gap: 6px;
  text-align: center;
}

.similarWordPrompt strong {
  color: var(--ink);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.35;
}

.similarWordPrompt small {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.similarWordOptions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.similarWordOption {
  min-height: 48px;
  border: 1px solid rgba(154, 106, 47, .34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .38), transparent),
    rgba(255, 252, 246, .88);
  color: var(--ink);
  font-family: var(--standard-kai);
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(47, 38, 25, .06);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.similarWordOption:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: var(--cinnabar);
}

.similarWordOption.correct {
  border-color: rgba(66, 111, 90, .5);
  background: rgba(66, 111, 90, .14);
  color: var(--jade);
  animation: similarChoiceCorrect .44s ease both;
}

.similarWordOption.wrong {
  border-color: rgba(165, 58, 42, .7);
  background: rgba(165, 58, 42, .14);
  color: var(--cinnabar);
  animation: similarMismatch .32s ease;
}

.similarGameHint {
  position: relative;
  z-index: 1;
  min-height: 56px;
  max-width: 680px;
  margin: 18px auto 0;
  padding: 12px 16px;
  border: 1px solid rgba(66, 111, 90, .18);
  background: rgba(255, 252, 246, .58);
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.similarGameActions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 160px));
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.miniGamePanel {
  position: relative;
  overflow: hidden;
  min-height: 530px;
  margin-top: 14px;
  padding: 28px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .34), transparent 38%, rgba(255, 255, 255, .22)),
    linear-gradient(145deg, var(--panel-solid), rgba(255, 252, 244, .72)),
    repeating-linear-gradient(0deg, transparent 0 40px, var(--texture-line) 40px 41px),
    repeating-linear-gradient(90deg, transparent 0 40px, var(--texture-line-soft) 40px 41px);
  box-shadow:
    var(--shadow),
    inset 0 0 0 4px rgba(255, 255, 255, .3);
}

.miniGamePanel::before,
.miniGamePanel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.miniGamePanel::before {
  inset: 12px;
  border: 1px solid rgba(154, 106, 47, .18);
}

.miniGamePanel::after {
  top: 0;
  right: 0;
  left: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--jade), rgba(154, 106, 47, .78), var(--cinnabar));
  opacity: .78;
}

.miniGamePanel[data-complete="true"] {
  border-color: rgba(66, 111, 90, .5);
  box-shadow:
    0 20px 44px rgba(47, 38, 25, .12),
    inset 0 0 0 4px rgba(66, 111, 90, .1);
}

.miniGameTop {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(55, 48, 36, .12);
}

.miniGameTop h2 {
  color: var(--ink);
  font-family: var(--standard-kai);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
}

.miniGameStats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.miniGameStats span {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(66, 111, 90, .26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .36), transparent),
    rgba(66, 111, 90, .08);
  color: var(--jade);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
  box-shadow: 0 4px 12px rgba(47, 38, 25, .06);
}

.miniGameTask {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  max-width: 680px;
  margin: 0 auto;
}

.miniGamePrompt {
  display: grid;
  gap: 10px;
  min-height: 188px;
  padding: 22px 18px;
  border: 1px solid rgba(154, 106, 47, .28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), transparent),
    rgba(255, 252, 246, .78);
  text-align: center;
  box-shadow:
    0 12px 24px rgba(47, 38, 25, .07),
    inset 0 0 0 1px rgba(255, 255, 255, .48);
}

.miniGamePrompt span {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 900;
}

.miniGamePrompt strong {
  display: flex;
  justify-content: center;
  gap: 6px;
  color: var(--ink);
  font-family: var(--standard-kai);
  font-size: clamp(46px, 9vw, 82px);
  font-weight: 900;
  line-height: 1.05;
}

.miniGamePrompt strong span {
  display: grid;
  place-items: center;
  min-width: 72px;
  height: 86px;
  border: 1px solid rgba(154, 106, 47, .24);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(165, 58, 42, .13) calc(50% - .5px), rgba(165, 58, 42, .13) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(165, 58, 42, .13) calc(50% - .5px), rgba(165, 58, 42, .13) calc(50% + .5px), transparent calc(50% + .5px)),
    rgba(255, 255, 255, .42);
  color: var(--ink);
  font-size: inherit;
}

.miniGamePrompt strong span.broken {
  border-color: rgba(165, 58, 42, .58);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(198, 40, 40, .26) calc(50% - .5px), rgba(198, 40, 40, .26) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(198, 40, 40, .26) calc(50% - .5px), rgba(198, 40, 40, .26) calc(50% + .5px), transparent calc(50% + .5px)),
    rgba(165, 58, 42, .12);
  color: var(--cinnabar);
  animation: similarSelectedPulse .9s ease-in-out infinite alternate;
}

.miniGamePrompt small {
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
}

.buildParts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 96px;
}

.buildParts b {
  display: grid;
  place-items: center;
  min-width: 84px;
  min-height: 84px;
  padding: 8px 12px;
  border: 1px solid rgba(66, 111, 90, .3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .45), transparent),
    rgba(66, 111, 90, .1);
  color: var(--jade);
  font-family: var(--standard-kai);
  font-size: 48px;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(47, 38, 25, .07);
}

.buildParts i {
  color: var(--cinnabar);
  font-size: 28px;
  font-style: normal;
  font-weight: 900;
}

.miniGameOptions {
  display: grid;
  gap: 10px;
}

.miniGameOptions.charOptions {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.miniGameOptions.textOptions {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.miniGameOption {
  min-height: 68px;
  border: 1px solid rgba(154, 106, 47, .34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .38), transparent),
    rgba(255, 252, 246, .88);
  color: var(--ink);
  font-family: var(--standard-kai);
  font-size: 38px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(47, 38, 25, .07);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.miniGameOption.textOption {
  padding: 10px 12px;
  font-family: inherit;
  font-size: 22px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.miniGameOption:not(:disabled):hover {
  transform: translateY(-3px);
  border-color: var(--cinnabar);
  color: var(--cinnabar);
}

.miniGameOption.correct {
  border-color: rgba(66, 111, 90, .58);
  background: rgba(66, 111, 90, .14);
  color: var(--jade);
  animation: similarChoiceCorrect .44s ease both;
}

.miniGameOption.wrong {
  border-color: rgba(165, 58, 42, .72);
  background: rgba(165, 58, 42, .14);
  color: var(--cinnabar);
  animation: similarMismatch .32s ease;
}

.miniGameActions {
  position: relative;
  z-index: 1;
  display: grid;
  justify-content: center;
  gap: 10px;
}

.miniGameHint {
  position: relative;
  z-index: 1;
  min-height: 56px;
  max-width: 680px;
  margin: 18px auto 0;
  padding: 12px 16px;
  border: 1px solid rgba(66, 111, 90, .18);
  background: rgba(255, 252, 246, .62);
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.miniGameActions {
  grid-template-columns: repeat(2, minmax(0, 150px));
  margin-top: 16px;
}

.wrongToolPanel {
  position: relative;
  overflow: hidden;
  min-height: 530px;
  margin-top: 14px;
  padding: 28px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .34), transparent 38%, rgba(255, 255, 255, .22)),
    linear-gradient(145deg, var(--panel-solid), rgba(255, 252, 244, .74)),
    repeating-linear-gradient(0deg, transparent 0 40px, var(--texture-line) 40px 41px),
    repeating-linear-gradient(90deg, transparent 0 40px, var(--texture-line-soft) 40px 41px);
  box-shadow:
    var(--shadow),
    inset 0 0 0 4px rgba(255, 255, 255, .3);
}

.wrongToolPanel::before,
.wrongToolPanel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.wrongToolPanel::before {
  inset: 12px;
  border: 1px solid rgba(154, 106, 47, .18);
}

.wrongToolPanel::after {
  top: 0;
  right: 0;
  left: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--cinnabar), rgba(154, 106, 47, .78), var(--jade));
  opacity: .78;
}

.wrongToolTop {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(55, 48, 36, .12);
}

.wrongToolTop h2 {
  color: var(--ink);
  font-family: var(--standard-kai);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
}

.wrongToolStatus {
  margin: 10px 0 0;
  color: rgba(15, 23, 42, .72);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.practicePanel.wrongToolMode .statusStrip {
  display: none;
}

.wrongToolStats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.wrongToolStats span {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(165, 58, 42, .28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .36), transparent),
    rgba(165, 58, 42, .07);
  color: var(--cinnabar);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
  box-shadow: 0 4px 12px rgba(47, 38, 25, .06);
}

.wrongToolBody {
  position: relative;
  z-index: 1;
  max-height: 420px;
  overflow: auto;
  padding: 4px;
}

.wrongToolBody.printPreview {
  max-height: none;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(154, 106, 47, .24);
  background: #f3f3f3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}

.wrongToolPrintFrame {
  display: block;
  width: 100%;
  height: 540px;
  border: 0;
  background: #fff;
}

.wrongToolHint {
  position: relative;
  z-index: 1;
  min-height: 56px;
  max-width: 760px;
  margin: 18px auto 0;
  padding: 12px 16px;
  border: 1px solid rgba(66, 111, 90, .18);
  background: rgba(255, 252, 246, .62);
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.wrongToolActions {
  position: relative;
  z-index: 1;
  display: grid;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.wrongToolPanel[data-view="practice"] .wrongToolActions {
  grid-template-columns: repeat(3, minmax(0, 150px));
}

.wrongToolPanel[data-view="total"] .wrongToolActions {
  grid-template-columns: minmax(0, 150px);
}

.wrongTotalInline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 0;
  padding: 10px;
  border: 1px solid rgba(154, 106, 47, .22);
  background: rgba(255, 252, 246, .58);
}

.wrongTotalMainItem {
  display: inline-grid;
  place-items: center;
  min-width: 54px;
  min-height: 54px;
  padding: 7px 10px;
  border: 1px solid rgba(154, 106, 47, .32);
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
  font-family: var(--standard-kai);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
}

.wrongTotalSpace {
  display: inline-block;
  width: 54px;
  height: 54px;
  border: 1px dashed rgba(154, 106, 47, .22);
  background: rgba(255, 255, 255, .28);
}

.reviewActions .plainBtn.active {
  border-color: rgba(165, 58, 42, .5);
  background: rgba(165, 58, 42, .12);
  color: var(--cinnabar);
}

.gameZoneBtn + .gameZoneBtn {
  margin-top: 8px;
}

@keyframes similarMismatch {
  0%,
  100% {
    transform: translateX(0);
  }

  35% {
    transform: translateX(-4px);
  }

  70% {
    transform: translateX(4px);
  }
}

@keyframes similarSelectedPulse {
  from {
    box-shadow: 0 10px 20px rgba(165, 58, 42, .12);
  }

  to {
    box-shadow: 0 14px 28px rgba(165, 58, 42, .24);
  }
}

@keyframes similarMatchPop {
  0% {
    transform: scale(.94);
    opacity: .88;
  }

  45% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: .5;
  }
}

@keyframes similarMatchRing {
  0% {
    transform: scale(.82);
    opacity: .72;
  }

  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

@keyframes similarChoiceCorrect {
  0% {
    transform: scale(.98);
  }

  55% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes similarBoardComplete {
  0% {
    transform: scale(.99);
  }

  45% {
    transform: scale(1.018);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes similarConfetti {
  0% {
    transform: translate3d(0, -18px, 0) rotate(0deg);
    opacity: 0;
  }

  12% {
    opacity: .95;
  }

  100% {
    transform: translate3d(var(--drift), 560px, 0) rotate(var(--spin));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .similarTile,
  .similarTile.selected,
  .similarTile.justMatched,
  .similarTile.justMatched::after,
  .similarWordOption.correct,
  .similarWordOption.wrong,
  .similarGamePanel[data-complete="true"] .similarGameBoard,
  .similarGamePanel[data-complete="true"] .similarCelebration span,
  .miniGamePrompt strong span.broken,
  .miniGameOption.correct,
  .miniGameOption.wrong,
  .archiveFlyer,
  .archiveTargetPulse {
    animation: none;
    transition: none;
  }
}

.cardMeta {
  min-height: 24px;
  color: var(--jade);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.symbolWrap {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 310px;
  padding: 12px;
}

.mainSymbol {
  --symbol-size: 17rem;
  --box-size: clamp(190px, 42cqw, 300px);
  --box-font: calc(var(--box-size) * var(--grid-font-ratio));
  position: relative;
  max-width: 100%;
  color: var(--ink);
  font-family: var(--standard-kai);
  font-size: min(var(--symbol-size), 72cqw);
  font-weight: 900;
  line-height: 1.03;
  text-align: center;
  overflow-wrap: anywhere;
}

.mainSymbol.hidden {
  color: transparent;
}

.mainSymbol.charGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(10px, 2cqw, 18px);
  width: 100%;
  font-size: 0;
}

.mainSymbol.writingGrid {
  position: relative;
  width: min(300px, 78cqw);
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--grid-border-width) solid var(--grid-border);
  background: #fffdf7;
  font-size: 0;
}

.mainSymbol.wordWritingGrid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(10px, 2cqw, 18px);
  width: min(720px, 94cqw);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  font-size: 0;
}

.symbolCell {
  display: inline-grid;
  grid-template-rows: minmax(28px, auto) auto;
  justify-items: center;
  flex: 0 0 auto;
  width: var(--box-size);
}

.symbolPinyin {
  display: block;
  width: var(--box-size);
  min-height: 28px;
  color: var(--cinnabar);
  font-family: var(--app-font);
  font-size: clamp(15px, calc(var(--box-size) * .12), 28px);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.symbolCharBox,
.wordTianBox {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--grid-border-width) solid var(--grid-border);
  background: #fffdf7;
}

.symbolCharBox {
  color: var(--grid-text);
  font-size: var(--box-font);
  font-weight: 900;
  line-height: 1;
}

.symbolGlyph {
  position: relative;
  z-index: 1;
  display: block;
  transform: scale(.86);
  transform-origin: center;
}

/* Prevent top strokes from being clipped in the main card display. */
#mainSymbol .symbolCharBox {
  overflow: visible;
  padding-top: 10px;
  box-sizing: border-box;
}

#mainSymbol .symbolGlyph {
  transform: translateY(8px) scale(.84);
}

.mainSymbol.writingGrid::before,
.mainSymbol.writingGrid::after,
.symbolCharBox::before,
.symbolCharBox::after,
.wordTianBox::before,
.wordTianBox::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mainSymbol.writingGrid::before,
.symbolCharBox::before,
.wordTianBox::before {
  left: 50%;
  width: 0;
  border-left: var(--grid-line-width) dashed var(--grid-line);
  transform: translateX(-50%);
}

.mainSymbol.writingGrid::after,
.symbolCharBox::after,
.wordTianBox::after {
  top: 50%;
  height: 0;
  border-top: var(--grid-line-width) dashed var(--grid-line);
  transform: translateY(-50%);
}

.mainSymbol.hidden .symbolCharBox {
  color: transparent;
}

.blankAnswer .symbolGlyph {
  color: transparent;
}

.wordTianBox {
  --box-size: var(--box-size);
  width: var(--box-size);
}

.pinyinText:empty {
  min-height: 0;
}

.mainSymbol.wordAnswer[data-size="medium"],
.mainSymbol.wordAnswer[data-size="small"],
.mainSymbol.wordAnswer[data-size="tiny"] {
  --symbol-size: 17rem;
}

.mainSymbol[data-size="medium"] {
  --symbol-size: 10rem;
  --box-size: clamp(132px, 30cqw, 210px);
}

.mainSymbol[data-size="small"] {
  --symbol-size: 6.3rem;
  --box-size: clamp(90px, 20cqw, 132px);
}

.mainSymbol[data-size="tiny"] {
  --symbol-size: 4.7rem;
  --box-size: clamp(68px, 15cqw, 100px);
}

.mainSymbol.wordSizedAnswer,
.mainSymbol.wordSizedAnswer[data-size="medium"],
.mainSymbol.wordSizedAnswer[data-size="small"],
.mainSymbol.wordSizedAnswer[data-size="tiny"] {
  --box-size: clamp(190px, 42cqw, 300px);
  --box-font: calc(var(--box-size) * var(--grid-font-ratio));
  flex-wrap: nowrap;
  gap: clamp(10px, 2cqw, 18px);
}

.mainSymbol.wordSizedAnswer .symbolPinyin {
  min-height: 28px;
  font-size: clamp(15px, calc(var(--box-size) * .12), 28px);
}

.mainSymbol.wordWritingGrid[data-word-length="3"],
.mainSymbol.wordWritingGrid[data-word-length="4"],
.mainSymbol.wordSizedAnswer[data-word-length="3"],
.mainSymbol.wordSizedAnswer[data-word-length="4"] {
  --box-size: clamp(95px, 21cqw, 150px);
  --box-font: calc(var(--box-size) * var(--grid-font-ratio));
  gap: clamp(5px, 1cqw, 9px);
}

.mainSymbol.wordWritingGrid[data-word-length="3"] .symbolPinyin,
.mainSymbol.wordWritingGrid[data-word-length="4"] .symbolPinyin,
.mainSymbol.wordSizedAnswer[data-word-length="3"] .symbolPinyin,
.mainSymbol.wordSizedAnswer[data-word-length="4"] .symbolPinyin {
  min-height: 18px;
  font-size: clamp(12px, calc(var(--box-size) * .12), 18px);
}

.mainSymbol.effect-spark { animation: effectSpark .78s ease-out; }
.mainSymbol.effect-bounce { animation: effectBounce .72s cubic-bezier(.18,.9,.24,1); }
.mainSymbol.effect-pulse { animation: effectPulse .68s ease-out; }
.mainSymbol.effect-spin { animation: effectSpin .8s ease-out; }
.mainSymbol.effect-rainbow { animation: effectRainbow .9s ease-out; }
.mainSymbol.effect-float { animation: effectFloat .74s ease-out; }

.archiveFlyer {
  position: fixed;
  z-index: 1200;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 7px;
  border: 2px solid rgba(154, 106, 47, .42);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(165, 58, 42, .15) calc(50% - .5px), rgba(165, 58, 42, .15) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(165, 58, 42, .15) calc(50% - .5px), rgba(165, 58, 42, .15) calc(50% + .5px), transparent calc(50% + .5px)),
    rgba(255, 252, 246, .96);
  color: var(--ink);
  box-shadow:
    0 18px 34px rgba(47, 38, 25, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .64);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(.9) rotate(0deg);
  transition:
    transform .86s cubic-bezier(.2, .78, .2, 1),
    opacity .2s ease;
}

.archiveFlyer strong {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-family: var(--standard-kai);
  font-size: clamp(25px, 7vw, 52px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.archiveFlyer[data-length="2"] strong {
  font-size: clamp(22px, 5.5vw, 40px);
}

.archiveFlyer[data-length="3"] strong,
.archiveFlyer[data-length="4"] strong {
  font-size: clamp(17px, 4vw, 30px);
}

.archiveFlyer[data-length="5"] strong,
.archiveFlyer[data-length="6"] strong,
.archiveFlyer[data-length="7"] strong,
.archiveFlyer[data-length="8"] strong {
  font-size: clamp(13px, 3vw, 22px);
}

.archiveFlyer small {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.archiveFlyer.toGoal {
  border-color: rgba(66, 111, 90, .5);
  color: var(--jade);
}

.archiveFlyer.toWrong {
  border-color: rgba(165, 58, 42, .56);
  color: var(--cinnabar);
}

.archiveFlyer.isFlying {
  opacity: 1;
  transform: translate3d(var(--fly-x), var(--fly-y), 0) scale(.34) rotate(-7deg);
  animation: archiveFlyFade .9s ease forwards;
}

.archiveTargetPulse {
  animation: archiveTargetPulse .76s ease both;
}

.mainSymbol.effect-spark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 1.06em;
  height: 1.06em;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 106, 47, .9) 0 5px, transparent 6px),
    radial-gradient(circle at 100% 58%, rgba(66, 111, 90, .9) 0 5px, transparent 6px),
    radial-gradient(circle at 20% 84%, rgba(165, 58, 42, .9) 0 5px, transparent 6px);
  pointer-events: none;
  animation: sparkDots .78s ease-out;
}

@keyframes effectSpark {
  0% { transform: scale(.94); color: var(--ink); }
  45% { transform: scale(1.08); color: var(--cinnabar); text-shadow: 0 0 18px rgba(154, 106, 47, .34); }
  100% { transform: scale(1); color: var(--ink); text-shadow: none; }
}

@keyframes sparkDots {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(0deg); }
  45% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.32) rotate(22deg); }
}

@keyframes effectBounce {
  0% { transform: translateY(0) scale(1); }
  36% { transform: translateY(-26px) scale(1.06); color: var(--jade); }
  68% { transform: translateY(6px) scale(.98); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes effectPulse {
  0% { transform: scale(1); }
  48% { transform: scale(1.13); color: var(--cinnabar); }
  100% { transform: scale(1); }
}

@keyframes effectSpin {
  0% { transform: rotate(0) scale(.94); }
  62% { transform: rotate(360deg) scale(1.06); color: var(--gold); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes effectRainbow {
  0% { color: var(--cinnabar); transform: scale(1); }
  35% { color: var(--gold); }
  70% { color: var(--jade); transform: scale(1.07); }
  100% { color: var(--ink); transform: scale(1); }
}

@keyframes effectFloat {
  0% { transform: translateY(16px); opacity: .25; }
  45% { transform: translateY(-12px); opacity: 1; color: var(--jade); }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes archiveFlyFade {
  0% { filter: none; }
  72% { opacity: 1; filter: drop-shadow(0 0 10px rgba(154, 106, 47, .22)); }
  100% { opacity: 0; filter: none; }
}

@keyframes archiveTargetPulse {
  0% { transform: scale(1); box-shadow: none; }
  42% {
    transform: scale(1.025);
    box-shadow: 0 0 0 4px rgba(154, 106, 47, .1), 0 0 0 8px rgba(66, 111, 90, .08);
  }
  100% { transform: scale(1); box-shadow: none; }
}

@keyframes reviewDueFlash {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(198, 40, 40, 0);
  }
  50% {
    transform: scale(1.035);
    box-shadow: 0 0 0 5px rgba(198, 40, 40, .16), 0 0 18px rgba(198, 40, 40, .24);
  }
}

.pinyinText {
  min-height: 44px;
  color: var(--cinnabar);
  font-size: 34px;
  font-weight: 900;
  text-align: center;
}

.timerText,
.feedbackText {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  color: var(--ink-soft);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.42;
  text-align: center;
}

.exampleText {
  min-height: 64px;
  color: var(--gold);
  font-size: 38px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.timerText {
  color: var(--muted);
}

.feedbackText.good {
  color: var(--jade);
}

.feedbackText.bad {
  color: var(--cinnabar);
}

.mainSymbol.strokeAnswer {
  --stroke-card-size: clamp(220px, 48cqw, 320px);
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
  font-size: 0;
}

.strokeAnswerPinyin {
  min-height: 30px;
  color: var(--cinnabar);
  font-family: var(--app-font);
  font-size: clamp(22px, 5cqw, 34px);
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
}

.strokeAnswerStage {
  display: grid;
  place-items: center;
  width: min(var(--stroke-card-size), 86cqw);
  height: min(var(--stroke-card-size), 86cqw);
  overflow: hidden;
  border: var(--grid-border-width) solid var(--grid-border);
  background: #fffdf7;
}

.strokeAnswerStage strong {
  color: var(--grid-text);
  font-family: var(--standard-kai);
  font-size: clamp(140px, 58cqw, 220px);
  line-height: 1;
}

.actionBar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.actionBar[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.actionBar.pauseActions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.actionBar.pauseActions .toolBtn {
  border: 0;
  background: var(--kid-yellow);
  color: var(--kid-ink);
  box-shadow: 0 10px 22px rgba(255, 201, 74, .18);
}

.actionBar.pauseActions .dangerBtn {
  background: var(--kid-sky);
  color: var(--kid-blue);
  box-shadow: 0 10px 22px rgba(66, 165, 245, .16);
}

.actionBar.pauseActions .primaryBtn {
  min-height: 58px;
}

.toolBtn.listening {
  border-color: rgba(165, 58, 42, .55);
  background: rgba(165, 58, 42, .1);
  color: var(--cinnabar);
}

.reviewPanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reviewSection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.todayTaskSection {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(154, 106, 47, .18);
}

.reviewSectionLabel {
  margin: 0;
  color: var(--cinnabar);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}

.reviewSectionTitle {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.reviewTop {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding-bottom: 0;
}

.reviewTop h2 {
  color: var(--ink);
  font-size: 21px;
  font-weight: 900;
}

.reviewNowBtn {
  width: 100%;
}

.reviewNowBtn.reviewDueFlash {
  animation: reviewDueFlash 1.05s ease-in-out infinite;
  border-color: rgba(198, 40, 40, .55);
  background: linear-gradient(180deg, rgba(198, 40, 40, .15), rgba(198, 40, 40, .06)), var(--panel-soft);
  color: var(--cinnabar);
}

.reviewScheduleText {
  min-height: 22px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}

.reviewScheduleText.reviewDueText {
  color: var(--cinnabar);
}

.gameZone {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed rgba(154, 106, 47, .22);
}

.gameZone h4 {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.gameZoneBtn {
  width: 100%;
}

.gameZoneBtn:disabled {
  cursor: not-allowed;
  opacity: .52;
  filter: grayscale(.2);
  box-shadow: none;
}

.wrongChip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(165, 58, 42, .35);
  background: rgba(165, 58, 42, .08);
  color: var(--cinnabar);
  font-weight: 900;
  text-align: center;
}

.wrongDot {
  width: 10px;
  height: 10px;
  background: currentColor;
  opacity: .7;
}

.wrongChip.waiting {
  border-color: rgba(154, 106, 47, .36);
  background: rgba(154, 106, 47, .09);
  color: var(--gold);
}

.wrongChip small {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.emptyText {
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 1140px) {
  .homeLayout {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 400px);
    gap: 16px;
  }

  .homeIntro h1 {
    font-size: clamp(54px, 7vw, 82px);
  }

  .mainGrid {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .controlPanel,
  .reviewPanel {
    position: static;
  }

  .practicePanel {
    order: 2;
    min-height: 0;
  }

  .controlPanel {
    order: 1;
  }

  .reviewPanel {
    order: 3;
    grid-column: 1 / -1;
  }

  .practiceCard {
    min-height: 480px;
  }
}

@media (max-width: 700px) {
  .homeScreen {
    min-height: auto;
    padding: 16px;
  }

  .homeLayout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "panel"
      "load";
    gap: 14px;
  }

  .homeIntro {
    min-height: auto;
    padding: 12px 0 0;
  }

  .homeIntro h1 {
    font-size: 50px;
  }

  .homeModeStrip {
    margin-top: 16px;
  }

  .homePanel {
    width: 100%;
    padding: 18px 16px;
  }

  .homeLoadRules {
    width: 100%;
    padding: 12px;
  }

  .homeLoadHeader {
    display: grid;
    gap: 4px;
  }

  .homeLoadHeader h2 {
    font-size: 22px;
  }

  .homeLoadHeader p {
    font-size: 13px;
    text-align: left;
  }

  .homeLoadTable th,
  .homeLoadTable td {
    padding: 8px 6px;
    font-size: 13px;
  }

  .appShell {
    width: min(100vw - 18px, 1320px);
    padding-top: 10px;
  }

  .appHeader {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px 0 16px;
  }

  .brandTitleRow {
    align-items: flex-start;
    gap: 10px;
  }

  .learningGoal {
    max-width: 100%;
    padding: 12px 15px;
    font-size: 20px;
  }

  h1 {
    font-size: 34px;
  }

  .mainGrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .controlPanel,
  .practicePanel,
  .reviewPanel {
    grid-column: auto;
  }

  .controlPanel {
    order: 1;
  }

  .practicePanel {
    order: 2;
  }

  .reviewPanel {
    order: 3;
  }

  .sidePanel {
    padding: 12px;
  }

  .progressOverview {
    padding: 8px;
  }

  .progressTable td {
    display: block;
    width: 100%;
    padding: 8px 10px;
  }

  .symbolWrap {
    min-height: 218px;
  }

  .practiceCard {
    min-height: 420px;
    padding: 18px 14px;
  }

  .similarGamePanel {
    min-height: 440px;
    padding: 20px 14px;
  }

  .miniGamePanel {
    min-height: 440px;
    padding: 20px 14px;
  }

  .wrongToolPanel {
    min-height: 440px;
    padding: 20px 14px;
  }

  .similarGameTop {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
  }

  .miniGameTop {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
  }

  .wrongToolTop {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
  }

  .similarGameTop h2 {
    font-size: 28px;
  }

  .miniGameTop h2 {
    font-size: 28px;
  }

  .wrongToolTop h2 {
    font-size: 28px;
  }

  .similarGameStats {
    justify-content: flex-start;
  }

  .miniGameStats {
    justify-content: flex-start;
  }

  .wrongToolStats {
    justify-content: flex-start;
  }

  .similarLevelTabs {
    width: 100%;
    min-width: 0;
  }

  .similarGameBoard {
    grid-template-columns: repeat(4, minmax(48px, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .similarGamePanel[data-board="large"] .similarGameBoard {
    grid-template-columns: repeat(6, minmax(34px, 1fr));
    gap: 5px;
    padding: 8px;
  }

  .similarTile {
    min-height: 58px;
    font-size: clamp(30px, 12vw, 48px);
  }

  .similarGamePanel[data-board="large"] .similarTile {
    min-height: 42px;
    font-size: clamp(22px, 8vw, 34px);
  }

  .similarWordChallenge {
    padding: 12px;
  }

  .similarWordPrompt strong {
    font-size: 17px;
  }

  .similarWordOptions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .similarWordOption {
    min-height: 44px;
    font-size: 22px;
  }

  .similarGameHint {
    min-height: 66px;
    padding: 10px 12px;
    font-size: 16px;
  }

  .similarGameActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .miniGamePrompt {
    min-height: 160px;
    padding: 16px 12px;
  }

  .miniGamePrompt strong {
    font-size: clamp(38px, 14vw, 58px);
  }

  .miniGamePrompt strong span {
    min-width: 54px;
    height: 66px;
  }

  .buildParts b {
    min-width: 64px;
    min-height: 64px;
    font-size: 36px;
  }

  .miniGameOption {
    min-height: 56px;
    font-size: 32px;
  }

  .miniGameHint {
    min-height: 66px;
    padding: 10px 12px;
    font-size: 16px;
  }

  .miniGameActions {
    grid-template-columns: 1fr;
  }

  .wrongToolBody {
    max-height: 360px;
  }

  .wrongToolBody.printPreview {
    max-height: none;
  }

  .wrongToolPrintFrame {
    height: 430px;
  }

  .wrongTotalMainItem {
    min-width: 46px;
    min-height: 46px;
    font-size: 24px;
  }

  .wrongTotalSpace {
    width: 46px;
    height: 46px;
  }

  .wrongToolHint {
    min-height: 66px;
    padding: 10px 12px;
    font-size: 16px;
  }

  .wrongToolActions {
    grid-template-columns: 1fr;
  }

  .pinyinText {
    font-size: 26px;
  }

  .timerText,
  .feedbackText {
    min-height: 50px;
    font-size: 17px;
  }

  .mainSymbol.strokeAnswer {
    --stroke-card-size: 220px;
    gap: 8px;
  }

  .exampleText {
    min-height: 56px;
    font-size: 34px;
  }

  .actionBar {
    grid-template-columns: 1fr 1fr;
  }
}

/* 儿童 UI 最终覆盖层：确保新版设计优先生效 */
body {
  font-family: var(--app-font);
}

.homeLayout {
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 420px);
  grid-template-areas:
    "intro panel"
    "load panel";
  gap: 20px 26px;
}

.homeIntro {
  position: relative;
  min-height: 520px;
  justify-items: start;
  overflow: hidden;
  padding: 52px min(7vw, 72px);
  border: 1px solid rgba(46, 138, 246, .15);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(221, 242, 255, .78), rgba(255, 253, 245, .94));
  box-shadow: var(--kid-shadow);
  text-align: left;
}

.homeIntro h1,
.brandTitleRow h1,
.homeLoadHeader h2,
.reviewTop h2,
.reviewSectionTitle,
.gameZone h4 {
  font-family: inherit;
  letter-spacing: 0;
}

.homeIntro h1 {
  font-size: clamp(58px, 8vw, 92px);
  font-weight: 950;
  max-width: 560px;
}

.homeTagline {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-top: 18px;
  color: var(--kid-ink-soft);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 800;
  line-height: 1.45;
}

.homeModeStrip {
  position: relative;
  z-index: 1;
  justify-content: flex-start;
}

.homeModeStrip span {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 7px 18px rgba(38, 50, 56, .06);
}

.homeMascot {
  display: grid;
}

.homePanel,
.homeLoadRules,
.sidePanel,
.practiceCard,
.similarGamePanel,
.miniGamePanel,
.wrongToolPanel,
.appHeader,
.statusStrip {
  border-color: var(--kid-line);
  border-radius: 28px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--kid-soft-shadow);
}

.homePanel {
  border-radius: 32px;
}

.formRow input,
.formRow select {
  min-height: 54px;
  border: 1px solid var(--kid-line);
  border-radius: 18px;
  background: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 850;
}

.homeLoadTable th {
  background: var(--kid-mint);
  color: var(--kid-leaf);
}

.appHeader {
  padding: 18px 22px;
}

.mainGrid {
  grid-template-columns: 292px minmax(0, 1fr) 272px;
  gap: 18px;
}

.learningGoal,
#modeBadge {
  border: 0;
  border-radius: 999px;
  background: var(--kid-mint);
  color: var(--kid-leaf);
}

.softBtn,
.plainBtn,
.toolBtn,
.primaryBtn,
.dangerBtn,
.modeTab,
.similarLevelTabs button {
  min-height: 54px;
  border-radius: 18px;
  font-family: inherit;
  font-weight: 900;
}

.primaryBtn {
  border: 0;
  background: var(--kid-leaf);
  color: #fff;
  box-shadow: 0 10px 22px rgba(47, 166, 106, .22);
}

.dangerBtn {
  border: 0;
  background: var(--kid-coral);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 107, 95, .2);
}

.softBtn {
  background: var(--kid-sky);
  color: var(--kid-blue);
}

.reviewNowBtn {
  background: var(--kid-yellow);
  color: var(--kid-ink);
}

.modeTabs {
  gap: 8px;
  padding: 6px;
  border-radius: 22px;
  background: rgba(221, 242, 255, .72);
}

.modeTab {
  border: 0;
  color: var(--kid-blue);
}

.modeTab.active {
  background: #fff;
  color: var(--kid-leaf);
  box-shadow: 0 8px 18px rgba(38, 50, 56, .08);
}

.practiceCard {
  min-height: 560px;
  overflow: hidden;
  padding: 34px;
  background: radial-gradient(circle at 50% 25%, rgba(255, 201, 74, .18), transparent 28%), #fff;
}

.symbolWrap {
  display: grid;
  place-items: center;
  width: min(430px, 86%);
  aspect-ratio: 1;
  margin: 10px auto 0;
  border-radius: 34px;
  background: linear-gradient(180deg, #fff, #fffdf5);
}

.cardMeta,
.pinyinText,
.feedbackText.good {
  color: var(--kid-leaf);
}

.exampleText {
  color: var(--kid-blue);
}

.feedbackText {
  width: min(620px, 100%);
  min-height: 60px;
  margin-top: 8px;
  padding: 12px 18px;
  border-radius: 22px;
  background: rgba(221, 242, 255, .52);
}

.feedbackText.good {
  background: var(--kid-mint);
}

.feedbackText.bad {
  background: #ffe4df;
  color: var(--kid-coral);
}

@media (max-width: 980px) {
  .homeLayout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "panel"
      "load";
  }

  .homeIntro {
    min-height: 650px;
  }

  .mainGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .homeIntro {
    min-height: auto;
    padding: 34px 22px 280px;
    border-radius: 28px;
  }

  .homeIntro h1 {
    font-size: 54px;
  }

}

/* 词语模式排版修正：2字以上稳定居中 */
.practiceCard .symbolWrap {
  width: min(620px, 94%);
  max-width: 100%;
}

.mainSymbol.wordSizedAnswer {
  display: grid;
  justify-content: center;
  justify-items: center;
  align-items: start;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  overflow: visible;
}

.mainSymbol.wordSizedAnswer[data-word-length="2"] {
  --box-size: clamp(132px, 24cqw, 190px);
  --box-font: calc(var(--box-size) * .82);
  grid-template-columns: repeat(2, var(--box-size));
  gap: clamp(10px, 2cqw, 16px);
}

.mainSymbol.wordSizedAnswer[data-word-length="3"] {
  --box-size: clamp(96px, 18cqw, 136px);
  --box-font: calc(var(--box-size) * .82);
  grid-template-columns: repeat(3, var(--box-size));
  gap: clamp(8px, 1.6cqw, 12px);
}

.mainSymbol.wordSizedAnswer[data-word-length="4"] {
  --box-size: clamp(78px, 15cqw, 112px);
  --box-font: calc(var(--box-size) * .8);
  grid-template-columns: repeat(4, var(--box-size));
  gap: clamp(6px, 1.2cqw, 10px);
}

.mainSymbol.wordSizedAnswer[data-word-length="5"],
.mainSymbol.wordSizedAnswer[data-word-length="6"],
.mainSymbol.wordSizedAnswer[data-word-length="7"],
.mainSymbol.wordSizedAnswer[data-word-length="8"] {
  --box-size: clamp(64px, 12cqw, 90px);
  --box-font: calc(var(--box-size) * .78);
  grid-template-columns: repeat(auto-fit, minmax(var(--box-size), var(--box-size)));
  gap: 7px;
}

.mainSymbol.wordSizedAnswer .symbolCell {
  width: var(--box-size);
  max-width: var(--box-size);
}

.mainSymbol.wordSizedAnswer .symbolPinyin {
  width: var(--box-size);
  color: var(--kid-leaf);
}

.mainSymbol.wordSizedAnswer .symbolGlyph {
  transform: scale(.82);
}

@media (max-width: 760px) {
  .practiceCard .symbolWrap {
    width: 100%;
  }

  .mainSymbol.wordSizedAnswer[data-word-length="2"] {
    --box-size: clamp(112px, 34vw, 150px);
  }

  .mainSymbol.wordSizedAnswer[data-word-length="3"] {
    --box-size: clamp(76px, 24vw, 104px);
  }

  .mainSymbol.wordSizedAnswer[data-word-length="4"] {
    --box-size: clamp(60px, 18vw, 82px);
  }
}

/* 测试前后田字格尺寸统一 */
.mainSymbol.charGrid:not(.wordSizedAnswer) {
  --box-size: clamp(220px, 48cqw, 300px);
  --box-font: calc(var(--box-size) * var(--grid-font-ratio));
}

.mainSymbol.strokeAnswer {
  --stroke-card-size: clamp(220px, 48cqw, 300px);
}

/* 词语表使用与写字表一致的田字格大小 */
.mainSymbol.wordWritingGrid,
.mainSymbol.wordSizedAnswer,
.mainSymbol.wordWritingGrid[data-word-length],
.mainSymbol.wordSizedAnswer[data-word-length] {
  --box-size: clamp(220px, 48cqw, 300px);
  --box-font: calc(var(--box-size) * var(--grid-font-ratio));
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: min(100%, 100%);
  max-width: 100%;
  gap: clamp(10px, 2cqw, 18px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 8px;
  scroll-padding-inline: 12px;
}

.mainSymbol.wordWritingGrid[data-word-length="1"],
.mainSymbol.wordSizedAnswer[data-word-length="1"],
.mainSymbol.wordWritingGrid[data-word-length="2"],
.mainSymbol.wordSizedAnswer[data-word-length="2"] {
  justify-content: center;
}

.mainSymbol.wordWritingGrid .symbolCell,
.mainSymbol.wordSizedAnswer .symbolCell,
.mainSymbol.wordWritingGrid .symbolPinyin,
.mainSymbol.wordSizedAnswer .symbolPinyin,
.mainSymbol.wordWritingGrid .symbolCharBox,
.mainSymbol.wordSizedAnswer .symbolCharBox {
  width: var(--box-size);
  min-width: var(--box-size);
  max-width: var(--box-size);
}

.mainSymbol.wordSizedAnswer .symbolGlyph,
.mainSymbol.wordWritingGrid .symbolGlyph {
  transform: scale(.86);
}

.mainSymbol.wordWritingGrid[data-word-length="2"] {
  --box-size: clamp(132px, 24cqw, 190px);
  --box-font: calc(var(--box-size) * .82);
  gap: clamp(10px, 2cqw, 16px);
}

.mainSymbol.wordWritingGrid[data-word-length="3"] {
  --box-size: clamp(96px, 18cqw, 136px);
  --box-font: calc(var(--box-size) * .82);
  gap: clamp(8px, 1.6cqw, 12px);
}

.mainSymbol.wordWritingGrid[data-word-length="4"] {
  --box-size: clamp(78px, 15cqw, 112px);
  --box-font: calc(var(--box-size) * .8);
  gap: clamp(6px, 1.2cqw, 10px);
}

.mainSymbol.wordWritingGrid[data-word-length="5"],
.mainSymbol.wordWritingGrid[data-word-length="6"],
.mainSymbol.wordWritingGrid[data-word-length="7"],
.mainSymbol.wordWritingGrid[data-word-length="8"] {
  --box-size: clamp(64px, 12cqw, 90px);
  --box-font: calc(var(--box-size) * .78);
  gap: 7px;
}

.mainSymbol.wordWritingGrid .symbolCell,
.mainSymbol.wordSizedAnswer .symbolCell {
  width: var(--box-size);
  max-width: var(--box-size);
}

.mainSymbol.wordWritingGrid .symbolCharBox,
.mainSymbol.wordSizedAnswer .symbolCharBox {
  width: var(--box-size);
  min-width: var(--box-size);
}

.mainSymbol.strokeAnswer[data-word-length="2"] {
  --stroke-card-size: clamp(220px, 48cqw, 300px);
}

.mainSymbol.strokeAnswer[data-word-length="3"] {
  --stroke-card-size: clamp(220px, 48cqw, 300px);
}

.mainSymbol.strokeAnswer[data-word-length="4"] {
  --stroke-card-size: clamp(220px, 48cqw, 300px);
}

.mainSymbol.strokeAnswer[data-word-length="5"],
.mainSymbol.strokeAnswer[data-word-length="6"],
.mainSymbol.strokeAnswer[data-word-length="7"],
.mainSymbol.strokeAnswer[data-word-length="8"] {
  --stroke-card-size: clamp(220px, 48cqw, 300px);
}

.mainSymbol.strokeAnswer[data-word-length="2"] .strokeAnswerPinyin,
.mainSymbol.strokeAnswer[data-word-length="3"] .strokeAnswerPinyin,
.mainSymbol.strokeAnswer[data-word-length="4"] .strokeAnswerPinyin,
.mainSymbol.strokeAnswer[data-word-length="5"] .strokeAnswerPinyin,
.mainSymbol.strokeAnswer[data-word-length="6"] .strokeAnswerPinyin,
.mainSymbol.strokeAnswer[data-word-length="7"] .strokeAnswerPinyin,
.mainSymbol.strokeAnswer[data-word-length="8"] .strokeAnswerPinyin {
  min-height: 22px;
  font-size: clamp(12px, calc(var(--stroke-card-size) * .14), 20px);
}

.mainSymbol.strokeAnswer[data-word-length="2"] .strokeAnswerStage strong,
.mainSymbol.strokeAnswer[data-word-length="3"] .strokeAnswerStage strong,
.mainSymbol.strokeAnswer[data-word-length="4"] .strokeAnswerStage strong,
.mainSymbol.strokeAnswer[data-word-length="5"] .strokeAnswerStage strong,
.mainSymbol.strokeAnswer[data-word-length="6"] .strokeAnswerStage strong,
.mainSymbol.strokeAnswer[data-word-length="7"] .strokeAnswerStage strong,
.mainSymbol.strokeAnswer[data-word-length="8"] .strokeAnswerStage strong {
  font-size: calc(var(--stroke-card-size) * var(--grid-font-ratio));
}

/* 覆盖前面的词语缩放规则，保证词语表与写字表同尺寸 */
.mainSymbol.wordWritingGrid[data-word-length="2"],
.mainSymbol.wordWritingGrid[data-word-length="3"],
.mainSymbol.wordWritingGrid[data-word-length="4"],
.mainSymbol.wordWritingGrid[data-word-length="5"],
.mainSymbol.wordWritingGrid[data-word-length="6"],
.mainSymbol.wordWritingGrid[data-word-length="7"],
.mainSymbol.wordWritingGrid[data-word-length="8"],
.mainSymbol.wordSizedAnswer[data-word-length="2"],
.mainSymbol.wordSizedAnswer[data-word-length="3"],
.mainSymbol.wordSizedAnswer[data-word-length="4"],
.mainSymbol.wordSizedAnswer[data-word-length="5"],
.mainSymbol.wordSizedAnswer[data-word-length="6"],
.mainSymbol.wordSizedAnswer[data-word-length="7"],
.mainSymbol.wordSizedAnswer[data-word-length="8"] {
  --box-size: clamp(220px, 48cqw, 300px);
  --box-font: calc(var(--box-size) * var(--grid-font-ratio));
  gap: clamp(10px, 2cqw, 18px);
}

.mainSymbol.wordWritingGrid[data-word-length] .symbolPinyin,
.mainSymbol.wordSizedAnswer[data-word-length] .symbolPinyin {
  min-height: 28px;
  font-size: clamp(15px, calc(var(--box-size) * .12), 28px);
}

.mainSymbol.strokeAnswer[data-word-length] .strokeAnswerPinyin {
  min-height: 30px;
  font-size: clamp(22px, 5cqw, 34px);
}

/* 词语表按双字完整显示标准缩小 15%，识字表和写字表不变 */
.mainSymbol.wordWritingGrid,
.mainSymbol.wordSizedAnswer,
.mainSymbol.wordWritingGrid[data-word-length],
.mainSymbol.wordSizedAnswer[data-word-length],
.mainSymbol.wordWritingGrid[data-word-length="2"],
.mainSymbol.wordWritingGrid[data-word-length="3"],
.mainSymbol.wordWritingGrid[data-word-length="4"],
.mainSymbol.wordWritingGrid[data-word-length="5"],
.mainSymbol.wordWritingGrid[data-word-length="6"],
.mainSymbol.wordWritingGrid[data-word-length="7"],
.mainSymbol.wordWritingGrid[data-word-length="8"],
.mainSymbol.wordSizedAnswer[data-word-length="2"],
.mainSymbol.wordSizedAnswer[data-word-length="3"],
.mainSymbol.wordSizedAnswer[data-word-length="4"],
.mainSymbol.wordSizedAnswer[data-word-length="5"],
.mainSymbol.wordSizedAnswer[data-word-length="6"],
.mainSymbol.wordSizedAnswer[data-word-length="7"],
.mainSymbol.wordSizedAnswer[data-word-length="8"] {
  --box-size: clamp(187px, 40.8cqw, 255px);
  --box-font: calc(var(--box-size) * var(--grid-font-ratio));
}

/* 3字和4字词语自动适配一行 */
.mainSymbol.wordWritingGrid[data-word-length="3"],
.mainSymbol.wordSizedAnswer[data-word-length="3"] {
  --box-size: clamp(132px, 26cqw, 170px);
  --box-font: calc(var(--box-size) * var(--grid-font-ratio));
  gap: clamp(8px, 1.4cqw, 12px);
  justify-content: center;
  overflow-x: hidden;
}

.mainSymbol.wordWritingGrid[data-word-length="4"],
.mainSymbol.wordSizedAnswer[data-word-length="4"] {
  --box-size: clamp(104px, 20cqw, 128px);
  --box-font: calc(var(--box-size) * var(--grid-font-ratio));
  gap: clamp(6px, 1cqw, 10px);
  justify-content: center;
  overflow-x: hidden;
}

/* 稳定字卡布局：提示语多行时不改变字区和卡片大小 */
.practicePanel .practiceCard {
  display: grid;
  grid-template-rows: 24px 330px 44px 64px 76px;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 560px;
  height: 560px;
  padding-block: 28px;
}

.practicePanel .cardMeta {
  display: block;
  width: min(620px, 100%);
  height: 24px;
  overflow: hidden;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.practicePanel .symbolWrap {
  width: min(620px, 94%);
  height: 360px;
  aspect-ratio: auto;
  margin: 0;
  padding-top: 14px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: visible;
  place-items: start center;
}

.practicePanel .mainSymbol {
  align-self: start;
}

.practicePanel .pinyinText {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(620px, 100%);
  min-height: 44px;
  padding: 6px 10px;
  overflow: visible;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}

.practicePanel .exampleText {
  display: -webkit-box;
  width: min(620px, 100%);
  height: 64px;
  min-height: 64px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25;
  text-align: center;
}

.practicePanel .timerText {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(620px, 100%);
  height: 64px;
  min-height: 64px;
  overflow: hidden;
  line-height: 1.35;
  text-align: center;
}

.practicePanel .feedbackText {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(620px, 100%);
  height: 76px;
  min-height: 76px;
  max-height: 76px;
  margin-top: 0;
  overflow: hidden;
  line-height: 1.35;
  text-align: center;
}

@media (max-width: 760px) {
  .practicePanel .practiceCard {
    grid-template-rows: 22px 292px 40px 58px 74px;
    min-height: 520px;
    height: 520px;
    padding: 24px 18px;
  }

  .practicePanel .symbolWrap {
    height: 292px;
  }

  .practicePanel .exampleText,
  .practicePanel .timerText {
    height: 58px;
    min-height: 58px;
  }

  .practicePanel .feedbackText {
    height: 74px;
    min-height: 74px;
    max-height: 74px;
  }
}

/* 修正识字表/写字表字形底部被裁切 */
.practicePanel .practiceCard {
  grid-template-rows: 24px 350px 44px 64px 76px;
  min-height: 584px;
  height: 584px;
}

.practicePanel .symbolWrap {
  height: 350px;
  overflow-y: visible;
}

.symbolCharBox {
  overflow: visible;
}

.symbolGlyph {
  line-height: 1.12;
  transform: translateY(-.025em) scale(.82);
}

.mainSymbol.wordSizedAnswer .symbolGlyph,
.mainSymbol.wordWritingGrid .symbolGlyph {
  transform: translateY(-.025em) scale(.82);
}

/* Keep the visible character centered in the tianzi grid on the main card. */
#mainSymbol .symbolCharBox {
  padding-top: 0;
}

#mainSymbol .symbolGlyph {
  line-height: 1;
  transform: translateY(-.045em) scale(.84);
}

#mainSymbol.wordSizedAnswer .symbolGlyph,
#mainSymbol.wordWritingGrid .symbolGlyph {
  transform: translateY(-.04em) scale(.82);
}

@media (max-width: 760px) {
  .practicePanel .practiceCard {
    grid-template-rows: 22px 310px 40px 58px 74px;
    min-height: 538px;
    height: 538px;
  }

  .practicePanel .symbolWrap {
    height: 310px;
  }
}

/* 首页 v2 微调：降低吉祥物干扰，提升路线卡可读性 */
.homeIntro {
  padding-top: 58px;
}

.homeIntro h1 {
  max-width: 610px;
  line-height: 1.02;
}

.homeTagline {
  max-width: 540px;
  min-height: 72px;
}

.homeMascot {
  display: none;
}

.homePanel {
  align-self: start;
}

.profileForm .primaryBtn {
  min-height: 58px;
  margin-top: 12px;
  font-size: 19px;
}

@media (max-width: 980px) {
  .homeMascot {
    right: 28px;
    bottom: 230px;
    opacity: .45;
  }
}

@media (max-width: 760px) {
  .homeTagline {
    min-height: 0;
  }

  .homeMascot {
    right: 8px;
    bottom: 150px;
    opacity: .32;
    transform: scale(.42);
  }
}

/* 首页最终版：清爽学习入口 */
.homeScreen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 34px;
}

.homeLayout {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  grid-template-areas:
    "intro panel"
    "load load";
  gap: 22px;
  align-items: stretch;
}

.homeIntro {
  grid-area: intro;
  min-height: 480px;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: clamp(34px, 5vw, 64px);
  border: 1px solid rgba(47, 166, 106, .18);
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(221, 246, 230, .84)),
    var(--kid-paper);
  box-shadow: var(--kid-shadow);
  text-align: left;
}

.homeIntro::after {
  display: none;
}

.homeIntro .brandMark {
  margin-bottom: 14px;
}

.homeIntro h1 {
  max-width: 100%;
  color: var(--kid-ink);
  font-size: clamp(58px, 8vw, 104px);
  line-height: .96;
  letter-spacing: 0;
}

.homeSubtitle {
  max-width: 600px;
  margin: 22px 0 0;
  color: var(--kid-ink-soft);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 850;
  line-height: 1.42;
}

.homePanel {
  grid-area: panel;
  align-self: stretch;
  display: grid;
  align-content: center;
  padding: 30px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .9);
}

.homePanelTitle {
  margin-bottom: 18px;
}

.homePanelTitle h2 {
  color: var(--kid-ink);
  font-size: 30px;
  font-weight: 950;
}

.homePanelTitle p {
  margin-top: 6px;
  color: var(--kid-ink-soft);
  font-size: 15px;
  font-weight: 800;
}

.homePanel .profileForm {
  display: grid;
  gap: 12px;
}

.homePanel .profileForm > .formRow {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.homePanel .profileForm > .formRow span {
  min-width: 0;
  color: var(--kid-ink-soft);
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.homePanel .profileForm > .formRow input,
.homePanel .profileForm > .formRow select {
  min-width: 0;
  min-height: 48px;
  font-size: 16px;
}

.homePanel .profileForm > .formRow input.fieldNeedsAttention {
  border-color: rgba(232, 107, 92, .72);
  box-shadow: 0 0 0 4px rgba(232, 107, 92, .14);
}

.wechatAccessCard {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 14px;
  border: 1px solid rgba(66, 165, 245, .2);
  border-radius: 16px;
  background: rgba(221, 242, 255, .48);
}

.wechatAccessCard[data-access="locked"] {
  border-color: rgba(255, 126, 117, .28);
  background: rgba(255, 235, 232, .58);
}

.wechatAccessCard.accessNeedsAttention {
  border-color: rgba(232, 107, 92, .62);
  box-shadow: 0 0 0 4px rgba(232, 107, 92, .16);
  animation: accessAttentionPulse 1.1s ease-in-out 2;
}

.wechatAccessCard[data-access="paid"] {
  border-color: rgba(42, 178, 118, .24);
  background: rgba(224, 249, 235, .64);
}

.wechatAccessText {
  display: grid;
  gap: 4px;
}

.wechatAccessText strong {
  color: var(--kid-ink);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.2;
}

.wechatAccessText p {
  margin: 0;
  color: var(--kid-ink-soft);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.wechatAccessActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.wechatAccessActions[hidden] {
  display: none;
}

.wechatAccessActions .plainBtn,
.wechatAccessActions .primaryBtn {
  min-height: 46px;
}

#wechatPayBtn {
  grid-column: 1 / -1;
}

#wechatPayBtn.accessNeedsAttention,
#enterAppBtn.accessNeedsAttention {
  box-shadow: 0 0 0 4px rgba(42, 178, 118, .2), 0 14px 28px rgba(42, 178, 118, .22);
}

@keyframes accessAttentionPulse {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-2px); }
}

.appDirectBoot {
  display: none;
  min-height: 100vh;
  padding: 24px;
  place-items: center;
}

html.bootAppView .homeScreen {
  display: none !important;
}

html.directAppView .homeScreen,
html.directAppView .appDirectBoot,
html.directEnglishView .homeScreen,
html.directEnglishView .appDirectBoot {
  display: none !important;
}

html.bootAppView .appDirectBoot {
  display: grid;
}

.appDirectBoot[hidden],
html.bootAppViewResolved .appDirectBoot {
  display: none !important;
}

.appDirectBootPanel {
  display: grid;
  width: min(420px, 100%);
  gap: 8px;
  padding: 28px;
  border: 1px solid rgba(42, 178, 118, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 24px 60px rgba(52, 88, 73, .14);
  color: var(--kid-ink);
}

.appDirectBootPanel strong {
  font-size: 26px;
  font-weight: 950;
}

.appDirectBootPanel span {
  color: var(--kid-ink-soft);
  font-size: 15px;
  font-weight: 800;
}

.wechatPaymentQrPanel {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(42, 178, 118, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
}

.wechatPaymentQrPanel[hidden] {
  display: none;
}

.wechatPaymentQrPanel img {
  width: 132px;
  height: 132px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(21, 76, 52, .12);
}

.wechatPaymentQrText {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.wechatPaymentQrText strong {
  color: var(--kid-ink);
  font-size: 16px;
  font-weight: 950;
}

.wechatPaymentQrText p {
  margin: 0;
  color: var(--kid-ink-soft);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.wechatPaymentQrText a {
  width: fit-content;
  color: var(--kid-leaf);
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
}

.wechatPaymentQrText a[hidden] {
  display: none;
}

.logoutAccountBtn {
  width: 100%;
  min-height: 42px;
}

.logoutAccountBtn[hidden] {
  display: none;
}

.learningCodeLoginRow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.learningCodeLoginRow input {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(66, 165, 245, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .84);
  color: var(--kid-ink);
  font-size: 15px;
  font-weight: 850;
  text-transform: uppercase;
}

.homeLoadRules {
  grid-area: load;
  padding: 18px 20px;
  border-radius: 22px;
}

.homeLoadHeader {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.homeLoadHeader h2 {
  font-size: 22px;
}

.homeLoadHeader p {
  color: var(--kid-ink-soft);
  font-size: 14px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .homeScreen {
    min-height: auto;
    padding: 18px;
  }

  .homeLayout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "panel"
      "load";
  }

  .homeIntro {
    min-height: auto;
  }

  .homeLoadHeader {
    display: block;
  }

  .homeLoadTable th,
  .homeLoadTable td {
    padding: 10px 8px;
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .homePanel .profileForm > .formRow {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 8px;
  }

  .homePanel .profileForm > .formRow input,
  .homePanel .profileForm > .formRow select {
    min-height: 46px;
    padding-inline: 10px;
    font-size: 15px;
  }

  .wechatPaymentQrPanel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .wechatPaymentQrText a {
    justify-self: center;
  }
}

/* 首页家长说明与小目标卡片 */
.homeSubtitle {
  display: none;
}

.homeParentNote {
  max-width: 660px;
  margin-top: 30px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(47, 166, 106, .18);
  border-radius: 24px;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--kid-soft-shadow);
}

.homeParentNote strong {
  display: block;
  margin-bottom: 10px;
  color: var(--kid-ink);
  font-size: calc(clamp(20px, 2.3vw, 28px) * 0.59);
  font-weight: 950;
  line-height: 1.35;
}

.homeParentSection + .homeParentSection {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(47, 166, 106, .16);
}

.homeNoticeSection {
  background: rgba(230, 250, 237, .38);
  border-radius: 18px;
  padding-inline: 16px;
  padding-bottom: 2px;
}

.homeParentNote p {
  color: var(--kid-ink-soft);
  font-size: calc(clamp(18px, 2.1vw, 25px) * 0.59);
  font-weight: 850;
  line-height: 1.75;
  text-align: left;
}

.subjectSwitch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(660px, 100%);
}

.subjectSwitchLink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 0 14px;
  border: 1px solid rgba(66, 165, 245, .3);
  border-radius: 18px;
  background: rgba(235, 248, 255, .88);
  color: var(--kid-ink);
  box-shadow: var(--kid-soft-shadow);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
}

.subjectSwitchLink:hover,
.subjectSwitchLink:focus-visible {
  border-color: rgba(66, 165, 245, .54);
  box-shadow: 0 16px 30px rgba(42, 116, 184, .16);
  outline: none;
}

.subjectSwitchLink.active {
  border-color: rgba(47, 166, 106, .42);
  background: rgba(221, 246, 230, .9);
  color: var(--kid-leaf);
}

.homeGoalCards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.homeGoalCards article {
  display: grid;
  align-content: center;
  min-height: 132px;
  padding: 20px;
  border: 1px solid rgba(47, 166, 106, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .76);
}

.homeGoalCards strong {
  color: var(--kid-ink);
  font-size: 19px;
  font-weight: 950;
  line-height: 1.25;
}

.homeGoalCards span {
  margin-top: 12px;
  color: var(--kid-leaf);
  font-size: 17px;
  font-weight: 950;
}

.homeGoalCards small {
  margin-top: 6px;
  color: var(--kid-ink-soft);
  font-size: 14px;
  font-weight: 850;
}

.homeGoalCards .limitlessGoal {
  border-color: rgba(46, 138, 246, .22);
  background: rgba(221, 242, 255, .62);
}

@media (max-width: 900px) {
  .subjectHomeSwitch .subjectSwitchLink {
    min-height: 58px;
    font-size: 18px;
  }

  .homeGoalCards {
    grid-template-columns: 1fr;
  }

  .homeGoalCards article {
    min-height: 110px;
  }
}

/* 练习卡可读性最终修正 */
.practicePanel .statusStrip {
  display: flex;
  min-height: auto;
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(47, 166, 106, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--kid-soft-shadow);
}

.practicePanel #statusText {
  color: var(--kid-ink);
  font-size: 17px;
  line-height: 1.45;
  white-space: normal;
}

.practicePanel .practiceCard {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  min-height: 0;
  height: auto;
  padding: 28px 24px;
  overflow: visible;
  row-gap: 12px;
}

.practicePanel .symbolWrap {
  min-height: 360px;
  height: auto;
  overflow: visible;
}

.practicePanel .pinyinText,
.practicePanel .exampleText,
.practicePanel .timerText,
.practicePanel .feedbackText {
  width: min(680px, 100%);
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

.practicePanel .exampleText {
  color: var(--kid-ink);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(38, 50, 56, .1);
  border-radius: 18px;
  padding: 10px 14px;
  font-weight: 950;
  text-shadow: none;
}

.practicePanel .timerText {
  color: var(--kid-ink-soft);
}

.practicePanel .feedbackText {
  color: var(--kid-ink);
}

@media (max-width: 760px) {
  .practicePanel .practiceCard {
    grid-template-rows: auto auto auto auto auto;
    min-height: 0;
    height: auto;
    padding: 22px 14px;
  }

  .practicePanel .symbolWrap {
    min-height: 320px;
    height: auto;
  }
}

/* 练习卡固定版面：防止按钮上下跳动 */
.practicePanel .practiceCard {
  display: grid;
  grid-template-rows: 26px 340px 38px 70px 56px 56px;
  align-items: center;
  min-height: 640px;
  height: 640px;
  padding: 28px 24px;
  overflow: visible;
  row-gap: 8px;
}

.practicePanel .symbolWrap {
  height: 340px;
  min-height: 340px;
  overflow: visible;
}

.practicePanel .cardMeta {
  height: 26px;
  min-height: 26px;
  overflow: hidden;
}

.practicePanel .pinyinText {
  height: auto;
  min-height: 38px;
  overflow: visible;
}

.practicePanel .exampleText {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  min-height: 70px;
  max-height: 70px;
  overflow: auto;
  line-height: 1.25;
}

.practicePanel .timerText {
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  overflow: auto;
  line-height: 1.35;
}

.practicePanel .feedbackText {
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  overflow: auto;
  line-height: 1.35;
}

.practicePanel .actionBar {
  min-height: 58px;
}

@media (max-width: 760px) {
  .practicePanel .practiceCard {
    grid-template-rows: 24px 290px 34px 62px 52px 52px;
    min-height: 565px;
    height: 565px;
    padding: 22px 14px;
  }

  .practicePanel .symbolWrap {
    height: 290px;
    min-height: 290px;
  }

  .practicePanel .exampleText {
    height: 62px;
    min-height: 62px;
    max-height: 62px;
  }

  .practicePanel .timerText,
  .practicePanel .feedbackText {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
  }
}

/* 词语贴近卡片内容 */
.practicePanel .practiceCard {
  row-gap: 0;
}

.practicePanel .exampleText {
  margin: 0;
}

.practicePanel .exampleText.weekendPauseText {
  font-size: 19px;
}

@media (max-width: 700px) {
  .practicePanel .exampleText.weekendPauseText {
    font-size: 17px;
  }
}

/* Final override: keep header confined to the left panel and avoid shifting the main card. */
.sidePanel.controlPanel .appHeader {
  position: sticky;
  top: 0;
  margin: 0 0 14px;
}

.subjectAppSwitch {
  width: 100%;
  margin-top: 10px;
}

.subjectAppSwitch .subjectSwitchLink {
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid rgba(66, 165, 245, .28);
  border-radius: 12px;
  background: rgba(235, 248, 255, .86);
  color: var(--kid-ink);
  box-shadow: none;
  font-size: 13px;
  font-weight: 900;
}

.subjectAppSwitch .subjectSwitchLink.active {
  border-color: rgba(47, 166, 106, .34);
  background: rgba(221, 246, 230, .86);
  color: var(--kid-leaf);
}

/* Align the middle word card with the left and right side panels. */
.practicePanel .practiceCard {
  margin-top: 0;
}

/* iPad/tablet stability: keep the main board and bottom buttons fully visible. */
.practicePanel .exampleText.loadPauseText {
  font-size: clamp(22px, 3.2cqw, 30px);
  line-height: 1.25;
}

@media (min-width: 900px) and (max-height: 820px) {
  .appShell {
    width: min(1280px, calc(100vw - 24px));
    padding: 12px 0 14px;
  }

  .mainGrid {
    gap: 14px;
    align-items: start;
  }

  .sidePanel {
    padding: 14px;
  }

  .softBtn,
  .plainBtn,
  .toolBtn,
  .primaryBtn,
  .dangerBtn,
  .modeTab {
    min-height: 48px;
  }

  .practicePanel {
    min-height: 0;
  }

  .practicePanel .practiceCard {
    grid-template-rows: 22px 260px 30px 52px 48px 48px;
    min-height: 488px;
    height: 488px;
    padding: 18px 20px;
    row-gap: 5px;
  }

  .practicePanel .symbolWrap {
    height: 260px;
    min-height: 260px;
    padding: 8px;
  }

  .mainSymbol.charGrid:not(.wordSizedAnswer) {
    --box-size: clamp(200px, 38cqw, 250px);
    --box-font: calc(var(--box-size) * var(--grid-font-ratio));
  }

  .mainSymbol.strokeAnswer {
    --stroke-card-size: clamp(200px, 38cqw, 250px);
  }

  .practicePanel .cardMeta {
    height: 22px;
    min-height: 22px;
    line-height: 22px;
  }

  .practicePanel .pinyinText {
    min-height: 30px;
    font-size: 22px;
  }

  .practicePanel .exampleText {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    padding: 8px 12px;
    overflow: hidden;
    font-size: clamp(22px, 3cqw, 28px);
  }

  .practicePanel .exampleText.loadPauseText {
    font-size: clamp(20px, 2.4cqw, 24px);
  }

  .practicePanel .timerText,
  .practicePanel .feedbackText {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    overflow: hidden;
    font-size: 17px;
  }

  .actionBar {
    gap: 8px;
    margin-top: 10px;
  }
}

/* Unified UI final override. Keep this block last. */
/* Homepage entry final override: account status stays secondary to Start Learning. */
.homePanelTitle h2 {
  margin: 0;
}

.homePanel .profileForm > .formRow {
  order: 1;
}

.learningCodeLoginRow {
  order: 2;
}

.learningCodeLoginRow[hidden] {
  display: none;
}

.wechatAccessCard {
  order: 5;
  margin: 0;
  padding: 14px;
}

.wechatAccessCard[data-account="logged"] {
  order: 3;
  background: rgba(255, 255, 255, .78);
}

.wechatAccessCard[data-account="guest"] {
  order: 5;
  background: rgba(231, 243, 255, .54);
}

#enterAppBtn {
  order: 4;
  min-height: 58px;
  font-size: 18px;
}

.wechatAccountName {
  margin: 0;
  color: var(--kid-ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.wechatAccountName[hidden] {
  display: none;
}

.wechatAccessActions {
  gap: 10px;
}

.wechatAccessActions[data-mode="account-row"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wechatAccessActions[data-mode="login-only"],
.wechatAccessActions[data-mode="logout-only"] {
  grid-template-columns: minmax(0, 1fr);
}

#wechatPayBtn {
  grid-column: auto;
}

.wechatAccessActions button[hidden] {
  display: none;
}

.wechatAccessActions .plainBtn,
.logoutAccountBtn {
  width: 100%;
  min-height: 42px;
  background: rgba(255, 255, 255, .82);
  color: var(--kid-ink);
}

:root {
  --kid-ink: #20362d;
  --kid-ink-soft: #53675f;
  --kid-muted: #7a8b84;
  --kid-paper: #f2faf4;
  --kid-cream: #fff8dd;
  --kid-mint: #e2f5e8;
  --kid-sky: #e7f3ff;
  --kid-leaf: #2f9462;
  --kid-blue: #2f7fd1;
  --kid-coral: #e86b5c;
  --kid-yellow: #f2c94c;
  --kid-line: rgba(37, 91, 63, .16);
  --kid-shadow: 0 18px 42px rgba(27, 70, 48, .12);
  --kid-soft-shadow: 0 10px 24px rgba(27, 70, 48, .08);
  --panel: rgba(255, 255, 255, .9);
  --panel-solid: #ffffff;
  --panel-soft: rgba(255, 255, 255, .72);
  --ui-radius: 16px;
  --ui-radius-sm: 12px;
  --ui-gap: 18px;
  --ui-left: 292px;
  --ui-right: 272px;
}

html,
body {
  min-height: 100%;
  color: var(--kid-ink);
  background:
    linear-gradient(135deg, rgba(226, 245, 232, .9), rgba(242, 250, 244, .96) 42%, rgba(231, 243, 255, .72)),
    var(--kid-paper);
  letter-spacing: 0;
}

body::before,
.homeIntro::after {
  display: none;
}

.homeScreen {
  min-height: 100vh;
  padding: clamp(18px, 3vw, 32px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(226, 245, 232, .34)),
    var(--kid-paper);
}

.homeLayout {
  width: min(1280px, calc(100vw - 32px));
  min-height: auto;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 420px);
  grid-template-areas:
    "intro panel"
    "load load";
  gap: var(--ui-gap);
  align-items: start;
}

.homeIntro {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.homeParentNote,
.homePanel,
.homeLoadRules,
.sidePanel,
.practiceCard,
.similarGamePanel,
.miniGamePanel,
.wrongToolPanel,
.overlayPanel {
  border: 1px solid var(--kid-line);
  border-radius: var(--ui-radius);
  background: var(--panel);
  box-shadow: var(--kid-soft-shadow);
  backdrop-filter: blur(14px);
}

.homeParentNote {
  max-width: none;
  margin-top: 16px;
  padding: clamp(18px, 2.2vw, 26px);
}

.homeNoticeSection {
  border: 1px solid rgba(47, 148, 98, .12);
  border-radius: var(--ui-radius-sm);
  background: rgba(226, 245, 232, .48);
  padding: 14px 16px;
}

.homeLoadRules {
  grid-area: load;
  padding: 18px;
}

.homeGoalCards article,
.wechatAccessCard,
.progressOverview,
.reviewSection,
.gameZone {
  border: 1px solid var(--kid-line);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, .74);
  box-shadow: none;
}

.subjectSwitch {
  width: 100%;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(47, 148, 98, .14);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, .66);
}

.subjectSwitchLink,
.subjectAppSwitch .subjectSwitchLink {
  min-width: 0;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--kid-ink-soft);
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subjectSwitchLink.active,
.subjectAppSwitch .subjectSwitchLink.active {
  border-color: rgba(47, 148, 98, .22);
  background: #ffffff;
  color: var(--kid-leaf);
  box-shadow: 0 8px 18px rgba(27, 70, 48, .08);
}

.appShell {
  width: min(1360px, calc(100vw - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 0 28px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.mainGrid {
  grid-template-columns: minmax(260px, var(--ui-left)) minmax(0, 1fr) minmax(244px, var(--ui-right));
  gap: var(--ui-gap);
  align-items: start;
}

.sidePanel {
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  overflow: auto;
  padding: 18px;
}

.controlPanel,
.reviewPanel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.sidePanel.controlPanel .appHeader {
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--kid-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brandMark,
.cardMeta,
.reviewSectionLabel {
  color: var(--kid-leaf);
  font-weight: 950;
  letter-spacing: 0;
}

.appShell .brandTitleRow h1 {
  color: var(--kid-ink);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
}

#englishAppShell,
#englishAppShell h1,
#englishAppShell h2,
#englishAppShell h3 {
  font-family: var(--app-font);
}

.modeTabs {
  padding: 6px;
  border: 1px solid rgba(47, 148, 98, .14);
  border-radius: var(--ui-radius);
  background: rgba(226, 245, 232, .5);
}

.modeTab {
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: var(--kid-ink-soft);
  box-shadow: none;
}

.modeTab.active {
  background: #ffffff;
  color: var(--kid-leaf);
  box-shadow: 0 8px 18px rgba(27, 70, 48, .08);
}

.formRow input,
.formRow select,
.learningCodeLoginRow input,
select,
input {
  min-height: 46px;
  border: 1px solid var(--kid-line);
  border-radius: var(--ui-radius-sm);
  background: #ffffff;
  color: var(--kid-ink);
  box-shadow: none;
}

.practicePanel {
  display: grid;
  gap: 14px;
  min-width: 0;
  min-height: calc(100vh - 40px);
  align-content: start;
}

.practicePanel .practiceCard {
  margin-top: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .88));
}

.symbolWrap {
  border-color: rgba(47, 148, 98, .12);
  border-radius: var(--ui-radius);
  background: linear-gradient(180deg, #fffefa, #f6fbf7);
}

.exampleText,
.feedbackText,
.timerText {
  border-radius: var(--ui-radius-sm);
}

.actionBar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.primaryBtn,
.softBtn,
.plainBtn,
.toolBtn,
.dangerBtn,
.modeTab {
  min-height: 46px;
  border-radius: var(--ui-radius-sm);
  font-weight: 950;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.primaryBtn {
  border: 0;
  background: linear-gradient(180deg, #37a66f, var(--kid-leaf));
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(47, 148, 98, .2);
}

.softBtn,
.toolBtn {
  border: 1px solid rgba(47, 127, 209, .16);
  background: var(--kid-sky);
  color: var(--kid-blue);
  box-shadow: none;
}

.plainBtn {
  border: 1px solid var(--kid-line);
  background: #ffffff;
  color: var(--kid-ink);
  box-shadow: none;
}

.dangerBtn {
  border: 0;
  background: linear-gradient(180deg, #f07869, var(--kid-coral));
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(232, 107, 92, .18);
}

.reviewNowBtn {
  background: linear-gradient(180deg, #f6d56d, var(--kid-yellow));
  color: var(--kid-ink);
}

.limitlessModeCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(47, 166, 106, .2);
  border-radius: var(--ui-radius-sm);
  background: rgba(230, 250, 237, .55);
}

.limitlessModeCard strong {
  display: block;
  color: var(--kid-ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
}

.limitlessModeCard p {
  margin: 4px 0 0;
  color: var(--kid-ink-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.limitlessModeCard .plainBtn {
  min-height: 42px;
  padding: 0 12px;
  white-space: nowrap;
}

.limitlessModeCard[data-active="true"] {
  border-color: rgba(232, 107, 92, .36);
  background: rgba(255, 242, 239, .72);
}

.dangerOutlineBtn {
  border-color: rgba(232, 107, 92, .42);
  color: var(--kid-coral);
}

.parentDashboardSection {
  padding: 14px 0 16px;
  border-bottom: 1px solid rgba(154, 106, 47, .18);
}

.parentDashboardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tinyHelpBtn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.parentDashboardGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.parentDashboardGrid span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid rgba(47, 166, 106, .14);
  border-radius: var(--ui-radius-sm);
  background: rgba(255, 255, 255, .72);
}

.parentDashboardGrid b {
  color: var(--kid-leaf);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.parentDashboardGrid small {
  color: var(--kid-ink-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

.practicePanel .pinyinText:not(:empty) {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1140px) {
  .appShell {
    width: calc(100vw - 20px);
    padding: 14px 0 18px;
  }

  .mainGrid {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 12px;
  }

  .reviewPanel {
    grid-column: 1 / -1;
    height: auto;
    position: static;
  }
}

@media (max-width: 820px) {
  .homeLayout,
  .mainGrid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "panel"
      "load";
  }

  .sidePanel {
    position: static;
    height: auto;
  }

  .actionBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .limitlessModeCard {
    grid-template-columns: 1fr;
  }

  .parentDashboardGrid {
    grid-template-columns: repeat(3, minmax(72px, 1fr));
  }
}

/* Frontend Design Pro pass: refined bamboo-paper depth and interaction polish. */
:root {
  --pro-glass: rgba(255, 255, 255, .82);
  --pro-glass-strong: rgba(255, 255, 255, .93);
  --pro-hairline: rgba(32, 54, 45, .11);
  --pro-highlight: rgba(255, 255, 255, .68);
  --pro-shadow: 0 22px 52px rgba(27, 70, 48, .10), 0 2px 0 rgba(255, 255, 255, .72) inset;
  --pro-shadow-soft: 0 12px 28px rgba(27, 70, 48, .075), 0 1px 0 rgba(255, 255, 255, .72) inset;
  --pro-focus: 0 0 0 4px rgba(47, 127, 209, .15);
}

html,
body {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(226, 245, 232, .72) 38%, rgba(231, 243, 255, .58)),
    repeating-linear-gradient(90deg, rgba(32, 54, 45, .018) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(32, 54, 45, .014) 0 1px, transparent 1px 24px),
    var(--kid-paper);
  font-variant-numeric: tabular-nums;
}

.homeScreen {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .54), rgba(226, 245, 232, .26)),
    repeating-linear-gradient(115deg, rgba(47, 148, 98, .025) 0 1px, transparent 1px 18px),
    var(--kid-paper);
}

.homeParentNote,
.homePanel,
.homeLoadRules,
.sidePanel,
.practiceCard,
.similarGamePanel,
.miniGamePanel,
.wrongToolPanel,
.overlayPanel,
.reviewSection,
.gameZone,
.homeGoalCards article,
.wechatAccessCard,
.progressOverview {
  border-color: var(--pro-hairline);
  background: linear-gradient(180deg, var(--pro-glass-strong), rgba(250, 254, 252, .84));
  box-shadow: var(--pro-shadow-soft);
}

.homePanel,
.practiceCard,
.sidePanel {
  box-shadow: var(--pro-shadow);
}

.homeParentNote,
.homeLoadRules,
.practiceCard {
  position: relative;
  overflow: hidden;
}

.homeParentNote::before,
.homeLoadRules::before,
.practiceCard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pro-highlight), transparent);
  pointer-events: none;
}

.subjectSwitch,
.modeTabs {
  background: rgba(255, 255, 255, .52);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
}

.subjectSwitchLink,
.modeTab,
.primaryBtn,
.softBtn,
.plainBtn,
.toolBtn,
.dangerBtn {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.subjectSwitchLink:hover,
.modeTab:hover,
.softBtn:hover,
.plainBtn:hover,
.toolBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(27, 70, 48, .08);
}

.primaryBtn:hover,
.dangerBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(47, 148, 98, .22);
}

.dangerBtn:hover {
  box-shadow: 0 16px 30px rgba(232, 107, 92, .2);
}

.primaryBtn:active,
.softBtn:active,
.plainBtn:active,
.toolBtn:active,
.dangerBtn:active,
.modeTab:active,
.subjectSwitchLink:active {
  transform: translateY(0);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 0;
  box-shadow: var(--pro-focus), 0 0 0 1px rgba(47, 127, 209, .28);
}

.formRow input,
.formRow select,
.learningCodeLoginRow input,
select,
input {
  background: linear-gradient(180deg, #ffffff, rgba(250, 254, 252, .92));
}

.symbolWrap {
  box-shadow: 0 20px 48px rgba(47, 148, 98, .06) inset;
}

.actionBar {
  padding-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .subjectSwitchLink,
  .modeTab,
  .primaryBtn,
  .softBtn,
  .plainBtn,
  .toolBtn,
  .dangerBtn {
    transition: none;
  }
}

/* Awesome shadcn/ui pass: consistent Card/Button/Input/Tabs/Badge primitives. */
:root {
  --cn-background: rgba(255, 255, 255, .94);
  --cn-card: rgba(255, 255, 255, .9);
  --cn-card-hover: rgba(255, 255, 255, .98);
  --cn-muted: rgba(226, 245, 232, .58);
  --cn-muted-hover: rgba(226, 245, 232, .76);
  --cn-border: rgba(32, 54, 45, .14);
  --cn-ring: rgba(47, 127, 209, .26);
  --cn-radius: 14px;
  --cn-radius-sm: 10px;
}

.homeParentNote,
.homePanel,
.homeLoadRules,
.sidePanel,
.practiceCard,
.similarGamePanel,
.miniGamePanel,
.wrongToolPanel,
.overlayPanel,
.reviewSection,
.gameZone,
.homeGoalCards article,
.wechatAccessCard,
.progressOverview {
  border: 1px solid var(--cn-border);
  border-radius: calc(var(--cn-radius) + 4px);
}

.primaryBtn,
.softBtn,
.plainBtn,
.toolBtn,
.dangerBtn,
.modeTab,
.subjectSwitchLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--cn-radius);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  user-select: none;
}

.primaryBtn {
  background: linear-gradient(180deg, #35a66f, #2f9462);
  box-shadow: 0 12px 24px rgba(47, 148, 98, .22);
}

.plainBtn {
  border-color: var(--cn-border);
  background: var(--cn-background);
}

.softBtn,
.toolBtn {
  border-color: rgba(47, 127, 209, .18);
  background: rgba(231, 243, 255, .78);
}

.dangerBtn {
  background: linear-gradient(180deg, #ef7568, #e86b5c);
}

.subjectSwitch,
.modeTabs {
  padding: 5px;
  border-color: var(--cn-border);
  border-radius: calc(var(--cn-radius) + 2px);
}

.subjectSwitchLink,
.modeTab {
  min-height: 40px;
  border-radius: var(--cn-radius-sm);
}

.subjectSwitchLink.active,
.subjectAppSwitch .subjectSwitchLink.active,
.modeTab.active {
  background: var(--cn-card-hover);
  box-shadow: 0 1px 2px rgba(27, 70, 48, .08), 0 1px 0 rgba(255, 255, 255, .86) inset;
}

.formRow input,
.formRow select,
.learningCodeLoginRow input,
select,
input {
  min-height: 46px;
  padding: 0 14px;
  border-color: var(--cn-border);
  border-radius: var(--cn-radius);
  font-size: 15px;
}

button:disabled,
.primaryBtn:disabled,
.softBtn:disabled,
.plainBtn:disabled,
.toolBtn:disabled,
.dangerBtn:disabled,
.modeTab:disabled {
  cursor: not-allowed;
  opacity: .48;
  transform: none;
  box-shadow: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  box-shadow: 0 0 0 4px rgba(47, 127, 209, .14), 0 0 0 1px var(--cn-ring);
}

.reviewSectionLabel,
.cardMeta,
.brandMark,
.homeProductKicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(47, 148, 98, .14);
  border-radius: 999px;
  background: rgba(226, 245, 232, .58);
  color: var(--kid-leaf);
  font-size: 12px;
}

.progressTrack,
.mini-track {
  overflow: hidden;
  border: 1px solid rgba(47, 148, 98, .1);
  background: rgba(226, 245, 232, .55);
}

/* shadcn pass fix: keep compact segmented controls readable for children. */
.modeTabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.modeTab {
  min-width: 0;
  padding: 0 10px;
  white-space: nowrap;
}

.reviewNowBtn {
  border-color: rgba(196, 151, 32, .24);
  background: linear-gradient(180deg, #f7d76a, var(--kid-yellow));
  color: var(--kid-ink);
}

/* Taste Design pass: bamboo-paper atmosphere + image-generation-ready visual rhythm. */
:root {
  --taste-canvas: #f3faf5;
  --taste-paper: #fbfefc;
  --taste-ink: #20362d;
  --taste-muted: #60766d;
  --taste-accent: #2f9462;
  --taste-border: rgba(32, 54, 45, .14);
  --taste-paper-line: rgba(32, 54, 45, .045);
  --taste-shadow: 0 18px 42px rgba(27, 70, 48, .105);
  --taste-soft-shadow: 0 8px 22px rgba(27, 70, 48, .07);
  --taste-radius: 18px;
}

html,
body {
  color: var(--taste-ink);
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", Arial, sans-serif;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(226, 245, 232, .76) 44%, rgba(231, 243, 255, .52)),
    repeating-linear-gradient(90deg, var(--taste-paper-line) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(32, 54, 45, .032) 0 1px, transparent 1px 30px),
    var(--taste-canvas);
}

.homeLayout,
.mainGrid {
  animation: tastePageIn .18s ease-out both;
}

.homeHeroTitle h1,
.brandTitleRow h1,
.homePanelTitle h2 {
  color: var(--taste-ink);
  letter-spacing: 0;
}

.homeSubtitle,
.homePanelTitle p,
.homeLoadHeader p,
.profileSummary,
.cardMeta {
  color: var(--taste-muted);
}

.homeHeroTitle {
  position: relative;
}

.homeHeroTitle::after {
  content: "";
  display: block;
  width: min(360px, 100%);
  height: 16px;
  margin-top: 16px;
  border: 1px solid rgba(47, 148, 98, .12);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(47, 148, 98, .18), transparent 36%, rgba(246, 213, 109, .35) 64%, transparent),
    repeating-linear-gradient(90deg, rgba(32, 54, 45, .12) 0 1px, transparent 1px 22px),
    rgba(255, 255, 255, .68);
  box-shadow: 0 8px 18px rgba(27, 70, 48, .055);
}

.homeParentNote,
.homePanel,
.homeLoadRules,
.sidePanel,
.practiceCard,
.reviewSection,
.gameZone,
.wrongToolPanel,
.overlayPanel,
.progressOverview,
.wechatAccessCard {
  border-color: var(--taste-border);
  border-radius: var(--taste-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(251, 254, 252, .88)),
    var(--taste-paper);
  box-shadow: var(--taste-soft-shadow);
}

.practiceCard,
.homePanel {
  box-shadow: var(--taste-shadow);
}

.homeParentSection p {
  max-width: 65ch;
}

.primaryBtn,
.subjectSwitchLink.active,
.modeTab.active {
  border-color: rgba(47, 148, 98, .22);
}

.primaryBtn {
  background: linear-gradient(180deg, #39aa73, var(--taste-accent));
}

.formRow input,
.formRow select,
.learningCodeLoginRow input,
select,
input {
  background:
    linear-gradient(180deg, #ffffff, rgba(251, 254, 252, .94)),
    var(--taste-paper);
}

.symbolWrap {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(251, 254, 252, .92)),
    var(--taste-paper);
}

.symbolWrap::after {
  background:
    linear-gradient(var(--grid-line) var(--grid-line-width), transparent var(--grid-line-width)),
    linear-gradient(90deg, var(--grid-line) var(--grid-line-width), transparent var(--grid-line-width));
}

@keyframes tastePageIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .homeLayout,
  .mainGrid {
    animation: none;
  }
}

/* Homepage compact desktop downloads */
.homeLayout {
  grid-template-areas:
    "intro panel"
    "load load";
}

.homeDownloadsCompact {
  width: min(580px, 100%);
  margin: 14px 0 16px;
  padding: 12px;
  border: 1px solid var(--taste-border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 0%, rgba(231, 243, 255, .9), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(251, 254, 252, .9)),
    var(--taste-paper);
  box-shadow: 0 12px 26px rgba(27, 70, 48, .07), 0 1px 0 rgba(255, 255, 255, .84) inset;
}

.downloadCompactHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.downloadCompactHeader strong {
  display: block;
  color: var(--taste-ink);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.2;
}

.downloadCompactHeader p {
  margin: 4px 0 0;
  color: var(--taste-muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.downloadMiniGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.downloadMiniCard {
  min-width: 0;
  padding: 10px 9px 9px;
  border: 1px solid rgba(32, 54, 45, .10);
  border-radius: 16px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 10px 22px rgba(27, 70, 48, .045);
  text-align: center;
}

.downloadMiniIcon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 auto 6px;
  border-radius: 14px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.downloadMiniIconMac {
  background: linear-gradient(145deg, #4778ff, #2f55df);
}

.downloadMiniIconWin {
  background:
    linear-gradient(90deg, #00a4ef 0 50%, #7fba00 50% 100%),
    linear-gradient(180deg, #f25022 0 50%, #ffb900 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.downloadMiniCard strong {
  display: block;
  color: var(--taste-ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
}

.downloadMiniCard p {
  min-height: 0;
  margin: 4px 0 8px;
  color: var(--taste-muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.downloadChoiceRow {
  display: grid;
  gap: 6px;
}

.downloadChoiceRow a {
  display: grid;
  place-items: center;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid rgba(46, 106, 246, .20);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(231, 243, 255, .90));
  color: #2f6bdf;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.downloadChoiceRow a:hover {
  transform: translateY(-1px);
  border-color: rgba(46, 106, 246, .42);
  background: linear-gradient(180deg, #ffffff, rgba(218, 235, 255, .96));
  box-shadow: 0 10px 18px rgba(46, 106, 246, .10);
}

@media (max-width: 980px) {
  .homeLayout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "panel"
      "load";
  }

  .downloadMiniGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .downloadMiniGrid {
    grid-template-columns: 1fr;
  }
}

/* Final depth pass: quiet 3D learning desk */
:root {
  --depth-canvas-top: #eef9f3;
  --depth-canvas-mid: #f8fcf8;
  --depth-canvas-bottom: #ecf7f0;
  --depth-panel: rgba(255, 255, 255, .9);
  --depth-panel-deep: rgba(246, 253, 249, .96);
  --depth-edge: rgba(31, 80, 56, .18);
  --depth-edge-strong: rgba(31, 80, 56, .26);
  --depth-highlight: rgba(255, 255, 255, .92);
  --depth-shadow-a: 0 28px 58px rgba(19, 66, 43, .16);
  --depth-shadow-b: 0 10px 0 rgba(38, 106, 72, .055);
  --depth-press: 0 4px 0 rgba(26, 84, 55, .16), 0 14px 24px rgba(20, 82, 52, .10);
  --depth-press-active: 0 1px 0 rgba(26, 84, 55, .18), 0 7px 14px rgba(20, 82, 52, .08);
  --depth-yellow: #f4cf58;
  --depth-red: #ef7b6b;
  --depth-blue: #6ba7e8;
}

html,
body {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .72), transparent 42%),
    repeating-linear-gradient(90deg, rgba(32, 86, 58, .045) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(0deg, rgba(32, 86, 58, .032) 0 1px, transparent 1px 36px),
    linear-gradient(180deg, var(--depth-canvas-top), var(--depth-canvas-mid) 46%, var(--depth-canvas-bottom));
}

.homeScreen,
.appShell {
  perspective: 1500px;
}

.homeLayout,
.appShell {
  transform-style: preserve-3d;
}

.homePanel,
.homeParentNote,
.homeLoadRules,
.homeDownloadsCompact,
.sidePanel,
.reviewSection,
.practiceCard,
.similarGamePanel,
.miniGamePanel,
.wrongToolPanel,
.progressOverview,
.gameZone,
.wechatAccessCard {
  border-color: var(--depth-edge);
  background:
    linear-gradient(180deg, var(--depth-highlight), rgba(255, 255, 255, .78) 18%, var(--depth-panel-deep)),
    var(--depth-panel);
  box-shadow:
    0 1px 0 var(--depth-highlight) inset,
    0 -1px 0 rgba(31, 80, 56, .05) inset,
    var(--depth-shadow-b),
    var(--depth-shadow-a);
  transform: translateZ(0);
}

.homePanel,
.sidePanel,
.practiceCard {
  position: relative;
}

.homePanel::after,
.sidePanel::after,
.practiceCard::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -11px;
  left: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(28, 84, 55, .12);
  filter: blur(12px);
  pointer-events: none;
  z-index: -1;
}

.homeHeroTitle h1,
.brandTitleRow h1,
.appShell .brandTitleRow h1,
.homePanelTitle h2 {
  text-shadow: 0 2px 0 rgba(255, 255, 255, .78), 0 14px 24px rgba(33, 80, 58, .10);
}

.homeDownloadsCompact {
  transform: translateZ(10px);
}

.downloadMiniCard,
.homeGoalCards article {
  border-color: rgba(31, 80, 56, .14);
  background:
    linear-gradient(180deg, #ffffff, rgba(247, 253, 250, .9));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .95) inset,
    0 5px 0 rgba(47, 148, 98, .075),
    0 18px 32px rgba(25, 76, 50, .10);
}

.downloadMiniIcon {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .5) inset,
    0 5px 0 rgba(31, 62, 58, .18),
    0 14px 20px rgba(31, 62, 58, .16);
}

.formRow input,
.formRow select,
.learningCodeLoginRow input,
select,
input {
  border-color: var(--depth-edge);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .96) inset,
    0 3px 0 rgba(31, 80, 56, .045),
    0 12px 20px rgba(26, 84, 55, .06);
}

.subjectSwitch,
.modeTabs,
.actionBar {
  border-color: rgba(31, 80, 56, .14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(238, 249, 243, .74));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .94) inset,
    0 8px 20px rgba(25, 76, 50, .08);
}

.primaryBtn,
.softBtn,
.plainBtn,
.dangerBtn,
.toolBtn,
.reviewNowBtn,
.modeTab,
.subjectSwitchLink,
.downloadChoiceRow a,
.similarLevelTabs button,
.similarGameActions button,
.miniGameActions button,
.wrongToolActions button {
  transform: translateY(0);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
  box-shadow: var(--depth-press);
}

.primaryBtn,
.reviewNowBtn {
  background: linear-gradient(180deg, #46bb80 0%, #2f9462 74%, #277a51 100%);
  color: #ffffff;
}

.dangerBtn {
  background: linear-gradient(180deg, #ff9284 0%, var(--depth-red) 76%, #cd5f53 100%);
  color: #ffffff;
}

.softBtn {
  background: linear-gradient(180deg, #eef8ff 0%, #d9edff 100%);
  color: #23669f;
}

.plainBtn,
.toolBtn,
.modeTab,
.subjectSwitchLink,
.downloadChoiceRow a {
  background: linear-gradient(180deg, #ffffff, #f2fbf6);
}

.modeTab.active,
.subjectSwitchLink.active {
  background: linear-gradient(180deg, #ffffff, #e7f6ed);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .95) inset,
    0 4px 0 rgba(47, 148, 98, .20),
    0 16px 24px rgba(25, 76, 50, .12);
}

.practicePanel {
  perspective: 1200px;
}

.practiceCard {
  min-height: min(680px, calc(100vh - 132px));
  transform: rotateX(.35deg) translateZ(8px);
  transform-origin: center top;
}

.symbolWrap {
  position: relative;
  border-color: rgba(158, 49, 49, .34);
  background:
    linear-gradient(180deg, #fffef4, #fffdf0 70%, #f7f0dd);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .98) inset,
    0 0 0 8px rgba(255, 255, 255, .54),
    0 9px 0 rgba(124, 49, 49, .10),
    0 30px 44px rgba(72, 42, 28, .12);
  transform: translateZ(18px);
}

.mainSymbol {
  text-shadow:
    0 2px 0 rgba(255, 255, 255, .72),
    0 8px 20px rgba(32, 20, 16, .14);
}

.practicePanel .cardMeta {
  transform: translateZ(20px);
}

.practicePanel .exampleText,
.practicePanel .timerText,
.practicePanel .feedbackText {
  border-color: rgba(31, 80, 56, .10);
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(246, 253, 249, .80));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 8px 18px rgba(25, 76, 50, .055);
}

.progressTrack,
.mini-track {
  box-shadow: inset 0 2px 5px rgba(31, 80, 56, .10), 0 1px 0 rgba(255, 255, 255, .85);
}

@media (hover: hover) {
  .homePanel:hover,
  .sidePanel:hover,
  .practiceCard:hover,
  .downloadMiniCard:hover {
    transform: translateY(-2px) translateZ(10px);
  }

  .primaryBtn:hover,
  .softBtn:hover,
  .plainBtn:hover,
  .dangerBtn:hover,
  .toolBtn:hover,
  .reviewNowBtn:hover,
  .modeTab:hover,
  .subjectSwitchLink:hover,
  .downloadChoiceRow a:hover {
    transform: translateY(-2px);
    box-shadow:
      0 6px 0 rgba(26, 84, 55, .16),
      0 18px 30px rgba(20, 82, 52, .14);
  }
}

.primaryBtn:active,
.softBtn:active,
.plainBtn:active,
.dangerBtn:active,
.toolBtn:active,
.reviewNowBtn:active,
.modeTab:active,
.subjectSwitchLink:active,
.downloadChoiceRow a:active {
  transform: translateY(3px);
  box-shadow: var(--depth-press-active);
}

@media (max-width: 760px) {
  .mainGrid {
    gap: 12px;
  }

  .practicePanel {
    min-height: auto;
    gap: 10px;
  }

  .practiceCard {
    min-height: auto;
    transform: none;
  }

  .symbolWrap {
    transform: none;
  }

  .homePanel::after,
  .sidePanel::after,
  .practiceCard::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .primaryBtn,
  .softBtn,
  .plainBtn,
  .dangerBtn,
  .toolBtn,
  .reviewNowBtn,
  .modeTab,
  .subjectSwitchLink,
  .downloadChoiceRow a,
  .homePanel,
  .sidePanel,
  .practiceCard,
  .downloadMiniCard {
    transition: none;
  }
}

/* Final homepage composition: calmer first screen, clearer reading rhythm */
.homeScreen {
  padding: clamp(22px, 3vw, 40px);
}

.homeLayout {
  width: min(1320px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  grid-template-areas:
    "intro panel"
    "story story"
    "load load";
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}

.homeIntro {
  grid-area: intro;
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  align-content: start;
  min-height: 0;
  padding: clamp(22px, 4vw, 54px) 0 0;
}

.homeIntro::after {
  display: none;
}

.homeHeroTitle {
  margin: 0;
  padding: clamp(10px, 2vw, 22px) clamp(4px, 1vw, 12px) 0;
}

.homeIntro .homeHeroTitle h1 {
  max-width: 760px;
  font-size: clamp(50px, 7vw, 92px);
  line-height: .98;
}

.homeHeroTitle .homeSubtitle {
  display: inline-flex;
  align-items: center;
  max-width: 560px;
  margin-top: 18px;
  padding: 9px 14px;
  border: 1px solid rgba(47, 148, 98, .16);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(237, 249, 243, .68));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 8px 18px rgba(25, 76, 50, .065);
  color: #315b45;
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 900;
  line-height: 1.35;
}

.homeHeroTitle::after {
  width: min(420px, 82vw);
  height: 18px;
  margin-top: 16px;
}

.homePanel {
  grid-area: panel;
  width: 100%;
  align-self: stretch;
  min-height: auto;
  padding: clamp(24px, 2.4vw, 34px);
}

.homePanelTitle {
  margin-bottom: 18px;
}

.homePanelTitle h2 {
  font-size: clamp(29px, 2.4vw, 40px);
}

.homePanel .profileForm {
  gap: 13px;
}

.limitlessModeCard,
.wechatAccessCard {
  margin-top: 2px;
}

.homeDownloadsCompact {
  width: min(690px, 100%);
  margin: 0;
  padding: 14px;
}

.downloadMiniGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.downloadMiniCard {
  padding: 12px;
}

.downloadChoiceRow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.downloadChoiceRow a {
  min-height: 34px;
  padding-inline: 7px;
  white-space: nowrap;
}

.homeParentNote {
  grid-area: story;
  max-width: none;
  margin: 0;
  padding: clamp(20px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
}

.homeParentSection + .homeParentSection {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.homeParentSection {
  min-width: 0;
}

.homeNoticeSection {
  display: grid;
  align-content: center;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(47, 148, 98, .14);
}

.homeParentNote strong {
  font-size: 17px;
}

.homeParentNote p {
  margin-bottom: 9px;
  line-height: 1.68;
}

.homeLoadRules {
  grid-area: load;
  margin: 0;
  padding: clamp(18px, 2vw, 24px);
}

.homeLoadRules {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
}

.homeLoadHeader h2 {
  margin-bottom: 8px;
}

.homeGoalCards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.homeGoalCards article {
  min-height: 112px;
  padding: 18px;
}

@media (max-width: 1040px) {
  .homeLayout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "panel"
      "story"
      "load";
  }

  .homePanel {
    align-self: start;
  }

  .homeDownloadsCompact {
    width: 100%;
  }

  .homeParentNote,
  .homeLoadRules {
    grid-template-columns: 1fr;
  }

  .homeGoalCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .homeScreen {
    padding: 16px;
  }

  .homeLayout {
    width: 100%;
    gap: 14px;
  }

  .homeHeroTitle {
    padding-top: 0;
  }

  .homeIntro .homeHeroTitle h1 {
    font-size: clamp(38px, 13vw, 54px);
  }

  .homeHeroTitle .homeSubtitle {
    font-size: 15px;
  }

  .downloadMiniGrid,
  .downloadChoiceRow,
  .homeGoalCards {
    grid-template-columns: 1fr;
  }

  .homeParentNote,
  .homePanel,
  .homeLoadRules,
  .homeDownloadsCompact {
    border-radius: 18px;
  }
}

/* Final homepage redesign: one balanced learning desk */
.homeScreen {
  padding: clamp(18px, 2.6vw, 34px);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 247, 214, .42), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(213, 236, 255, .56), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, .74), rgba(232, 247, 239, .70) 48%, rgba(242, 249, 246, .92)),
    repeating-linear-gradient(90deg, rgba(32, 86, 58, .035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(32, 86, 58, .028) 0 1px, transparent 1px 34px),
    #eef9f3;
}

.homeLayout {
  width: min(1240px, calc(100vw - 28px));
  grid-template-columns: minmax(0, 1fr) minmax(350px, 410px);
  grid-template-areas:
    "intro panel"
    "story panel"
    "load load";
  gap: clamp(14px, 1.8vw, 24px);
  align-items: start;
}

.homeIntro {
  grid-area: intro;
  position: relative;
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
  align-content: start;
  min-height: 0;
  padding: clamp(26px, 4vw, 46px);
  border: 1px solid rgba(31, 80, 56, .16);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(246, 253, 249, .90) 58%, rgba(232, 247, 239, .76)),
    var(--depth-panel);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .94) inset,
    0 10px 0 rgba(38, 106, 72, .045),
    0 30px 64px rgba(19, 66, 43, .13);
  overflow: hidden;
}

.homeIntro::before {
  content: "";
  position: absolute;
  right: -84px;
  bottom: -108px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(47, 148, 98, .10);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(244, 207, 88, .22), transparent 58%);
  pointer-events: none;
}

.homeIntro::after {
  display: none;
}

.homeHeroTitle {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
}

.homeIntro .homeHeroTitle h1 {
  max-width: 680px;
  font-size: clamp(48px, 6vw, 78px);
  line-height: 1.02;
}

.homeHeroTitle .homeSubtitle {
  display: inline-flex;
  max-width: min(100%, 610px);
  margin-top: 16px;
  padding: 9px 14px;
  font-size: clamp(15px, 1.35vw, 19px);
}

.homeHeroTitle::after {
  width: min(390px, 76vw);
  height: 16px;
  margin-top: 16px;
}

.homeDownloadsCompact {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 13px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(247, 253, 250, .76));
}

.downloadCompactHeader {
  margin-bottom: 9px;
}

.downloadMiniGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.downloadMiniCard {
  padding: 12px;
  border-radius: 16px;
}

.downloadChoiceRow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.downloadChoiceRow a {
  min-height: 34px;
  padding-inline: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.homePanel {
  grid-area: panel;
  position: sticky;
  top: clamp(18px, 2.6vw, 34px);
  width: 100%;
  align-self: start;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 30px;
}

.homePanelTitle {
  margin-bottom: 16px;
}

.homePanelTitle h2 {
  font-size: clamp(28px, 2.2vw, 36px);
}

.homePanel .profileForm {
  gap: 12px;
}

.homePanel .formRow input,
.homePanel .formRow select,
.learningCodeLoginRow input {
  min-height: 48px;
}

.limitlessModeCard,
.wechatAccessCard {
  margin-top: 0;
}

.homeParentNote {
  grid-area: story;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: none;
  margin: 0;
  padding: clamp(18px, 2vw, 24px);
  border-radius: 28px;
}

.homeParentSection + .homeParentSection {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.homeParentNote strong {
  margin-bottom: 8px;
  font-size: 16px;
}

.homeParentNote p {
  max-width: 72ch;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.56;
}

.homeNoticeSection {
  padding: 16px 18px;
  border: 1px solid rgba(47, 148, 98, .14);
  border-radius: 18px;
}

.homeNoticeSection p {
  max-width: 62ch;
}

.wechatAccessCard .homeNoticeSection,
.homeAccessFriendlyNote {
  margin-top: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(47, 148, 98, .14);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(246, 253, 249, .88), rgba(233, 249, 241, .72));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .78) inset,
    0 8px 18px rgba(25, 76, 50, .055);
}

.wechatAccessCard .homeNoticeSection strong,
.homeAccessFriendlyNote strong {
  display: block;
  margin-bottom: 6px;
  color: var(--kid-ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.2;
}

.wechatAccessCard .homeNoticeSection p,
.homeAccessFriendlyNote p {
  margin: 0 0 5px;
  color: var(--kid-ink-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.48;
}

.wechatAccessCard .homeNoticeSection p:last-child,
.homeAccessFriendlyNote p:last-child {
  margin-bottom: 0;
}

.homeLoadRules {
  grid-area: load;
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 20px);
  align-items: center;
  margin: 0;
  padding: clamp(18px, 2vw, 24px);
  border-radius: 28px;
}

.homeGoalCards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.homeGoalCards article {
  min-height: 108px;
  padding: 17px;
}

@media (max-width: 1040px) {
  .homeLayout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "panel"
      "story"
      "load";
  }

  .homePanel {
    position: relative;
    top: auto;
  }

  .homeLoadRules {
    grid-template-columns: 1fr;
  }

  .homeParentNote {
    grid-template-columns: 1fr;
  }

  .homeGoalCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .homeScreen {
    padding: 14px;
  }

  .homeLayout {
    width: 100%;
    gap: 14px;
  }

  .homeIntro {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .homeIntro .homeHeroTitle h1 {
    font-size: clamp(36px, 12vw, 52px);
  }

  .homeHeroTitle .homeSubtitle {
    display: flex;
    align-items: flex-start;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
  }

  .downloadMiniGrid,
  .downloadChoiceRow,
  .homeGoalCards {
    grid-template-columns: 1fr;
  }

  .homeParentNote,
  .homePanel,
  .homeLoadRules,
  .homeDownloadsCompact {
    border-radius: 20px;
  }
}

/* Keep the learning profile card visually anchored on the desktop home layout. */
@media (min-width: 1041px) {
  .homePanel {
    position: sticky;
    top: clamp(18px, 2.6vw, 34px);
    align-self: start;
    max-height: calc(100vh - 68px);
    overflow: auto;
    overscroll-behavior: contain;
    transform: none;
  }

  .homePanel:hover {
    transform: none;
  }
}

/* Learning profile card is a fixed form surface, not a floating 3D card. */
.homePanel,
.homePanel:hover,
.homePanel:focus-within,
.homePanel:active {
  transform: none !important;
}

.homePanel {
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

/* Final override: the learning profile panel must stay in the normal layout. */
.homePanel,
.homePanel:hover,
.homePanel:focus-within,
.homePanel:active {
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  transform: none !important;
}

.homePanel::after {
  display: none !important;
}