/* 小梨学英语 - 黄色系主题，适配手机与平板 */
:root {
  --yellow: #FFC93C;
  --yellow-deep: #FFB800;
  --orange: #FF9F1C;
  --orange-deep: #F77F00;
  --green: #06D6A0;
  --ink: #4A3900;
  --ink-soft: #8a7a3a;
  --bg: #FFF9E8;
  --card: #ffffff;
  --radius: 1.1rem;
  --shadow: 0 4px 16px rgba(255, 184, 0, .18);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, var(--yellow) 0%, var(--bg) 240px);
  color: var(--ink);
}
.hidden { display: none !important; }

/* ---------- 通用 ---------- */
.btn-primary {
  width: 100%; padding: .9rem; border: none; border-radius: 999px;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  color: #7a5200; font-size: 1.05rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 0 #e0a300;
}
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #e0a300; }
.btn-ghost {
  padding: .7rem 1.2rem; border: none; border-radius: 999px;
  background: #FFF3CF; color: #9a6b00; font-weight: 600; cursor: pointer;
}
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem; margin: 0 1rem 1rem;
}

/* ---------- 雪梨吉祥物（原创） ---------- */
.mascot { position: relative; }
.mascot::before {
  content: ""; display: block;
  background: url("mascot.svg") no-repeat center / contain;
}
.mascot-big::before { width: 96px; height: 96px; margin: 0 auto; }
.mascot-small::before { width: 34px; height: 34px; display: block; }

