/* BeeBee 英语乐园 · 视觉规范
   色彩：奶油暖底 + 蜂蜜黄主色 + 糖果色辅色；文字用深紫灰（比纯黑柔和，对孩子眼睛友好）
   字体：英文学习内容用 Andika（SIL 为低龄识字设计，单层 a/g，与孩子手写一致）；标题与数字用 Baloo 2；中文用系统圆润黑体
   组件：大圆角、厚底"按下去"的按钮、≥48px 触控区；所有插画统一为 Fluent 3D；字体与图片全部本地化，不依赖任何外部 CDN */

@font-face { font-family: 'Andika'; font-weight: 400; font-display: swap; src: url(../fonts/andika-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Andika'; font-weight: 400; font-display: swap; src: url(../fonts/andika-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F; }
@font-face { font-family: 'Andika'; font-weight: 700; font-display: swap; src: url(../fonts/andika-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Baloo 2'; font-weight: 400 800; font-display: swap; src: url(../fonts/baloo2-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --bg: #FFF8EA; --bg2: #FFF0D2; --card: #FFFFFF;
  --ink: #3A2E5C; --ink2: #6E6490; --ink3: #A49CBC; --line: #F1E4C9; --line2: #E8D6B3;
  --honey: #FFBE1A; --honey-d: #E59A00; --honey-l: #FFF1C4;
  --sky: #38A6F5; --sky-d: #1C84D3; --grass: #2FBF7C; --grass-d: #1B9C61; --berry: #FF5C85; --berry-d: #DD3B66; --grape: #8B6CF6; --grape-d: #6B4ED9; --orange: #FF8A3D;
  --ok: #2FBF7C; --bad: #F0506E;
  --r-lg: 28px; --r: 22px; --r-sm: 16px;
  --sh: 0 3px 0 rgba(58, 46, 92, .05), 0 10px 26px rgba(58, 46, 92, .08);
  --sh-lg: 0 6px 0 rgba(58, 46, 92, .06), 0 18px 40px rgba(58, 46, 92, .14);
  --f-zh: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --f-round: "Baloo 2", var(--f-zh);
  --f-read: "Andika", "Baloo 2", var(--f-zh);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--f-zh); font-size: 16px; line-height: 1.55;
  background: radial-gradient(900px 420px at 50% -160px, #FFE6A3 0, rgba(255, 230, 163, 0) 70%), var(--bg);
  background-attachment: fixed; overscroll-behavior-y: none; -webkit-user-select: none; user-select: none;
}
input, textarea, select { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; touch-action: manipulation; }
button:disabled { opacity: .55; cursor: default; }
a { color: var(--sky-d); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
img { max-width: 100%; }
body.busy { cursor: progress; }
body.busy #app { pointer-events: none; opacity: .92; transition: opacity .2s .15s; }

.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-family: var(--f-round); font-weight: 700; color: var(--ink2); }
.boot img { animation: bounce 1.4s ease-in-out infinite; border-radius: 22px; }

/* ---------- 插画与图标 ---------- */
.art { width: 1em; height: 1em; object-fit: contain; vertical-align: -0.15em; display: inline-block; pointer-events: none; }
.art-group { display: inline-flex; gap: .06em; align-items: flex-end; }
.art-group .art { width: .82em; height: .82em; }
.art-i { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin: 0 .05em; }
.art-fallback { display: inline-block; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.ico-star { color: var(--honey); }
.ico-fire { color: var(--orange); }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-t)) 14px 10px; background: rgba(255, 248, 234, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
}
.tb-back { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--sh); display: grid; place-items: center; color: var(--ink); flex: none; }
.tb-back .ico { width: 24px; height: 24px; }
.tb-back:active { transform: scale(.92); }
.tb-space { width: 44px; flex: none; }
.tb-title { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--f-round); font-size: 19px; font-weight: 800; }
.tb-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-ic { width: 28px; height: 28px; }
.tb-stars { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px 0 10px; border-radius: 20px; background: #fff; box-shadow: var(--sh); font-family: var(--f-round); font-weight: 800; font-size: 17px; flex: none; }
.tb-stars .ico { width: 22px; height: 22px; }
.pulse { animation: pulse .4s ease; }

.content { max-width: 780px; margin: 0 auto; padding: 8px 16px calc(28px + var(--safe-b)); }
.hint { color: var(--ink2); font-size: 14.5px; margin: 4px 2px 14px; }
.small { font-size: 13px; }
.muted { color: var(--ink3); }
.flex1 { flex: 1; }
.sec { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 17px; font-weight: 800; margin: 22px 2px 10px; }
.sec small { font-size: 12.5px; font-weight: 500; color: var(--ink3); }
.sec-title { font-size: 18px; font-weight: 800; margin: 26px 4px 12px; }
.card { background: var(--card); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sh); margin-bottom: 12px; }
.card p { margin: 6px 0 0; color: var(--ink2); }
.card ul { margin: 8px 0; padding-left: 20px; color: var(--ink2); }
.card small { color: var(--ink3); }
.card.small { font-size: 13.5px; color: var(--ink2); }
.card.hl { background: var(--honey-l); box-shadow: inset 0 0 0 2px #FFDF85; }
.card.intro b { font-size: 16px; }
.note { margin: 18px 0; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .6); border: 2px dashed var(--line2); color: var(--ink2); font-size: 13.5px; text-align: center; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px;
  border-radius: 18px; background: #fff; color: var(--ink); font-weight: 700; font-size: 16px;
  box-shadow: 0 4px 0 var(--line2), 0 8px 18px rgba(58, 46, 92, .06); border: 2px solid var(--line);
  transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line2); }
.btn .art { width: 26px; height: 26px; }
.btn-primary { background: var(--honey); border-color: var(--honey); color: #3A2600; box-shadow: 0 4px 0 var(--honey-d), 0 10px 22px rgba(229, 154, 0, .28); }
.btn-primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--honey-d); }
.btn-fun { background: var(--berry); border-color: var(--berry); color: #fff; box-shadow: 0 4px 0 var(--berry-d), 0 10px 22px rgba(221, 59, 102, .25); }
.btn-fun:active:not(:disabled) { box-shadow: 0 1px 0 var(--berry-d); }
.btn.danger { color: var(--bad); }
.btn-big { min-height: 58px; font-size: 18px; border-radius: 20px; padding: 0 26px; }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 14px; box-shadow: 0 3px 0 var(--line2); }
.btn-icon { width: 50px; padding: 0; }
.btn.right, .opt.right { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 4px 0 var(--grass-d); }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 16px 0; }
.btn-next { display: flex; width: 100%; margin: 22px 0 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 42px; padding: 0 16px; border-radius: 21px; background: #fff; border: 2px solid var(--line); font-weight: 700; color: var(--ink2); box-shadow: 0 3px 0 var(--line); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 3px 0 #241a40; }
.chip.sm { min-height: 34px; padding: 0 12px; font-size: 14px; margin: 3px 2px; }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -4px 6px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; min-height: 42px; padding: 0 16px; border-radius: 21px; background: rgba(255, 255, 255, .7); font-weight: 700; color: var(--ink2); }
.tab.on { background: var(--ink); color: #fff; }

.input { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 16px; border: 2px solid var(--line); background: #fff; font: inherit; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--honey); box-shadow: 0 0 0 4px rgba(255, 190, 26, .22); }
.input-lg { min-height: 58px; font-size: 18px; font-family: var(--f-round); font-weight: 700; }
select.input { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form .sec { margin: 14px 2px 0; }
.fl { display: flex; flex-direction: column; gap: 6px; }
.fl > span { font-size: 14px; font-weight: 700; color: var(--ink2); }
.switch { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink2); cursor: pointer; padding: 6px 2px; }
.switch.center { justify-content: center; }
.switch input { -webkit-appearance: none; appearance: none; width: 46px; height: 28px; border-radius: 14px; background: #E2D9C6; position: relative; flex: none; transition: background .2s; cursor: pointer; margin: 0; }
.switch input::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.switch input:checked { background: var(--grass); }
.switch input:checked::after { transform: translateX(18px); }
input[type=range] { width: 100%; accent-color: var(--honey); }

/* ---------- 列表 ---------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.litem { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 14px; border-radius: var(--r); background: #fff; box-shadow: var(--sh); }
.litem:active { transform: scale(.985); }
.li-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--honey-l); color: var(--honey-d); flex: none; }
.li-art { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--bg2); font-size: 36px; flex: none; }
.li-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.li-text b { font-family: var(--f-read); font-size: 16.5px; }
.li-text small { color: var(--ink2); font-size: 13.5px; }
.li-tag { color: var(--ink3); font-size: 13px; flex: none; display: flex; align-items: center; }
.li-tag .ok { color: var(--ok); width: 24px; height: 24px; }
.later { opacity: .55; }
.hub-tile em, .topic-tile em { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--ink); color: #fff; }

/* ---------- 老师组件 ---------- */
.teacher { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 14px; }
.t-ava { width: 66px; height: 66px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 46px; background: #fff; box-shadow: 0 0 0 4px var(--cc, var(--honey)), var(--sh); position: relative; }
.teacher.talking .t-ava { animation: talk .5s ease-in-out infinite alternate; }
.bubble { position: relative; flex: 1; min-height: 66px; padding: 12px 16px; border-radius: 20px; background: #fff; box-shadow: var(--sh); display: flex; flex-direction: column; justify-content: center; }
.bubble::before { content: ''; position: absolute; left: -8px; top: 24px; width: 18px; height: 18px; background: #fff; transform: rotate(45deg); border-radius: 4px; }
.b-en { font-family: var(--f-read); font-size: 18px; font-weight: 700; position: relative; }
.b-en:empty::before { content: '…'; color: var(--ink3); }
.b-zh { font-size: 14px; color: var(--ink2); position: relative; }

/* ---------- 首页 ---------- */
.home { max-width: 780px; margin: 0 auto; padding: calc(12px + var(--safe-t)) 16px calc(30px + var(--safe-b)); }
.home-top { display: flex; align-items: center; gap: 8px; }
.kid-chip { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 6px; border-radius: 23px; background: #fff; box-shadow: var(--sh); font-family: var(--f-round); font-weight: 800; font-size: 17px; max-width: 46%; }
.kid-chip .art { width: 36px; height: 36px; }
.kid-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-chip { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px 0 9px; border-radius: 20px; background: #fff; box-shadow: var(--sh); font-family: var(--f-round); font-weight: 800; }
.stat-chip.fire .ico { color: var(--orange); }
.lock-btn { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border-radius: 20px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.lock-btn .ico { width: 18px; height: 18px; }
.notice { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 14px; border-radius: 16px; background: #E9F5FF; color: #1D5F92; font-size: 14px; }
.hero { display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; }
.hero-ava { width: 96px; height: 96px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 70px; background: #fff; box-shadow: 0 0 0 5px var(--tc), var(--sh-lg); }
.hero-bubble { position: relative; flex: 1; padding: 14px 18px; border-radius: 22px; background: #fff; box-shadow: var(--sh); }
.hero-bubble::before { content: ''; position: absolute; left: -8px; top: 50%; margin-top: -9px; width: 18px; height: 18px; background: #fff; transform: rotate(45deg); border-radius: 4px; }
.hero-bubble b { display: block; font-family: var(--f-read); font-size: 21px; position: relative; }
.hero-bubble span { font-size: 13.5px; color: var(--ink2); position: relative; }

.lesson-card {
  display: block; width: 100%; text-align: left; padding: 18px 18px 16px; border-radius: var(--r-lg); color: #3A2600; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #FFD54A 0%, #FFB21E 55%, #FF9A3C 100%); box-shadow: 0 6px 0 #E58A00, 0 18px 36px rgba(229, 138, 0, .3);
}
.lesson-card::after { content: ''; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.lesson-card:active { transform: translateY(3px); box-shadow: 0 2px 0 #E58A00; }
.lc-head { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.lc-head > div { flex: 1; }
.lc-head small { display: block; font-size: 13px; font-weight: 700; opacity: .8; }
.lc-head b { display: block; font-size: 20px; font-weight: 800; line-height: 1.3; margin-top: 2px; }
.lc-play { width: 60px; height: 60px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--orange); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); flex: none; animation: breathe 2.2s ease-in-out infinite; }
.lc-play .ico { width: 30px; height: 30px; margin-left: 4px; }
.lc-steps { display: flex; gap: 8px; margin-top: 16px; position: relative; z-index: 1; overflow-x: auto; scrollbar-width: none; }
.lc-steps::-webkit-scrollbar { display: none; }
.lc-steps span { flex: 1; min-width: 56px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 16px; background: rgba(255, 255, 255, .55); font-size: 30px; }
.lc-steps small { font-size: 12px; font-weight: 700; }
.trial-bar { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 14px; padding: 12px 16px; border-radius: 18px; background: #fff; box-shadow: var(--sh); font-size: 14.5px; color: var(--ink2); }
.trial-bar .ico { color: var(--berry); }
.trial-bar span { flex: 1; text-align: left; }
.trial-bar b { color: var(--berry-d); font-family: var(--f-round); font-size: 18px; }
.trial-bar em { font-style: normal; font-weight: 800; color: #fff; background: var(--berry); padding: 6px 12px; border-radius: 12px; font-size: 13px; }

.hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hub-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 14px 14px 12px; border-radius: var(--r); background: #fff; box-shadow: var(--sh); text-align: left; min-height: 128px; overflow: hidden; }
.hub-tile:active { transform: scale(.97); }
.hub-art { position: relative; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 46px; margin-bottom: 10px; }
.hub-art::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--tc); opacity: .16; }
.hub-art .art { position: relative; }
.hub-tile b { font-size: 17px; }
.hub-tile small { font-family: var(--f-round); color: var(--ink3); font-weight: 600; font-size: 13px; }
.hub-tile::after { content: ''; position: absolute; right: -24px; bottom: -24px; width: 80px; height: 80px; border-radius: 50%; background: var(--tc); opacity: .08; }

/* ---------- 每日课程进度条 ---------- */
.lesson-bar { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 12px 10px; position: sticky; top: calc(64px + var(--safe-t)); z-index: 19; background: rgba(255, 248, 234, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ls { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: .5; }
.ls i { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: var(--sh); font-style: normal; }
.ls small { font-size: 11px; font-weight: 700; color: var(--ink2); }
.ls.cur { opacity: 1; }
.ls.cur i { box-shadow: 0 0 0 3px var(--honey), var(--sh); transform: scale(1.1); }
.ls.done { opacity: 1; }
.ls.done i { background: var(--ok); color: #fff; }
.ls.done i .ico { width: 20px; height: 20px; }
.ls-line { flex: 0 1 18px; height: 3px; border-radius: 2px; background: var(--line2); margin-bottom: 16px; }

/* ---------- 单词卡 ---------- */
.topic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.topic-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 10px 14px; border-radius: var(--r); background: #fff; box-shadow: var(--sh); }
.topic-tile:active { transform: scale(.97); }
.tt-art { position: relative; width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; font-size: 52px; margin-bottom: 8px; }
.tt-art::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--tc); opacity: .16; }
.tt-art .art { position: relative; }
.topic-tile b { font-size: 16px; }
.topic-tile small { font-size: 12.5px; color: var(--ink3); font-family: var(--f-round); }
.prog { display: block; width: 80%; height: 6px; border-radius: 3px; background: #F3EBDB; margin-top: 10px; overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 3px; background: var(--tc, var(--grass)); }

.wcard { position: relative; margin: 4px auto 6px; max-width: 460px; padding: 22px 18px 20px; border-radius: 32px; background: #fff; box-shadow: var(--sh-lg); text-align: center; cursor: pointer; overflow: hidden; }
.wcard::before { content: ''; position: absolute; left: 50%; top: -120px; width: 340px; height: 300px; margin-left: -170px; border-radius: 50%; background: var(--tc, var(--honey)); opacity: .14; }
.w-art { position: relative; height: 170px; display: grid; place-items: center; font-size: 150px; }
.w-art .art { filter: drop-shadow(0 10px 14px rgba(58, 46, 92, .18)); }
.w-letter { width: 150px; height: 150px; border-radius: 40px; display: grid; place-items: center; font-family: var(--f-read); font-weight: 700; font-size: 96px; color: #fff; background: var(--tc, var(--honey)); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12); }
.w-en { position: relative; font-family: var(--f-read); font-size: 46px; font-weight: 700; line-height: 1.15; margin-top: 8px; letter-spacing: .5px; word-break: break-word; }
.w-ipa { position: relative; font-family: var(--f-read); font-size: 16px; color: var(--ink2); margin-top: 2px; }
.w-zh { position: relative; font-size: 22px; font-weight: 700; color: var(--ink2); margin-top: 2px; }
.w-zh small { font-size: 12px; font-weight: 600; color: var(--ink3); font-family: var(--f-round); background: var(--bg2); padding: 1px 6px; border-radius: 6px; vertical-align: 3px; }
.w-spell { display: flex; justify-content: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.w-spell span { width: 38px; height: 44px; border-radius: 12px; background: var(--bg2); display: grid; place-items: center; font-family: var(--f-read); font-weight: 700; font-size: 24px; transition: all .15s; }
.w-spell span.on { background: var(--honey); transform: translateY(-4px) scale(1.12); box-shadow: 0 4px 0 var(--honey-d); }
.w-ex { position: relative; margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: var(--bg); font-family: var(--f-read); font-size: 18px; font-weight: 700; }
.w-ex small { display: block; font-family: var(--f-zh); font-size: 14px; font-weight: 400; color: var(--ink2); }
.dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 12px 0 4px; min-height: 10px; flex-wrap: wrap; }
.dots i { width: 9px; height: 9px; border-radius: 5px; background: var(--line2); transition: all .2s; }
.dots i.done { background: var(--grass); }
.dots i.cur { width: 26px; background: var(--honey); }
.dots-n { font-family: var(--f-round); font-weight: 700; color: var(--ink3); font-size: 14px; }
.controls { display: flex; justify-content: center; gap: 14px; margin: 12px 0 6px; }
.cbtn { width: 62px; height: 62px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 var(--line2), 0 8px 18px rgba(58, 46, 92, .08); color: var(--ink); border: 2px solid var(--line); }
.cbtn .ico { width: 28px; height: 28px; }
.cbtn .art { width: 32px; height: 32px; }
.cbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line2); }
.cbtn-mic { background: var(--berry); border-color: var(--berry); color: #fff; box-shadow: 0 4px 0 var(--berry-d), 0 10px 22px rgba(221, 59, 102, .3); }
.cbtn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.cbtn.sm { width: 44px; height: 44px; }
.cbtn.sm .ico { width: 22px; height: 22px; }

/* ---------- 麦克风 ---------- */
.mic-overlay { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: center; padding: 0 16px calc(16px + var(--safe-b)); pointer-events: none; animation: slideUp .25s ease; }
.mic-card { pointer-events: auto; width: 100%; max-width: 420px; padding: 16px 18px 14px; border-radius: 28px; background: #fff; box-shadow: var(--sh-lg); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mic-hint { font-family: var(--f-read); font-size: 22px; font-weight: 700; text-align: center; }
.mic-hint:empty { display: none; }
.mic-btn { position: relative; width: 88px; height: 88px; display: grid; place-items: center; }
.mic-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--berry); opacity: .22; transition: transform .1s; animation: ring 1.6s ease-out infinite; }
.mic-core { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--berry); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(221, 59, 102, .4); }
.mic-core .ico { width: 34px; height: 34px; }
.mic-tip { font-size: 14px; color: var(--ink2); }
.mic-done { font-size: 13.5px; font-weight: 700; color: var(--ink2); padding: 6px 14px; border-radius: 14px; background: var(--bg); }

.pron-badge { position: fixed; top: calc(76px + var(--safe-t)); left: 50%; z-index: 70; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 22px; background: #fff; box-shadow: var(--sh-lg); animation: dropIn .35s cubic-bezier(.2, 1.4, .4, 1); white-space: nowrap; }
.pron-badge.out { opacity: 0; transform: translateX(-50%) translateY(-12px); transition: all .4s; }
.pb-stars { display: flex; gap: 2px; }
.pb-stars i { color: #E9E1CF; }
.pb-stars i.on { color: var(--honey); animation: pop .4s ease backwards; }
.pb-stars i:nth-child(2).on { animation-delay: .12s; }
.pb-stars i:nth-child(3).on { animation-delay: .24s; }
.pb-stars .ico { width: 28px; height: 28px; }
.pb-text { display: flex; flex-direction: column; line-height: 1.3; }
.pb-text b { font-size: 15px; }
.pb-text small { font-size: 12px; color: var(--ink2); }

/* ---------- 弹层 / 付费墙 ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(40, 30, 70, .42); display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .2s; }
.sheet-wrap.out { opacity: 0; transition: opacity .2s; }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; padding: 26px 20px calc(20px + var(--safe-b)); border-radius: 30px 30px 0 0; background: var(--bg); animation: slideUp .28s cubic-bezier(.2, .9, .3, 1); -webkit-overflow-scrolling: touch; }
@media (min-width: 600px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 30px; } }
.sheet-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--sh); color: var(--ink2); z-index: 2; }
.sh-title { display: flex; align-items: center; gap: 8px; font-size: 19px; margin: 0 40px 14px 0; }
.sh-title .art { width: 32px; height: 32px; }
.pw-head { text-align: center; padding: 6px 10px 10px; }
.pw-crown { width: 84px; height: 84px; animation: float 3s ease-in-out infinite; }
.pw-head h2 { font-size: 23px; margin-top: 6px; }
.pw-head p { margin: 6px 0 0; color: var(--ink2); }
.pw-benefits { list-style: none; margin: 10px 0 14px; padding: 14px 16px; border-radius: 20px; background: #fff; box-shadow: var(--sh); display: flex; flex-direction: column; gap: 8px; }
.pw-benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.pw-benefits .ico { color: #fff; background: var(--grass); border-radius: 50%; padding: 3px; width: 22px; height: 22px; margin-top: 1px; }
.pw-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pw-price { position: relative; padding: 14px 12px; border-radius: 20px; background: #fff; box-shadow: var(--sh); text-align: center; border: 2px solid transparent; display: flex; flex-direction: column; }
.pw-price.hot { border-color: var(--honey); background: var(--honey-l); }
.pw-price.hot::before { content: '推荐'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 1px 10px; border-radius: 10px; background: var(--berry); color: #fff; font-size: 11.5px; font-weight: 700; }
.pw-price b { font-size: 14px; color: var(--ink2); }
.pw-price strong { font-family: var(--f-round); font-size: 28px; font-weight: 800; line-height: 1.2; }
.pw-price small { font-size: 12px; color: var(--ink3); }
.pw-contact { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--sh); margin-bottom: 14px; }
.pw-contact p { margin: 0 0 8px; font-size: 14px; color: var(--ink2); }
.pw-qr { width: 108px; height: 108px; border-radius: 12px; flex: none; object-fit: cover; }
.pw-redeem { display: flex; gap: 8px; margin-top: 8px; }
.pw-redeem .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 1px; font-family: var(--f-round); font-weight: 700; }
.pw-redeem .input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--f-zh); font-weight: 400; }
.pw-err { color: var(--bad); font-size: 14px; margin: 6px 2px 0; min-height: 1em; }
.pw-foot { text-align: center; font-size: 12.5px; color: var(--ink3); margin: 10px 0 0; }

/* ---------- 庆祝 ---------- */
.celebrate { position: fixed; inset: 0; z-index: 90; background: rgba(40, 30, 70, .45); display: grid; place-items: center; padding: 20px; animation: fadeIn .2s; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -24px; animation: confetti linear forwards; }
.cele-card { position: relative; width: 100%; max-width: 360px; padding: 28px 22px 22px; border-radius: 32px; background: #fff; text-align: center; box-shadow: var(--sh-lg); animation: popIn .45s cubic-bezier(.2, 1.4, .4, 1); }
.cele-big { font-size: 110px; line-height: 1; margin-top: -86px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .18)); animation: bounce 1.2s ease-in-out infinite; }
.cele-msg { font-family: var(--f-read); font-size: 24px; font-weight: 700; margin: 12px 0 6px; }
.cele-stars { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 20px; background: var(--honey-l); color: var(--honey-d); font-family: var(--f-round); font-size: 22px; font-weight: 800; }
.cele-stars .ico { width: 28px; height: 28px; color: var(--honey); }
.cele-sticker { margin-top: 12px; font-weight: 700; color: var(--ink2); }
.cele-sticker .art { width: 54px; height: 54px; vertical-align: middle; animation: pop .6s ease; }
.cele-ok { width: 100%; margin-top: 18px; }

.toast { position: fixed; left: 50%; bottom: calc(110px + var(--safe-b)); transform: translateX(-50%); z-index: 100; max-width: 86vw; padding: 12px 20px; border-radius: 18px; background: rgba(40, 30, 70, .92); color: #fff; font-size: 14.5px; text-align: center; animation: toast 2.6s ease forwards; }
.fly-star { position: fixed; z-index: 95; width: 38px; height: 38px; margin: -19px 0 0 -19px; color: var(--honey); transition: all .7s cubic-bezier(.5, -0.3, .7, 1); pointer-events: none; filter: drop-shadow(0 3px 6px rgba(229, 154, 0, .5)); }
.fly-star .ico { width: 100%; height: 100%; }

/* ---------- 登录 / 建档 ---------- */
.auth { min-height: 100vh; max-width: 460px; margin: 0 auto; padding: calc(24px + var(--safe-t)) 18px calc(24px + var(--safe-b)); display: flex; flex-direction: column; justify-content: center; }
.auth-hero { text-align: center; margin-bottom: 18px; }
.auth-mascot { width: 128px; height: 128px; }
.auth-hero h1 { font-size: 26px; font-weight: 800; margin-top: 4px; }
.auth-hero p { margin: 4px 0 0; color: var(--ink2); }
.auth-card { padding: 20px 18px; border-radius: 28px; background: #fff; box-shadow: var(--sh-lg); display: flex; flex-direction: column; gap: 12px; }
.seg { display: flex; padding: 4px; border-radius: 18px; background: var(--bg); }
.seg button { flex: 1; min-height: 44px; border-radius: 14px; font-weight: 800; color: var(--ink2); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: var(--sh); }
.auth-msg { padding: 10px 14px; border-radius: 14px; background: #FFF0F2; color: #B42A49; font-size: 14px; }
.agree { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink2); cursor: pointer; }
.agree input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--honey-d); flex: none; }
.auth-err { color: var(--bad); font-size: 14px; margin: 0; min-height: 1.2em; }
.auth-foot { text-align: center; font-size: 13px; color: var(--ink3); margin: 0; }

.onboard { max-width: 640px; margin: 0 auto; padding: calc(18px + var(--safe-t)) 16px calc(28px + var(--safe-b)); }
.ob-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ob-mascot { width: 92px; height: 92px; flex: none; margin: 0; }
.ob-hero h1 { font-size: 22px; font-weight: 800; }
.ob-hero p { margin: 4px 0 0; color: var(--ink2); }
.ob-sec { margin: 18px 0; }
.ob-sec h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.ob-tip { margin: 0 0 10px; font-size: 13.5px; color: var(--ink2); }
.ob-sec > .input, .ob-sec > .chips, .ob-sec > .ava-grid { margin-top: 8px; }
.ava-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ava-opt { aspect-ratio: 1; border-radius: 20px; background: #fff; box-shadow: var(--sh); display: grid; place-items: center; font-size: 38px; border: 3px solid transparent; }
.ava-opt.on { border-color: var(--honey); background: var(--honey-l); transform: scale(1.05); }
.stage-preview { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: var(--sh); font-size: 32px; }
.stage-preview div { display: flex; flex-direction: column; font-size: 13.5px; color: var(--ink2); }
.stage-preview b { font-size: 15px; color: var(--ink); }
.teacher-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tch-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 22px; background: #fff; box-shadow: var(--sh); border: 3px solid transparent; text-align: center; }
.tch-opt.on { border-color: var(--tc); }
.tch-art { width: 60px; height: 60px; margin-bottom: 4px; }
.tch-opt b { font-family: var(--f-read); font-size: 16px; }
.tch-opt small { font-size: 12px; color: var(--ink2); }

.mascot { display: block; margin: 0 auto; overflow: visible; animation: hover 2.8s ease-in-out infinite; }
.mascot .m-wing-l { transform-box: view-box; transform-origin: 90px 80px; animation: flapL .5s ease-in-out infinite alternate; }
.mascot .m-wing-r { transform-box: view-box; transform-origin: 110px 80px; animation: flapR .5s ease-in-out infinite alternate; }
.mascot .m-eyes { transform-box: view-box; transform-origin: 100px 88px; animation: blink 4s infinite; }
.mascot.sleepy .m-eyes { transform: scaleY(.15); animation: none; }
.mascot.sleepy .m-wing-l, .mascot.sleepy .m-wing-r { animation: none; }

/* ---------- 贴纸 / 报告 ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-row div { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; border-radius: 20px; background: #fff; box-shadow: var(--sh); font-size: 28px; }
.stat-row .ico { width: 28px; height: 28px; }
.stat-row b { font-family: var(--f-round); font-size: 22px; line-height: 1.2; }
.stat-row small { font-size: 12px; color: var(--ink2); }
.next-sticker { position: relative; margin: 14px 0; padding: 12px 16px; border-radius: 18px; background: #fff; box-shadow: var(--sh); font-size: 14px; color: var(--ink2); overflow: hidden; }
.next-sticker span { position: relative; z-index: 1; }
.next-sticker b { color: var(--honey-d); font-family: var(--f-round); font-size: 17px; }
.next-sticker i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--honey-l); }
.stickers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.stk { aspect-ratio: 1; border-radius: 22px; display: grid; place-items: center; font-size: 42px; background: rgba(255, 255, 255, .5); border: 2px dashed var(--line2); color: var(--ink3); }
.stk span { font-family: var(--f-round); font-size: 22px; font-weight: 800; }
.stk.got { background: #fff; border: 0; box-shadow: var(--sh); }

.report-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 44px; }
.report-head div { display: flex; flex-direction: column; font-size: 16px; }
.report-head small { font-size: 13px; color: var(--ink2); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-grid div { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; border-radius: 18px; background: #fff; box-shadow: var(--sh); }
.stat-grid b { font-family: var(--f-round); font-size: 24px; line-height: 1.2; }
.stat-grid small { font-size: 12px; color: var(--ink2); }
.week { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 22px 14px 8px; border-radius: 20px; background: #fff; box-shadow: var(--sh); }
.wk { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.wk-bar { position: relative; width: 70%; max-width: 30px; border-radius: 8px 8px 4px 4px; background: linear-gradient(var(--honey), var(--orange)); }
.wk-bar em { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink2); font-family: var(--f-round); }
.wk small { font-size: 12px; color: var(--ink2); }
.themes-rep { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--sh); }
.trow { display: grid; grid-template-columns: 100px 1fr 44px; gap: 8px; align-items: center; font-size: 14px; }
.trow .bar { position: relative; height: 10px; border-radius: 5px; background: #F3EBDB; overflow: hidden; }
.trow .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #BDE9D2; border-radius: 5px; }
.trow .bar i.m { background: var(--grass); }
.trow small { text-align: right; color: var(--ink3); font-family: var(--f-round); }
.lg { display: inline-block; width: 12px; height: 8px; border-radius: 3px; background: #BDE9D2; margin: 0 2px 0 8px; }
.lg.m { background: var(--grass); }
.acct-card { padding: 18px; border-radius: 24px; background: #fff; box-shadow: var(--sh); margin-bottom: 12px; }
.acct-card.vip { background: linear-gradient(135deg, #3A2E5C, #5A4793); color: #fff; }
.ac-top { display: flex; align-items: center; gap: 12px; }
.ac-ic { width: 52px; height: 52px; }
.ac-top div { display: flex; flex-direction: column; }
.ac-top b { font-size: 17px; word-break: break-all; }
.ac-top small { font-size: 13px; opacity: .8; }
.ac-bar { height: 8px; border-radius: 4px; background: #F3EBDB; margin-top: 12px; overflow: hidden; }
.ac-bar i { display: block; height: 100%; background: var(--berry); border-radius: 4px; }

/* ---------- 家长门禁 ---------- */
.gate { max-width: 420px; margin: 30px auto 0; text-align: center; }
.gate-ic { width: 72px; height: 72px; margin: 0 auto 8px; border-radius: 24px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.gate-ic .ico { width: 34px; height: 34px; }
.gate p { color: var(--ink2); margin: 6px 0; }
.gate-q { font-family: var(--f-round); font-size: 52px; font-weight: 800; margin: 10px 0 18px; }
.gate-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gate-opt { min-height: 66px; border-radius: 20px; background: #fff; font-family: var(--f-round); font-size: 28px; font-weight: 800; box-shadow: 0 4px 0 var(--line2); border: 2px solid var(--line); }
.gate-opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line2); }
.gate-opt:disabled { opacity: 1; }
.gate-opt.right { background: var(--ok); color: #fff; border-color: var(--ok); box-shadow: 0 4px 0 var(--grass-d); }
.gate-opt.wrong { background: #FFE8EC; color: var(--bad); border-color: #FFC2CE; box-shadow: 0 4px 0 #FFC2CE; }
.gate-msg { min-height: 48px; margin-top: 16px !important; font-size: 15px; }
.gate-msg.err { color: var(--bad); font-weight: 700; padding: 10px 14px; border-radius: 14px; background: #FFF0F2; animation: shake .45s; }

/* ---------- 儿歌 ---------- */
.song-head { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 24px; background: #fff; box-shadow: var(--sh); }
.sh-art { width: 96px; height: 96px; flex: none; border-radius: 26px; background: var(--honey-l); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 62px; position: relative; }
.sh-art em { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 12px; font-weight: 700; background: var(--ink); color: #fff; padding: 2px 10px; border-radius: 10px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.song-head h2 { font-family: var(--f-read); font-size: 21px; }
.song-head p { margin: 4px 0 0; color: var(--ink2); font-size: 13.5px; }
.about-card { margin-top: 12px; padding: 16px 18px; border-radius: 24px; background: #FFFDF6; box-shadow: inset 0 0 0 2px #FFE7A3; }
.ab-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ab-head b { font-size: 16px; }
.about-card p { margin: 8px 0 0; font-size: 15px; color: var(--ink2); line-height: 1.7; }
.ab-words { margin-top: 8px; }
.ab-words .chip { font-family: var(--f-read); }
.ab-tip { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px !important; padding: 10px 12px; border-radius: 14px; background: #fff; }
.ab-tip .ico { color: var(--sky); margin-top: 3px; }
.song-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 12px; }
.song-actions .btn { flex: 1 1 auto; }
.song-actions .btn-icon { flex: none; }
.lyrics { display: flex; flex-direction: column; gap: 8px; }
.lyrics hr { border: 0; border-top: 2px dashed var(--line2); margin: 6px 20px; }
.ly { padding: 12px 16px; border-radius: 18px; background: #fff; box-shadow: var(--sh); cursor: pointer; transition: all .2s; }
.ly-en { font-family: var(--f-read); font-size: 18px; font-weight: 700; }
.ly-zh { font-size: 14px; color: var(--ink2); }
.ly.on { background: var(--honey); box-shadow: 0 4px 0 var(--honey-d); transform: scale(1.02); }
.ly.on .ly-zh { color: #5A3E00; }

/* ---------- 绘本 ---------- */
.book-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.book-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0 12px; border-radius: 22px; background: #fff; box-shadow: var(--sh); overflow: hidden; }
.bk-cover { width: 100%; height: 110px; display: grid; place-items: center; font-size: 72px; background: linear-gradient(160deg, #E8F4FF, #FFF1D6); margin-bottom: 10px; }
.book-tile b { font-family: var(--f-read); font-size: 15.5px; padding: 0 8px; line-height: 1.3; }
.book-tile small { color: var(--ink2); font-size: 13px; }
.book-tile .tag { margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink3); }
.book { position: relative; border-radius: 30px; background: #fff; box-shadow: var(--sh-lg); overflow: hidden; }
.scene { height: 210px; display: grid; place-items: center; font-size: 104px; background: linear-gradient(170deg, #DDF0FF 0%, #F2FAFF 55%, #E7F7DF 56%, #D5F0C6 100%); }
.page-text { padding: 18px 20px 6px; font-family: var(--f-read); font-size: 24px; font-weight: 700; line-height: 1.55; }
.page-text .w { border-radius: 8px; padding: 0 2px; cursor: pointer; transition: background .15s; }
.page-text .w.on { background: var(--honey); }
.page-zh { padding: 0 20px 18px; color: var(--ink2); font-size: 15px; min-height: 18px; }
.word-pop { position: absolute; left: 50%; top: 14px; transform: translate(-50%, -12px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 18px; background: rgba(40, 30, 70, .9); color: #fff; transition: all .2s; white-space: nowrap; }
.word-pop.show { opacity: 1; transform: translate(-50%, 0); }
.word-pop .art { width: 34px; height: 34px; }
.word-pop b { font-family: var(--f-read); font-size: 20px; }
.word-pop small { font-family: var(--f-read); opacity: .8; }
.q-progress { text-align: center; color: var(--ink3); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.q-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 460px; margin: 0 auto; }
.q-opt { aspect-ratio: 1.15; border-radius: 26px; background: #fff; box-shadow: 0 5px 0 var(--line2), var(--sh); display: grid; place-items: center; font-size: 84px; border: 3px solid transparent; }
.q-opt:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--line2); }
.q-opt.right { border-color: var(--ok); background: #E9FBF2; animation: pop .4s; }
.q-opt.txt { font-family: var(--f-read); font-size: 26px; font-weight: 700; aspect-ratio: auto; min-height: 92px; padding: 8px; }

/* ---------- 字母拼读 ---------- */
.letter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.letter-tile { position: relative; aspect-ratio: .9; border-radius: 22px; background: #fff; box-shadow: var(--sh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.letter-tile:active { transform: scale(.95); }
.lt-big { font-family: var(--f-read); font-weight: 700; font-size: 30px; line-height: 1; }
.lt-big i { font-style: normal; color: var(--berry); margin-left: 2px; }
.lt-art { width: 30px; height: 30px; }
.lt-ok { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; color: var(--ok); }
.letter-tile.done { background: #F1FBF6; }
.cvc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cvc-tile { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; border-radius: 20px; background: #fff; box-shadow: var(--sh); font-size: 40px; }
.cvc-tile b { font-family: var(--f-read); font-size: 18px; }
.sight-box { margin-top: 18px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: var(--sh); text-align: center; color: var(--ink2); }
.sight-word { font-family: var(--f-read); font-size: 44px; font-weight: 700; color: var(--ink); }
.sight-sen { font-family: var(--f-read); font-size: 20px; color: var(--ink); margin-top: 6px; }
.sight-sen mark { background: var(--honey-l); color: var(--berry-d); border-radius: 6px; padding: 0 3px; }
.chip.sight { font-family: var(--f-read); font-size: 17px; }
.letter-card { padding: 18px; border-radius: 30px; background: #fff; box-shadow: var(--sh-lg); text-align: center; }
.lc-big { display: flex; justify-content: center; gap: 18px; font-family: var(--f-read); font-weight: 700; font-size: 120px; line-height: 1.05; cursor: pointer; }
.lc-big span:last-child { color: var(--berry); }
.lc-key { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 54px; margin-top: 6px; }
.lc-key b { font-family: var(--f-read); font-size: 32px; }
.lc-key u { color: var(--berry); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.lc-sound { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 16px; border-radius: 16px; background: var(--honey-l); color: #6A4A00; font-weight: 700; font-family: var(--f-read); }
.lc-tip { margin-top: 8px; font-size: 14px; color: var(--ink2); }
.blend-art { width: 150px; height: 150px; margin: 6px auto; border-radius: 40px; background: #fff; box-shadow: var(--sh-lg); display: grid; place-items: center; font-size: 110px; }
.blend-art .q { font-family: var(--f-round); font-size: 72px; font-weight: 800; color: var(--line2); }
.blend-tiles { display: flex; justify-content: center; gap: 10px; margin: 18px 0 4px; }
.btile { width: 76px; height: 86px; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 var(--line2); border: 2px solid var(--line); font-family: var(--f-read); font-size: 46px; font-weight: 700; transition: all .15s; }
.btile.on { background: var(--honey); border-color: var(--honey); box-shadow: 0 5px 0 var(--honey-d); transform: translateY(-4px); }

.rule-card { padding: 16px 18px; border-radius: 22px; background: var(--honey-l); margin-bottom: 12px; }
.rule-card .mono { margin-top: 6px; font-family: var(--f-read); font-size: 19px; font-weight: 700; }
.mono { font-family: var(--f-read); }
.fill-q { text-align: center; font-family: var(--f-read); font-size: 24px; font-weight: 700; margin: 10px 0; }
.blank { display: inline-block; min-width: 60px; border-bottom: 3px solid var(--honey); color: var(--berry-d); }
.opt { font-family: var(--f-read); }
.done-msg { text-align: center; font-weight: 800; font-size: 18px; color: var(--grass-d); padding: 14px; }

/* ---------- 角色对话 ---------- */
.char-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.char-tile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 6px; border-radius: 22px; background: #fff; box-shadow: var(--sh); }
.char-tile:active { transform: scale(.96); }
.ct-art { position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; margin-bottom: 6px; }
.ct-art::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--tc); opacity: .2; }
.ct-art .art { position: relative; }
.char-tile b { font-family: var(--f-read); font-size: 14.5px; line-height: 1.25; }
.char-tile small { font-size: 12px; color: var(--ink2); }
.char-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; background: #fff; box-shadow: var(--sh); margin-bottom: 14px; }
.ch-ava { width: 82px; height: 82px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 58px; background: #fff; box-shadow: 0 0 0 4px var(--tc), var(--sh); }
.char-hero p { margin: 0; color: var(--ink2); font-size: 14.5px; }
.chat-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 12px; }
.chat-head .ch-ava { width: 92px; height: 92px; font-size: 64px; }
.chat-head .ch-ava.talking { animation: talk .45s ease-in-out infinite alternate; }
.chat-head b { font-family: var(--f-read); }
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 90%; animation: msgIn .3s ease; }
.msg.kid { align-self: flex-end; flex-direction: row-reverse; }
.m-ava { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 26px; flex: none; box-shadow: var(--sh); }
.m-body { padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: #fff; box-shadow: var(--sh); font-family: var(--f-read); font-size: 17px; font-weight: 700; }
.m-body small { display: block; font-family: var(--f-zh); font-size: 13.5px; font-weight: 400; color: var(--ink2); }
.msg.kid .m-body { background: var(--sky); color: #fff; border-radius: 20px 20px 6px 20px; }
.answers { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ans { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 56px; padding: 8px 16px; border-radius: 18px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line2); font-family: var(--f-read); font-size: 17px; font-weight: 700; }
.ans:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line2); }
.ans .art { width: 32px; height: 32px; }
.ans .ico { color: var(--ink3); }
.ans-mic { background: var(--berry); border-color: var(--berry); color: #fff; box-shadow: 0 4px 0 var(--berry-d); justify-content: center; font-family: var(--f-zh); }
.ans-mic .ico { color: #fff; }
.ans-skip { justify-content: center; font-family: var(--f-zh); }
.free-hint { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: 16px; background: var(--honey-l); font-size: 14px; color: #6A4A00; }
.free-hint b { font-family: var(--f-read); }

/* ---------- 游戏 ---------- */
.round { display: flex; justify-content: center; gap: 6px; margin: 4px 0 14px; }
.round i { width: 26px; height: 8px; border-radius: 4px; background: var(--line2); }
.round i.done { background: var(--grass); }
.round i.cur { background: var(--honey); }
.memory { display: grid; gap: 10px; max-width: 520px; margin: 0 auto; }
.memory.cols-3 { grid-template-columns: repeat(3, 1fr); }
.memory.cols-4 { grid-template-columns: repeat(4, 1fr); }
.mcard { position: relative; aspect-ratio: .82; perspective: 600px; }
.mcard > span { position: absolute; inset: 0; border-radius: 20px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .35s; box-shadow: var(--sh); }
.m-back { background: linear-gradient(145deg, #FFD54A, #FFB21E); font-size: 44px; }
.m-face { background: #fff; transform: rotateY(180deg); font-size: 54px; }
.m-face.txt { font-family: var(--f-read); font-size: 19px; font-weight: 700; padding: 4px; text-align: center; word-break: break-word; }
.mcard.flip .m-back { transform: rotateY(180deg); }
.mcard.flip .m-face { transform: rotateY(360deg); }
.mcard.matched .m-face { background: #E9FBF2; box-shadow: 0 0 0 3px var(--ok); }
.balloon-head { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.balloon-head b { font-family: var(--f-read); font-size: 30px; color: var(--berry); }
.balloon-head #cnt { font-family: var(--f-round); color: var(--ink3); }
.sky { position: relative; height: 62vh; min-height: 380px; border-radius: 30px; background: linear-gradient(#BFE4FF, #EAF6FF); overflow: hidden; box-shadow: inset 0 -30px 40px rgba(255, 255, 255, .6); }
.balloon { position: absolute; bottom: -120px; width: 78px; height: 96px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 8%, transparent 9%), var(--bc); box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .1); animation: rise linear forwards; display: grid; place-items: center; }
.balloon::after { content: ''; position: absolute; bottom: -26px; left: 50%; width: 2px; height: 28px; background: rgba(58, 46, 92, .3); }
.balloon span { font-family: var(--f-read); font-size: 34px; font-weight: 700; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.balloon.popped { animation: popOut .3s forwards; }
.spell-art { width: 130px; height: 130px; margin: 0 auto; border-radius: 36px; background: #fff; box-shadow: var(--sh-lg); display: grid; place-items: center; font-size: 96px; }
.slots { display: flex; justify-content: center; gap: 8px; margin: 18px 0; }
.slot { width: 48px; height: 58px; border-radius: 14px; border: 3px dashed var(--line2); display: grid; place-items: center; font-family: var(--f-read); font-size: 32px; font-weight: 700; }
.slot.fill { border: 0; background: var(--honey); box-shadow: 0 4px 0 var(--honey-d); }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tile-l { width: 58px; height: 64px; border-radius: 18px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line2); font-family: var(--f-read); font-size: 32px; font-weight: 700; }
.tile-l.used { opacity: .25; }
.built { min-height: 64px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0; padding: 10px; border-radius: 20px; border: 3px dashed var(--line2); }
.wtile { padding: 10px 16px; border-radius: 16px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line2); font-family: var(--f-read); font-size: 20px; font-weight: 700; }
.wtile.on { background: var(--honey); border-color: var(--honey); box-shadow: 0 3px 0 var(--honey-d); }
.wtile.used { opacity: .25; }
.ph { color: var(--ink3); font-size: 14px; align-self: center; }

/* ---------- 剑桥词库 ---------- */
.level-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.level-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border-radius: 24px; background: #fff; box-shadow: var(--sh); border-left: 6px solid var(--tc); }
.level-card:active { transform: scale(.985); }
.lv-art { width: 60px; height: 60px; font-size: 54px; flex: none; }
.lv-text { flex: 1; display: flex; flex-direction: column; }
.lv-text b { font-size: 17px; }
.lv-text small { color: var(--ink2); font-size: 13px; }
.lv-text .prog { width: 100%; }
.level-card > .ico { color: var(--ink3); }
.level-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 22px; background: #fff; box-shadow: var(--sh); margin-bottom: 14px; font-size: 48px; }
.level-head div { display: flex; flex-direction: column; font-size: 16px; }
.level-head small { font-size: 13px; color: var(--ink2); }
.word-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.wchip { display: inline-flex; flex-direction: column; padding: 6px 10px; border-radius: 12px; background: #fff; font-family: var(--f-read); font-weight: 700; font-size: 15px; line-height: 1.25; box-shadow: 0 2px 0 var(--line); }
.wchip small { font-family: var(--f-zh); font-weight: 400; font-size: 11.5px; color: var(--ink2); }
.wchip.got { background: #E9FBF2; }

/* ---------- 查词翻译 ---------- */
.search-bar { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 0 18px; min-height: 54px; border-radius: 27px; background: #fff; box-shadow: var(--sh); color: var(--ink3); font-size: 15px; text-align: left; border: 2px solid var(--line); }
.search-bar .ico { color: var(--sky); width: 24px; height: 24px; }
.dict-box { padding: 14px; border-radius: 24px; background: #fff; box-shadow: var(--sh); margin-bottom: 16px; }
.dict-input { display: flex; gap: 8px; }
.dict-input .input { flex: 1; min-width: 0; }
.dict-input .btn { min-height: 58px; }
.dict-sug { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 10px; }
.dict-box .muted { margin: 4px 4px 0; }
.dict-loading { text-align: center; color: var(--ink2); padding: 20px 0; }
.dict-bee { width: 90px; height: 90px; }
.d-sen { position: relative; font-family: var(--f-read); font-size: 28px; font-weight: 700; line-height: 1.35; margin-top: 6px; }
.d-alts { position: relative; font-size: 13.5px; color: var(--ink2); margin-top: 6px; }
.d-bd { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.d-w { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 12px; background: #fff; box-shadow: 0 2px 0 var(--line); }
.d-w b { font-family: var(--f-read); font-size: 17px; }
.d-w small { font-size: 12px; color: var(--ink2); }
.d-rel { margin-top: 12px !important; font-weight: 700; color: var(--ink) !important; }
.d-ex { gap: 10px; }
.d-ex .li-icon { cursor: pointer; }
.d-ex .li-text b { font-size: 17px; }
.center { text-align: center; }

/* ---------- 休息 ---------- */
.rest { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 20px; background: linear-gradient(#2E2A5C, #4B3F88); }
.rest-card { text-align: center; color: #fff; max-width: 360px; }
.rest-mascot { width: 150px; height: 150px; }
.rest-card h2 { font-size: 26px; margin-top: 10px; }
.rest-card p { opacity: .85; }
.rest-card .btn { margin-top: 10px; }

/* ---------- 动画 ---------- */
.bounce { animation: bounce .7s ease; }
.pop-in { animation: popIn .45s cubic-bezier(.2, 1.4, .4, 1); }
.float { display: inline-block; animation: float 3s ease-in-out infinite; }
.shake { animation: shake .45s; }
.wiggle { animation: wiggle .5s ease 2; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 60% { transform: translateY(-6px); } }
@keyframes popIn { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes pulse { 50% { transform: scale(1.18); } }
@keyframes talk { from { transform: scale(1) rotate(-2deg); } to { transform: scale(1.06) rotate(2deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ring { 0% { opacity: .35; } 100% { opacity: .05; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dropIn { from { transform: translateX(-50%) translateY(-30px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
@keyframes toast { 0% { opacity: 0; transform: translateX(-50%) translateY(10px); } 10%, 85% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; } }
@keyframes confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(var(--r, 360deg)); opacity: .7; } }
@keyframes msgIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { to { transform: translateY(calc(-62vh - 240px)); } }
@keyframes popOut { to { transform: scale(1.6); opacity: 0; } }
@keyframes flapL { from { transform: rotate(0); } to { transform: rotate(-14deg); } }
@keyframes flapR { from { transform: rotate(0); } to { transform: rotate(14deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- 平板 / 大屏 ---------- */
@media (min-width: 640px) {
  .hub { grid-template-columns: repeat(4, 1fr); }
  .topic-grid { grid-template-columns: repeat(3, 1fr); }
  .book-grid { grid-template-columns: repeat(3, 1fr); }
  .letter-grid { grid-template-columns: repeat(6, 1fr); }
  .cvc-grid { grid-template-columns: repeat(6, 1fr); }
  .char-grid { grid-template-columns: repeat(4, 1fr); }
  .teacher-grid { grid-template-columns: repeat(4, 1fr); }
  .stickers { grid-template-columns: repeat(6, 1fr); }
  .w-art { height: 210px; font-size: 190px; }
  .w-en { font-size: 56px; }
  .sky { height: 66vh; }
}
@media (max-width: 360px) {
  .w-en { font-size: 38px; }
  .ava-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-grid, .stat-row { grid-template-columns: repeat(2, 1fr); }
  .letter-grid, .cvc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}