/* ---------- 登录 ---------- */
.auth-view { max-width: 420px; margin: 0 auto; padding: 2.5rem 1rem 3rem; }
.auth-hero { text-align: center; padding: 1.5rem 0 1.8rem; }
.auth-hero h1 { font-size: 1.7rem; letter-spacing: .05em; }
.auth-hero h1.app-name {
  font-size: clamp(1.1rem, 4.9vw, 1.45rem);
  line-height: 1.5;
  letter-spacing: .02em;
  padding: 0 .3rem;
  text-wrap: balance;
}
.auth-hero p { color: #9a7a1a; margin-top: .3rem; }
.auth-card { background: #fff; border-radius: 1.4rem; box-shadow: var(--shadow); padding: 1.2rem; }
.auth-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.auth-tab {
  flex: 1; padding: .55rem; border: none; border-radius: 999px;
  background: #FFF3CF; color: #9a6b00; font-weight: 600; cursor: pointer;
}
.auth-tab.active { background: linear-gradient(180deg, var(--yellow), var(--yellow-deep)); color: #7a5200; }
.auth-card label { display: block; font-size: .85rem; color: var(--ink-soft); margin: .7rem 0; }
.auth-card input, .auth-card select {
  width: 100%; margin-top: .3rem; padding: .7rem .9rem; font-size: 1rem;
  border: 1.5px solid #f0e2b0; border-radius: .8rem; background: #FFFEF7; color: var(--ink);
}
.auth-error { color: #e5484d; font-size: .85rem; margin: .4rem 0; }
.auth-card .btn-primary { margin-top: .8rem; }

/* ---------- 主框架（flex 三段布局：顶栏 / 内容 / tab 栏，tab 恒吸底） ---------- */
#main-view {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
}
.topbar {
  flex: none;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem;
  padding-top: calc(.6rem + env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--yellow) 0%, rgba(255, 201, 60, .92) 100%);
  backdrop-filter: blur(8px);
}
.topbar-title { font-weight: 800; font-size: .95rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-chip {
  background: #fff; border-radius: 999px; padding: .25rem .8rem;
  font-weight: 800; color: var(--orange-deep); font-size: .9rem; box-shadow: var(--shadow);
}
#page {
  flex: 1 1 auto; width: 100%; max-width: 560px; margin: 0 auto;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 1rem 0 1.5rem;
}
@media (min-width: 760px) { #page { max-width: 760px; } }

.tabbar {
  flex: none;
  display: flex; justify-content: space-around; width: 100%; max-width: 760px; margin: 0 auto;
  background: #fff; box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
}
body.focus-mode .tabbar, body.focus-mode .topbar { display: none; }
body.focus-mode #main-view { height: 100vh; height: 100dvh; }
.tab {
  flex: 1; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .72rem; color: #b9a86a; padding: .3rem 0;
}
.tab .tab-ico { font-size: 1.35rem; filter: grayscale(1) opacity(.5); }
.tab.active { color: var(--orange-deep); font-weight: 700; }
.tab.active .tab-ico { filter: none; }

/* ---------- 打卡 ---------- */
.checkin-card { text-align: center; }
.checkin-streak { font-size: 2.2rem; font-weight: 900; color: var(--orange-deep); }
.checkin-streak small { font-size: .95rem; color: var(--ink-soft); font-weight: 600; }
.milestones { display: flex; gap: .5rem; margin-top: .9rem; }
.milestone {
  flex: 1; background: #FFF6DF; border-radius: .9rem; padding: .6rem .2rem;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
}
.milestone .paw { font-size: 1.4rem; filter: grayscale(1) opacity(.35); }
.milestone.hit { background: linear-gradient(180deg, #FFE9A8, #FFD66B); }
.milestone.hit .paw { filter: none; }
.milestone b { font-size: .8rem; color: var(--orange-deep); }
.milestone span { font-size: .68rem; color: var(--ink-soft); }
.checkin-card .btn-primary { margin-top: 1rem; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.stat-grid .card { margin: 0; text-align: center; padding: .8rem .4rem; }
.stat-grid b { font-size: 1.4rem; color: var(--orange-deep); display: block; }
.stat-grid span { font-size: .75rem; color: var(--ink-soft); }

/* ---------- 单词书 ---------- */
.book-head { display: flex; align-items: center; gap: .8rem; }
.book-head img.cover { width: 64px; height: 88px; object-fit: cover; border-radius: .5rem; box-shadow: var(--shadow); }
.book-head h2 { font-size: 1.15rem; }
.book-head p { color: var(--ink-soft); font-size: .85rem; }
.book-stats { display: flex; gap: 1.4rem; margin-top: .6rem; }
.book-stats div b { font-size: 1.25rem; color: var(--orange-deep); }
.book-stats div span { font-size: .75rem; color: var(--ink-soft); margin-left: .25rem; }
.unit-tabs { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 1rem .6rem; }
.unit-tab {
  flex-shrink: 0; padding: .45rem 1rem; border: none; border-radius: 999px;
  background: #fff; color: var(--ink-soft); font-weight: 700; cursor: pointer; box-shadow: var(--shadow);
}
.unit-tab.active { background: linear-gradient(180deg, var(--yellow), var(--yellow-deep)); color: #7a5200; }
.seg-tabs { display: flex; margin: 0 1rem .8rem; border-radius: 1rem 1rem 0 0; overflow: hidden; box-shadow: var(--shadow); }
.seg-tab { flex: 1; padding: .7rem; border: none; font-weight: 800; font-size: 1rem; background: #FFD966; color: #8a6a00; cursor: pointer; }
.seg-tab:first-child { border-radius: 1rem .0 0 0; }
.seg-tab:last-child { border-radius: 0 1rem 0 0; }
.seg-tab.active { background: #fff; color: var(--orange); }
.tool-row { display: flex; align-items: center; gap: .45rem; margin: 0 1rem .7rem; flex-wrap: wrap; }
.book-picker .caret { font-size: .7rem; opacity: .65; margin-left: .25rem; }
.picker-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(60,40,0,.35);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4.5rem 1rem 1rem;
  animation: fadeIn .15s ease;
}
.picker-panel {
  background: #fff; border-radius: 1.2rem; box-shadow: var(--shadow);
  padding: .6rem; width: 100%; max-width: 420px;
  max-height: 70vh; overflow-y: auto;
}
.picker-title { font-weight: 800; color: #9a7a1a; font-size: .9rem; padding: .4rem .6rem .5rem; }
.picker-item {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .55rem .7rem; border: none; background: transparent;
  border-radius: .9rem; font-size: 1rem; font-weight: 600; color: #5b4a12;
  cursor: pointer; text-align: left;
}
.picker-item:active { background: #FFF3CF; }
.picker-item.on { background: #FFF3CF; }
.picker-item img {
  width: 34px; height: 46px; object-fit: cover; border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18); flex: none;
}
.picker-item span { flex: 1; }
.picker-item em { color: #e8a013; font-style: normal; font-weight: 800; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 跟读评分 ---------- */
.mic-warn {
  background: #FFF3CF; color: #9a6b00; border-radius: .9rem;
  padding: .6rem .8rem; margin: 0 1rem .6rem; font-size: .85rem; line-height: 1.5;
}
.speech-progress { margin: 0 1rem .6rem; background: #fff; border-radius: 1rem; box-shadow: var(--shadow); padding: .65rem .9rem; }
.sp-info { display: flex; justify-content: space-between; font-size: .9rem; color: #7a6a35; margin-bottom: .35rem; }
.sp-info b.great { color: #2e9e5b; } .sp-info b.good { color: #e8a013; } .sp-info b.soso { color: #e06b3c; }
.sp-bar { height: 8px; background: #FFF3CF; border-radius: 999px; overflow: hidden; }
.sp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--yellow), var(--yellow-deep)); border-radius: 999px; transition: width .4s; }
.rec-tip {
  position: absolute; z-index: 20; top: 8px; left: 50%; transform: translateX(-50%);
  background: #333; color: #fff; font-size: .78rem; padding: .35rem .6rem;
  border-radius: .6rem; white-space: nowrap; max-width: 88%; overflow: hidden;
  text-overflow: ellipsis; pointer-events: none; box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.rec-tip.s3 { background: #1f7a44; } .rec-tip.s2 { background: #a8741a; } .rec-tip.s1 { background: #c25a2b; }
.word-card { position: relative; }
.summary-panel { text-align: center; }
.sum-title { font-size: 1.15rem; font-weight: 800; color: #5b4a12; padding-top: .5rem; }
.sum-stars { font-size: 1.6rem; letter-spacing: .15em; margin: .4rem 0 .1rem; }
.sum-avg { font-size: 2.6rem; font-weight: 900; color: #e8a013; line-height: 1.2; }
.sum-avg small { font-size: 1rem; font-weight: 700; color: #9a7a1a; }
.sum-msg { color: #7a6a35; font-size: .92rem; margin: .3rem 0 .7rem; }
.sum-words { display: flex; flex-direction: column; gap: .3rem; max-height: 34vh; overflow-y: auto; margin-bottom: .9rem; }
.sum-word { display: flex; justify-content: space-between; background: #FFFBEE; border-radius: .7rem; padding: .45rem .8rem; font-weight: 600; color: #5b4a12; }
.sum-word b.great { color: #2e9e5b; } .sum-word b.good { color: #e8a013; } .sum-word b.soso { color: #e06b3c; }
.sum-btns { display: flex; gap: .6rem; }
.sum-btns button { flex: 1; }
.chip {
  padding: .35rem .8rem; border-radius: 999px; border: none; cursor: pointer;
  background: #fff; color: var(--ink-soft); font-size: .8rem; font-weight: 600; box-shadow: var(--shadow);
}
.chip.on { background: linear-gradient(180deg, var(--yellow), var(--yellow-deep)); color: #7a5200; }
.word-list { padding: 0 1rem; }
.word-card {
  background: #fff; border-radius: 1rem; box-shadow: var(--shadow);
  padding: .9rem 1rem; margin-bottom: .7rem; display: flex; align-items: center; gap: .8rem;
  border: 2px solid transparent; cursor: pointer;
}
.word-card.active { border-color: var(--yellow-deep); }
.word-main { flex: 1; min-width: 0; }
.word-en { font-size: 1.15rem; font-weight: 800; }
.word-ipa { color: #b08a2a; font-size: .9rem; margin-top: .1rem; }
.word-cn { color: var(--orange-deep); font-size: .92rem; margin-top: .2rem; }
.word-cn.blurred, .word-en.blurred { filter: blur(6px); user-select: none; }
.word-side {
  display: flex; flex-direction: column; justify-content: center;
  align-items: stretch; gap: .45rem; flex: none; width: 136px;
}
.pill {
  border: none; background: #FFF3CF; border-radius: 999px;
  padding: .62rem .45rem; font-size: .95rem; font-weight: 800; color: #8a6a12;
  cursor: pointer; text-align: center; white-space: nowrap;
  min-height: 2.75rem; display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.play-pill:active { background: var(--yellow); }
.mic-pill { background: #FFE9C7; color: #a3660a; }
.mic-pill.recording {
  background: #ff5a4e; color: #fff;
  animation: micPulse 1s infinite;
}
.word-card.scoring { opacity: .8; }
@keyframes micPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,90,78,.45); } 50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255,90,78,0); } }
.score-mid { text-align: center; font-weight: 900; font-size: 1.3rem; line-height: 1.1; min-height: 1.2rem; }
.score-mid small { font-size: .72rem; font-weight: 700; margin-left: 2px; }
.score-mid.s3 { color: #1f7a44; }
.score-mid.s2 { color: #c07f10; }
.score-mid.s1 { color: #d4562a; }
.score-mid.sm { font-size: 1.05rem; }
.sentence { position: relative; }
.sentence .word-side { width: 128px; }
.sentence .pill { font-size: .88rem; padding: .5rem .4rem; }
.speak-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: #FFF3CF; font-size: 1.05rem; display: flex; align-items: center; justify-content: center;
}
.speak-btn:active { background: var(--yellow); }
.mastered-badge { font-size: .68rem; background: #D9F7E8; color: #0a9d6e; border-radius: 999px; padding: .15rem .55rem; font-weight: 700; }
.action-row { display: flex; gap: .6rem; padding: .2rem 1rem 1rem; position: sticky; bottom: .4rem; }
.action-row .btn-ghost { flex: 1; }
.action-row .btn-primary { flex: 2; width: auto; }

/* ---------- 读课文 ---------- */
.text-section-title {
  display: flex; align-items: center; gap: .4rem; margin: 0 1rem .5rem;
  font-weight: 800; color: var(--orange-deep);
}
.text-section-title::before { content: ""; width: 4px; height: 1rem; background: var(--orange); border-radius: 2px; }
.sentence {
  background: #fff; border-radius: 1rem; box-shadow: var(--shadow);
  padding: .85rem 1rem; margin: 0 1rem .6rem; display: flex; align-items: center; gap: .7rem; cursor: pointer;
}
.sentence .sent-main { flex: 1; }
.sentence .sent-en { font-weight: 700; font-size: .98rem; line-height: 1.4; }
.sentence .sent-cn { color: var(--ink-soft); font-size: .85rem; margin-top: .25rem; }
.sentence.read-done .sent-en::after { content: " ✓"; color: var(--green); }

/* ---------- 家长视角 ---------- */
.kid-row { display: flex; align-items: center; gap: .8rem; }
.kid-avatar {
  width: 46px; height: 46px; border-radius: 50%; background: #FFE9A8;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
}
.kid-info { flex: 1; }
.kid-info b { font-size: 1rem; }
.kid-meta { display: flex; gap: .7rem; margin-top: .3rem; font-size: .78rem; color: var(--ink-soft); flex-wrap: wrap; }
.kid-meta b { color: var(--orange-deep); }
.today-dot { font-size: .72rem; border-radius: 999px; padding: .18rem .6rem; font-weight: 700; }
.today-dot.yes { background: #D9F7E8; color: #0a9d6e; }
.today-dot.no { background: #FFECEC; color: #e5484d; }

/* ---------- 我的 ---------- */
.me-head { display: flex; align-items: center; gap: .9rem; }
.me-head .kid-avatar { width: 60px; height: 60px; font-size: 1.8rem; }
.me-row { display: flex; justify-content: space-between; align-items: center; padding: .85rem 0; border-bottom: 1px solid #FFF3CF; }
.me-row:last-child { border-bottom: none; }
.me-row .me-label { color: var(--ink-soft); font-size: .9rem; }
.danger { color: #e5484d; }
.hint { font-size: .78rem; color: #b9a86a; margin-top: .6rem; line-height: 1.5; }

/* ---------- 课本阅读器 ---------- */
.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .9rem; padding: 0 1rem; }
@media (min-width: 760px) { .shelf-grid { grid-template-columns: repeat(4, 1fr); } }
.shelf-book { background: #fff; border-radius: 1rem; box-shadow: var(--shadow); padding: .7rem; text-align: center; cursor: pointer; }
.shelf-book img { width: 100%; border-radius: .5rem; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.shelf-book b { display: block; font-size: .85rem; margin-top: .5rem; line-height: 1.35; }
.shelf-book span { font-size: .72rem; color: var(--ink-soft); }

.reader { position: fixed; inset: 0; z-index: 100; background: #2b2620; display: flex; flex-direction: column; }
.reader-top {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; padding-top: calc(.5rem + env(safe-area-inset-top));
  background: rgba(43,38,32,.92); color: #ffe9b0; font-size: .85rem;
}
.reader-top button { background: rgba(255,255,255,.12); color: #ffe9b0; border: none; border-radius: 999px; padding: .4rem .8rem; font-size: .8rem; cursor: pointer; }
.reader-top .rtitle { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-body { flex: 1; overflow: hidden; position: relative; touch-action: none; }
.reader-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .18s ease; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.reader-bottom {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  padding: .45rem .8rem calc(.45rem + env(safe-area-inset-bottom)); background: rgba(43,38,32,.92);
}
.reader-bottom button { background: rgba(255,255,255,.12); color: #ffe9b0; border: none; border-radius: 999px; padding: .45rem .9rem; cursor: pointer; }
.reader-bottom input { width: 64px; text-align: center; background: rgba(255,255,255,.14); border: none; border-radius: .5rem; color: #ffe9b0; font-size: .95rem; padding: .35rem 0; }
.reader-bottom span { color: #d8c9a0; font-size: .85rem; }
.rdrawer {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 82vw); background: #fffdf4; z-index: 5;
  transform: translateX(-105%); transition: transform .22s ease; overflow-y: auto; padding: 1rem .8rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow: 4px 0 20px rgba(0,0,0,.3);
}
.rdrawer.open { transform: none; }
.rdrawer h3 { font-size: .95rem; color: var(--orange-deep); margin-bottom: .5rem; }
.rdrawer .toc-item { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: .55rem .5rem; font-size: .88rem; color: var(--ink); border-radius: .6rem; }
.rdrawer .toc-item.unit { font-weight: 800; color: var(--orange-deep); background: #FFF6DF; margin-top: .4rem; }
.rdrawer .toc-item:not(.unit) { padding-left: 1.4rem; }
.rdrawer .toc-item:active { background: #FFF3CF; }
.thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .6rem; }
.thumb-grid img { width: 100%; border-radius: .3rem; cursor: pointer; border: 2px solid transparent; }
.thumb-grid img.cur { border-color: var(--orange); }

/* ---------- 播放交互：高亮 + 弹跳 ---------- */
.tool-sep { flex: 1; }
.speed-label { font-size: .72rem; color: var(--ink-soft); }
.word-card { transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.word-card.playing {
  border-color: var(--orange-deep);
  background: #FFFBEC;
  box-shadow: 0 0 0 3px rgba(255, 159, 28, .22), var(--shadow);
}
.word-card.playing .word-en {
  animation: wordPop .5s cubic-bezier(.34, 1.56, .64, 1);
}
.word-card.playing .word-cn { color: var(--orange-deep); font-weight: 700; }
.word-card.playing .speak-btn { background: var(--yellow); transform: scale(1.08); }
@keyframes wordPop {
  0% { transform: scale(1) translateY(0); }
  35% { transform: scale(1.16) translateY(-3px); }
  65% { transform: scale(.97) translateY(1px); }
  100% { transform: scale(1) translateY(0); }
}
.sentence { transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.sentence.playing {
  background: #FFF6DF;
  box-shadow: 0 0 0 3px rgba(255, 159, 28, .22), var(--shadow);
  transform: translateY(-2px);
}
.sentence.playing .sent-en { animation: wordPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.sentence.playing .speak-btn { background: var(--yellow); }

/* ---------- 全屏跟读 ---------- */
.focus-btn { background: #FFE9C7; color: #a3660a; font-weight: 700; }
.focus-view {
  position: fixed; inset: 0; z-index: 80;
  background: linear-gradient(180deg, var(--yellow) 0%, var(--bg) 46%);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  animation: fadeIn .18s ease;
}
.focus-top {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem 1rem .2rem;
}
.focus-top .fback {
  border: none; background: rgba(255,255,255,.75); color: #7a5200;
  border-radius: 999px; padding: .5rem 1rem; font-size: .9rem; font-weight: 700; cursor: pointer;
  min-height: 2.6rem;
}
.focus-top .fprog { flex: 1; text-align: center; font-weight: 800; color: #7a5200; font-size: .95rem; }
.focus-top .funit { font-size: .78rem; color: #9a7a1a; }
.focus-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: .5rem 1.6rem; text-align: center; min-height: 0; overflow-y: auto;
  cursor: pointer;
  will-change: transform, opacity;
}
@keyframes fInRight { from { transform: translateX(70px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fInLeft { from { transform: translateX(-70px); opacity: 0; } to { transform: none; opacity: 1; } }
.focus-stage.enter-right { animation: fInRight .22s cubic-bezier(.34, 1.56, .64, 1); }
.focus-stage.enter-left { animation: fInLeft .22s cubic-bezier(.34, 1.56, .64, 1); }
.focus-sec { font-size: .82rem; color: #9a7a1a; font-weight: 700; }
.focus-en {
  font-size: clamp(2.4rem, 11vw, 4rem); font-weight: 900; color: var(--ink);
  line-height: 1.15; word-break: break-word;
}
.focus-stage.playing .focus-en { animation: wordPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.focus-stage.playing .focus-cn { color: var(--orange-deep); }
.focus-ipa { color: #b08a2a; font-size: 1.25rem; font-weight: 600; }
.focus-cn { color: var(--orange-deep); font-size: 1.35rem; font-weight: 700; }
.focus-score { min-height: 2rem; font-weight: 900; font-size: 1.4rem; }
.focus-score small { font-size: .8rem; font-weight: 700; margin-left: 2px; }
.focus-score .fgrade { font-size: .9rem; font-weight: 700; margin-left: .3rem; }
.focus-score.s3 { color: #1f7a44; } .focus-score.s2 { color: #c07f10; } .focus-score.s1 { color: #d4562a; }
.focus-mark { display: flex; gap: .6rem; }
.focus-mark button {
  border: none; border-radius: 999px; padding: .55rem 1.1rem; font-size: .9rem;
  font-weight: 700; cursor: pointer; min-height: 2.6rem;
}
.focus-mark .fm-ok { background: #D9F7E8; color: #0a9d6e; }
.focus-mark .fm-no { background: #FFF3CF; color: #9a6b00; }
.focus-btns {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 1.3rem;
  padding: .9rem 1rem calc(1.3rem + env(safe-area-inset-bottom));
}
.fnav {
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.85); color: #7a5200; font-size: 1.6rem; font-weight: 800;
  box-shadow: 0 3px 10px rgba(160,110,0,.2);
}
.fnav:active { transform: scale(.93); }
.fbig {
  width: 92px; height: 92px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 2.2rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(160,110,0,.28);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.fbig:active { transform: scale(.95); }
.fplay { background: linear-gradient(180deg, var(--yellow), var(--yellow-deep)); color: #6b4700; }
.fmic { background: #FFE9C7; color: #a3660a; }
.fmic small { font-size: .62rem; font-weight: 800; margin-top: .1rem; }
.fmic .frec-label { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.fmic.recording { background: #ff5a4e; color: #fff; animation: micPulse 1s infinite; }
.fmic.waiting { background: #f2b25c; color: #fff; }
.fmic.done { background: #f6c96b; }
.focus-hint {
  text-align: center; font-size: .8rem; color: #9a7a1a; padding: 0 1rem .4rem; min-height: 1.2rem;
}

/* ---------- 管理后台 ---------- */
.admin-form { display: flex; flex-direction: column; gap: .5rem; }
.admin-form input, .admin-form select {
  padding: .65rem .8rem; font-size: .95rem; border: 1.5px solid #f0e2b0;
  border-radius: .7rem; background: #FFFEF7; color: var(--ink);
}
.admin-user { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid #FFF3CF; }
.admin-user:last-child { border-bottom: none; }
.role-tag { font-size: .68rem; border-radius: 999px; padding: .1rem .5rem; margin-left: .4rem; font-weight: 700; }
.role-tag.kid { background: #FFF3CF; color: #a87b00; }
.role-tag.parent { background: #D9F7E8; color: #0a9d6e; }
.role-tag.admin { background: #FFE0E0; color: #c92a2a; }
.del-btn { background: #FFECEC; color: #c92a2a; font-weight: 700; }
.admin-user .chip { margin-left: .3rem; }

/* ---------- 元音音标 ---------- */
.vowel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .7rem;
  padding: 0 1rem;
}
.vowel-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .8rem .7rem;
  cursor: pointer;
  text-align: center;
  transition: transform .15s;
  border: 2px solid transparent;
}
.vowel-card:active { transform: scale(.96); border-color: var(--yellow-deep); }
.vowel-card.playing { border-color: var(--yellow-deep); background: #FFF9E8; }
.vowel-ipa {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--orange-deep);
  line-height: 1.2;
}
.vowel-name {
  font-size: .72rem;
  color: var(--ink-soft);
  margin-top: .2rem;
}
.vowel-tip {
  font-size: .72rem;
  color: #9a8a4a;
  margin-top: .25rem;
  line-height: 1.3;
}
.vowel-word {
  margin-top: .45rem;
  font-size: .9rem;
  font-weight: 700;
  color: #5b4a12;
}
.vowel-word small { color: var(--ink-soft); font-weight: 400; }

/* 听音练习 */
.quiz-card { text-align: center; }
.quiz-score {
  font-size: .9rem;
  color: var(--ink-soft);
  margin-bottom: .3rem;
}
.quiz-score b { color: var(--orange-deep); font-size: 1.3rem; }
.quiz-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: .5rem;
}
.quiz-opt {
  padding: 1rem .5rem;
  font-size: 1.4rem;
  font-weight: 800;
  border: 2px solid #f0e2b0;
  border-radius: .9rem;
  background: #FFFEF7;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s;
}
.quiz-opt:active { background: var(--yellow); }
.quiz-opt.correct { background: #D9F7E8; border-color: #0a9d6e; color: #0a9d6e; }
.quiz-opt.wrong { background: #FFE0E0; border-color: #e5484d; color: #e5484d; }
.quiz-msg {
  margin-top: .8rem;
  font-size: .95rem;
  font-weight: 600;
  min-height: 1.4rem;
}

/* 元音/辅音分类切换 */
.cat-tabs {
  display: flex;
  gap: .5rem;
  padding: .2rem 1rem .6rem;
}
.cat-tab {
  flex: 1;
  padding: .55rem;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.cat-tab.active {
  background: linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  color: #7a5200;
}