:root {
  --mint: #35b7c5; --mint-deep: #16899a; --mint-dark: #0f6c7c; --mint-soft: #d9f2f4;
  --coral: #ef7d7a; --gold: #f5b94c; --ink: #22414f; --muted: #5f7b84;
  --paper: #fffaf3; --white: #fff; --green: #3f9d68; --red: #d9545d;
  --screen: #1d9bc0; --screen-deep: #0e7ba3; --deck: #e6eceb; --key: #52626b; --key-deep: #3c4a52;
  --shadow: 0 14px 30px rgba(15, 86, 100, .16); --radius: 24px;
}

.identity-card { padding: 14px; margin-bottom: 16px; border-radius: 18px; background: linear-gradient(135deg, #e9faf7, #f7fffd); border: 1px solid #c9ebe5; }
.identity-card > div:first-child strong, .identity-card > div:first-child span { display: block; }
.identity-card > div:first-child strong { color: var(--mint-deep); font-size: 16px; }
.identity-card > div:first-child span { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.identity-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.identity-row .field-inline { flex: 0 0 118px; margin: 0; }
.identity-row .field-inline select { height: 42px; }
.identity-row .identity-save { flex: 0 0 auto; white-space: nowrap; }
.identity-input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid #b9dedd; border-radius: 12px; background: #fff; color: var(--ink); font-size: 16px; }
.identity-input:focus, .admin-tools input:focus { outline: 3px solid rgba(23, 137, 122, .16); border-color: var(--mint); }
.identity-saved { margin-top: 8px; color: #247b64; font-size: 12px; }
.stats-identity { margin-bottom: 12px; }
.student-chip { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 8px; border-radius: 10px; background: #e6f6f5; color: var(--mint-deep); font-size: 11px; }
.question-feedback { min-height: 42px; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 14px; font-weight: 800; font-size: 15px; }
.question-feedback.correct { background: #dff5e6; color: #22764a; }
.question-feedback.wrong { background: #ffe3e1; color: #ab3f45; }
.admin-panel { margin-top: 14px; }
.admin-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin-top: 12px; }
.admin-tools .field { min-width: 170px; flex: 1; }
.admin-tools input { width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid #cfe4e4; border-radius: 11px; background: #fff; color: var(--ink); font-size: 16px; }
.ranking-list { display: grid; gap: 8px; margin-top: 14px; }
.ranking-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid #dceff1; border-radius: 14px; background: #f8fdfd; }
.ranking-row.top { border-color: #f0c56a; background: #fff8e8; }
.rank-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ffe5b2; color: #8a5a17; font-weight: 850; }
.ranking-score { text-align: right; color: var(--mint-deep); }
.ranking-score b, .ranking-score small { display: block; }
.ranking-score small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.section-head .panel-title { display: inline-flex; align-items: center; gap: 6px; }
.danger-icon { color: #b34e4e; }
.qr-card { margin-top: 18px; padding: 18px 14px; text-align: center; border-radius: 18px; background: #f7fffd; border: 1px dashed #abd9d2; }
.qr-card h3 { margin: 0; color: var(--mint-deep); font-size: 20px; }
.qr-card p { margin: 5px 0 12px; color: var(--muted); font-size: 12px; }
.qr-image { display: block; width: 190px; height: 190px; margin: 0 auto; image-rendering: pixelated; }
.qr-fallback { padding: 30px 12px; border-radius: 12px; background: #eef8f7; color: var(--muted); font-size: 12px; }
.qr-link { margin-top: 10px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }

/* ===== 比大小 / 计时 / 截图式反馈 ===== */
.compare-board { display: flex; flex-direction: column; align-items: center; }
.compare-line { display: flex; align-items: center; gap: 18px; }
.compare-num { min-width: 72px; text-align: center; color: #fff; font-size: 52px; font-weight: 850; }
.compare-slot { width: 78px; height: 64px; display: grid; place-items: center; border: 3px dashed rgba(255, 255, 255, .85); border-radius: 14px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 40px; font-weight: 900; }
.compare-slot.filled { border-style: solid; background: rgba(255, 255, 255, .22); }
.num-key.symbol { font-size: 30px; font-weight: 900; }
.num-key.symbol.active { background: linear-gradient(180deg, #4fb9ad, #35988d); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 #23756c; }
.timer-pill { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.timer-pill small { font-weight: 600; font-size: 10px; color: var(--muted); }
.screen-mark { min-height: 54px; margin-top: 12px; display: flex; align-items: center; justify-content: center; }
.mark-hint { color: rgba(255, 255, 255, .86); font-size: 14px; font-weight: 600; }
.mark-text { display: inline-flex; align-items: center; gap: 12px; font-size: 36px; font-weight: 900; letter-spacing: .08em; animation: mark-pop .18s ease; }
.mark-text i { font-style: normal; font-size: 40px; }
.mark-text.ok { color: #93f06f; text-shadow: 0 2px 0 #2c7a1f, 0 0 10px rgba(0, 0, 0, .22); }
.mark-text.bad { color: #ff7b70; text-shadow: 0 2px 0 #8a1f1f, 0 0 10px rgba(0, 0, 0, .22); }
@keyframes mark-pop { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dots i.ok { background: #7ae2a3; }
.dots i.bad { background: #ff9a9a; }

@media (max-width: 480px) {
  .identity-row { align-items: stretch; flex-direction: column; }
  .identity-row .field-inline { flex: 0 0 auto; }
  .identity-row .mini-btn { width: 100%; justify-content: center; }
  .student-chip { display: none; }
  .ranking-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px; }
  .ranking-row .record-main span { white-space: normal; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mint); color: var(--ink); font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid rgba(245, 185, 76, .85); outline-offset: 2px; }
img, svg, video { max-width: 100%; height: auto; }

/* ===== 壳层 ===== */
.app-shell { min-height: 100dvh; padding: 22px 16px 44px; }
.app-frame { width: 100%; max-width: 620px; margin: 0 auto; }
.brand { color: #fff; text-align: center; padding: 4px 0 20px; }
.brand-kicker { display: inline-block; padding: 4px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.94); font-size: 13px; font-weight: 800; letter-spacing: .16em; }
.brand small { display: block; margin-top: 2px; font-size: clamp(17px, 4.6vw, 25px); letter-spacing: .14em; opacity: .88; }
.brand h1 { margin: 4px 0 0; font-size: clamp(38px, 11vw, 64px); letter-spacing: .06em; font-weight: 850; }
.brand p { margin: 8px 0 0; font-size: 13px; color: rgba(255, 255, 255, .88); }

/* ===== 通用卡片 ===== */
.panel { background: rgba(255, 255, 255, .93); border-radius: 26px; box-shadow: var(--shadow); padding: 18px; }
.panel-title { margin: 0; font-size: 21px; }
.panel-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.icon-btn { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; background: var(--mint-soft); color: var(--mint-deep); display: grid; place-items: center; }
.muted-text { color: var(--muted); }

/* ===== 首页 ===== */
.menu-stack { display: grid; gap: 12px; margin-top: 16px; }
.menu-btn { min-height: 84px; border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; text-align: left; color: var(--ink); box-shadow: 0 6px 0 rgba(34, 65, 79, .13); transition: transform .16s ease, box-shadow .16s ease; }
.menu-btn:hover { transform: translateY(-2px); }
.menu-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(34, 65, 79, .13); }
.menu-btn.coral { background: #ffdbd3; }
.menu-btn.blue { background: #d7e9fb; }
.menu-btn.gold { background: #ffedc6; }
.menu-btn.purple { background: #ecdcff; }
.menu-btn.teal { background: #cdeef0; }
.menu-btn.rose { background: #ffdcea; }
.menu-icon { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .78); }
.menu-btn.coral .menu-icon { color: var(--coral); }
.menu-btn.blue .menu-icon { color: #4a78b6; }
.menu-btn.gold .menu-icon { color: #cb7c21; }
.menu-btn.purple .menu-icon { color: #8257bc; }
.menu-btn.teal .menu-icon { color: var(--mint-deep); }
.menu-btn.rose .menu-icon { color: #d1508a; }
.menu-copy strong { display: block; font-size: 20px; }
.menu-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.home-stats { margin-top: 16px; background: rgba(255, 255, 255, .84); border-radius: 20px; padding: 14px; }
.home-stats .stats-grid { margin-top: 10px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-box { background: #f4fbfb; border-radius: 14px; padding: 12px 6px; text-align: center; }
.stat-box b { display: block; font-size: 22px; color: var(--mint-deep); }
.stat-box span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.stats-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stats-head strong { font-size: 15px; }
.link-btn { display: inline-flex; align-items: center; gap: 5px; color: var(--mint-deep); font-weight: 700; font-size: 13px; }
.bottom-note { text-align: center; margin-top: 16px; color: rgba(255, 255, 255, .85); font-size: 11.5px; }

/* ===== 题型列表 ===== */
.select-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.field label { display: block; margin: 0 0 5px 3px; font-size: 11.5px; color: var(--muted); }
.field select, .field input { width: 100%; height: 46px; padding: 0 12px; border-radius: 13px; border: 2px solid #cfe9ec; background: var(--white); font-size: 16px; }
.notice { margin: 0 0 12px; padding: 9px 11px; border-radius: 12px; background: #fff3d6; color: #8b6318; font-size: 12.5px; }
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.topic-card { min-height: 70px; text-align: left; padding: 11px 12px; border-radius: 15px; background: #f7ffff; border: 2px solid #d8eff1; color: var(--ink); transition: transform .16s ease, border-color .16s ease; }
.topic-card:hover { transform: translateY(-2px); border-color: var(--mint); }
.topic-card strong { display: block; font-size: 14.5px; line-height: 1.35; }
.topic-card span { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--mint-deep); }
.topic-card-group { display: block; }
.topic-variants { display: flex; gap: 8px; margin-top: 10px; }
.topic-variant { flex: 1; min-height: 34px; padding: 0 10px; border: 1px solid #9dd4d8; border-radius: 10px; background: #e8f8f8; color: var(--mint-deep); font-size: 13px; font-weight: 800; }
.topic-variant.accent { border-color: #e7b96c; background: #fff1d5; color: #a56818; }
.topic-variant:disabled { opacity: .5; }

/* ===== 练习页：顶部 ===== */
.practice-topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.topbar-title { flex: 1; min-width: 0; }
.topbar-title span { display: block; font-size: 11px; color: rgba(255, 255, 255, .85); }
.topbar-title strong { display: block; margin-top: 2px; font-size: 17px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title .icon-btn { background: rgba(255, 255, 255, .22); color: #fff; }
.progress-pill { flex: 0 0 auto; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, .9); color: var(--mint-deep); font-weight: 800; font-size: 13px; }

/* ===== 屏幕区 ===== */
.screen { position: relative; border-radius: 24px; padding: 16px 16px 26px; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(165deg, #29a9cb, var(--screen-deep)); box-shadow: 0 0 0 8px #9aa6ab, 0 12px 26px rgba(10, 68, 88, .34); overflow: hidden; }
.screen::after { content: ""; position: absolute; inset: 12px; border-radius: 16px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); pointer-events: none; }
.screen-tabs { position: absolute; top: 18px; left: 20px; right: 20px; display: flex; align-items: center; gap: 8px; z-index: 2; }
.screen-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 12px; border: 1.6px solid rgba(255, 255, 255, .62); color: #fff; font-size: 13px; font-weight: 700; }
.screen-chip i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f5f; }
.screen-index { margin-left: auto; color: rgba(255, 255, 255, .8); font-size: 12px; letter-spacing: .05em; }
.screen.finished { justify-content: center; }

/* 题面通用 */
.expr-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; color: #fff; font-size: clamp(40px, 13vw, 66px); font-weight: 850; letter-spacing: .02em; line-height: 1.1; }
.expr-text { font-variant-numeric: tabular-nums; }
.expr-eq { font-weight: 850; }
.paren-wrap { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 850; }
.paren-wrap .answer-plain { min-width: 52px; }
.paren-wrap .answer-plain.filled { color: #fff8e3; }

/* 分合树 */
.tree-board { display: grid; justify-items: center; gap: 2px; width: 100%; padding-top: 26px; }
.tree-row { display: flex; justify-content: center; gap: 44px; width: 100%; }
.tree-lines { width: min(56%, 210px); height: 42px; }
.tree-lines path { fill: none; stroke: rgba(255, 255, 255, .72); stroke-width: 2.4; stroke-linecap: round; }
.tree-cell { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 12px; font-size: 34px; font-weight: 850; color: #fff; }
.tree-cell.given { border: 2px dashed rgba(255, 255, 255, .78); }
.tree-cell.blank { background: rgba(255, 255, 255, .3); border: 2px dashed rgba(255, 255, 255, .82); transition: background .16s ease, transform .16s ease; }
.tree-cell.blank.filled { background: #fff8e3; color: var(--screen-deep); border-style: solid; border-color: #fff; }
.answer-plain { min-width: 58px; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: inherit; font-weight: 850; line-height: 1; text-align: center; vertical-align: middle; }
.expr-line .answer-plain { font-size: inherit; }
.answer-plain.filled { color: #fff8e3; }
.tree-answer { margin: 0 auto; font-size: 34px; }
.decompose-board .tree-bottom-row { width: min(100%, 220px); justify-content: space-between; gap: 0; }
.decompose-board .decompose-given { justify-content: end; text-align: right; padding-right: 12px; }
.decompose-board .decompose-answer { justify-content: center; font-size: 34px; }
.tree-cell.inline { width: auto; min-width: 62px; height: 56px; padding: 0 12px; }
.tree-plain { color: #fff; font-size: 44px; font-weight: 850; }
.tree-caption { margin: 14px 0 0; color: rgba(255, 255, 255, .84); font-size: 13px; }

/* 分合树（合成/分解，可上下或左右，空框可在总数或任一部分） */
.tree-board-v { display: grid; justify-items: center; gap: 2px; width: 100%; padding-top: 26px; }
.tree-board-h { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; padding-top: 14px; }
.tree-parts { display: flex; justify-content: center; gap: 44px; }
/* 左右排列的分合树：两部分要上下叠放，与左侧/右侧的总数对应 */
.tree-board-h .tree-parts { flex-direction: column; gap: 12px; }
.tree-single { display: flex; justify-content: center; }
.tree-node { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 12px; color: #fff; font-size: 34px; font-weight: 850; }
.tree-lines-h { width: 52px; height: 148px; flex: 0 0 auto; }
.tree-lines-h path { fill: none; stroke: rgba(255, 255, 255, .72); stroke-width: 2.6; stroke-linecap: round; }

/* 凑十法 / 平十法 / 破十法：按练习图的分拆版面（SVG 板书），方框留空由学生填写 */
.mt-diagram { display: block; width: 100%; max-width: 330px; margin: 0 auto; overflow: visible; }
.mt-line { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mt-print { fill: #fff; font-size: 32px; font-weight: 850; }
.mt-print.sign { font-size: 30px; }
.mt-slot rect { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .9); stroke-width: 2.2; }
.mt-slot text { fill: #fff; font-size: 32px; font-weight: 850; }
.mt-slot.given rect { fill: none; stroke-dasharray: 6 5; stroke-width: 2; }
.mt-slot.filled rect { fill: #fff8e3; stroke: #fff; }
.mt-slot.filled text { fill: var(--screen-deep); }
.mt-slot.selected rect { fill: rgba(245, 185, 76, .26); stroke: var(--gold); stroke-width: 3.4; }
.mt-slot.selected text { fill: #fff; }
.mt-slot { cursor: pointer; }

/* 数的顺序：提示文字 + 数列空框 */
.order-board { display: grid; justify-items: center; gap: 18px; }
.order-prompt { margin: 0; color: #fff; font-size: clamp(18px, 5vw, 26px); font-weight: 800; text-align: center; }
.order-seq { display: flex; align-items: center; justify-content: center; gap: 14px; color: #fff; font-size: 44px; font-weight: 850; font-variant-numeric: tabular-nums; }
.order-num { min-width: 56px; text-align: center; }
.order-slot { min-width: 72px; height: 72px; display: grid; place-items: center; border: 3px dashed rgba(255, 255, 255, .82); border-radius: 14px; background: rgba(255, 255, 255, .14); font-size: 40px; color: #fff; }
.order-slot.filled { background: #fff8e3; color: var(--screen-deep); border-style: solid; border-color: #fff; }

/* 竖式 */
.vertical-board { display: grid; justify-items: center; }
.vertical-grid { display: grid; grid-template-columns: auto auto; grid-template-areas: "top top" "bottom bottom" "rule rule" "answer answer"; justify-items: end; min-width: 168px; padding: 0 12px; color: #fff; font-size: 40px; font-weight: 850; font-variant-numeric: tabular-nums; }
.v-top { grid-area: top; }
.v-bottom { grid-area: bottom; }
/* + / - 号比数字再往左两个字符，避免正对个位或十位 */
.v-sign { display: inline-block; transform: translateX(-2ch); }
.v-rule { grid-area: rule; width: 100%; height: 3px; margin: 6px 0; border-radius: 3px; background: rgba(255, 255, 255, .9); }
.v-answer-plain { grid-area: answer; min-width: 86px; min-height: 56px; justify-self: end; transform: translateX(1ch); }

/* 钟面 */
.clock-board { display: grid; justify-items: center; gap: 14px; }
.clock-face { width: min(78vw, 360px); aspect-ratio: 1; overflow: visible; }
.clock-ring { fill: #fff; stroke: #111; stroke-width: 1.6; }
.clock-tick { stroke: #111; stroke-width: 1.2; stroke-linecap: round; }
.clock-tick.major { stroke-width: 2.4; }
.clock-num { fill: #1976b8; font-size: 7px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.clock-hand.minute { stroke: #4b92e8; stroke-width: 2.2; stroke-linecap: round; }
.clock-hand.hour { stroke: #ef3e43; stroke-width: 2.8; stroke-linecap: round; }
.clock-pin { fill: #777; }
.clock-answer { display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-size: 18px; font-weight: 700; }
.clock-answer .answer-plain, .clock-time-slot { min-width: 80px; min-height: 48px; padding: 0 8px 4px; border-bottom: 3px solid rgba(255,255,255,.78); font-size: 30px; }
.clock-time-slot.active { border-bottom-color: #ffe27a; background: rgba(255,255,255,.14); border-radius: 6px 6px 0 0; }
.clock-time-slot.filled { color: #fff8e3; }

/* 反馈 */
.screen { transition: box-shadow .22s ease; }
.screen.glow-ok { box-shadow: 0 0 0 8px #9aa6ab, 0 0 0 4px rgba(120, 235, 180, .9), 0 12px 26px rgba(10, 68, 88, .34); }
.screen.glow-bad { box-shadow: 0 0 0 8px #9aa6ab, 0 0 0 4px rgba(255, 150, 150, .85), 0 12px 26px rgba(10, 68, 88, .34); }
.shake { animation: shake .34s ease; }
@keyframes shake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-7px) } 75% { transform: translateX(7px) } }
.screen.correct-glow { box-shadow: 0 0 0 8px #9aa6ab, 0 0 0 4px rgba(120, 235, 180, .85), 0 12px 26px rgba(10, 68, 88, .34); }
.screen.wrong-glow { box-shadow: 0 0 0 8px #9aa6ab, 0 0 0 4px rgba(255, 148, 148, .8), 0 12px 26px rgba(10, 68, 88, .34); }

/* 装饰点 */
.dots { display: flex; justify-content: center; gap: 9px; margin: 12px 0 10px; }
.dots i { width: 17px; height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .55); }

/* ===== 键盘 ===== */
.keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 13px; border-radius: 22px; background: var(--deck); box-shadow: 0 8px 20px rgba(10, 68, 88, .22); }
.num-key { height: 60px; border-radius: 14px; background: var(--key); color: #fff; font-size: 30px; font-weight: 700; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 4px 0 var(--key-deep); transition: transform .1s ease, background .16s ease; }
.num-key:hover { background: #5c6d77; }
.num-key:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), 0 1px 0 var(--key-deep); }
.num-key.wide { grid-column: span 2; }
.num-key.label { font-size: 19px; letter-spacing: .08em; }
.func-key { height: 60px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #fff; font-size: 17px; font-weight: 800; background: #3f93ac; box-shadow: 0 4px 0 #2d7288; transition: transform .1s ease; }
.func-key:active { transform: translateY(3px); box-shadow: 0 1px 0 #2d7288; }
.func-key.danger { background: var(--red); box-shadow: 0 4px 0 #b53f47; }
.func-key.danger:active { box-shadow: 0 1px 0 #b53f47; }
.func-key.answer { background: #17897a; box-shadow: 0 4px 0 #0f6b5f; }
.func-key.answer:active { box-shadow: 0 1px 0 #0f6b5f; }
.keypad.disabled { opacity: .55; pointer-events: none; }

/* ===== 反馈条 ===== */
.feedback { min-height: 48px; margin-top: 10px; padding: 8px 13px; border-radius: 14px; background: rgba(255, 255, 255, .88); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--ink); font-size: 13.5px; }
.feedback.correct { background: #dff5e6; color: #22764a; }
.feedback.wrong { background: #ffe3e1; color: #ab3f45; }
.feedback.warning { background: #fff2d2; color: #8d6219; }
.feedback.revealed { background: #e5f2ff; color: #2a5f96; }
.mini-link { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 10px; background: var(--white); color: var(--mint-deep); font-weight: 700; font-size: 12.5px; }
.mini-btn { padding: 9px 15px; border-radius: 13px; background: #e3f4f5; color: var(--mint-deep); font-weight: 700; font-size: 14px; }
.mini-btn.primary { background: var(--coral); color: #fff; }
.mini-btn.danger { background: #ffe3e1; color: #ab3f45; }
.mini-btn:disabled { opacity: .55; }
.mini-btn.gold { background: #ffe9bd; color: #986013; }
.session-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: rgba(255, 255, 255, .9); font-size: 12px; }
.session-stats b { font-size: 14px; }

/* 结算 */
.summary-title { margin: 0; color: #fff; font-size: 26px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 16px; }
.summary-box { background: rgba(255, 255, 255, .93); border-radius: 15px; padding: 13px 6px; text-align: center; }
.summary-box b { display: block; font-size: 25px; color: var(--mint-deep); }
.summary-box span { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.summary-note { color: rgba(255, 255, 255, .9); font-size: 12.5px; text-align: center; }
.summary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 4px; }

/* 奖状 */
.award-cert { margin-top: 16px; display: grid; justify-items: center; gap: 10px; width: 100%; }
.award-cert canvas { display: block; width: 100%; height: auto; max-width: 400px; border-radius: 14px; box-shadow: 0 8px 22px rgba(10, 68, 88, .28); }
.award-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.award-msg { margin: 0; color: rgba(255, 255, 255, .92); font-size: 12.5px; text-align: center; }

/* 双人竞技 */
.battle-players { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; }
.battle-player-card { background: rgba(255, 255, 255, .94); border-radius: 16px; padding: 14px 10px; text-align: center; }
.battle-player-card strong { display: block; font-size: 16px; }
.battle-player-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.battle-player-card.winner { outline: 3px solid #f0b429; background: #fff8e8; }
.battle-vs { font-weight: 900; color: #fff; font-size: 18px; }
.battle-screen { justify-content: flex-start; width: 100%; padding-top: 46px; }
.battle-question { width: 100%; }
.battle-arena { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 12px; }
.battle-side { display: grid; gap: 7px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .96); }
.battle-side.side-a { border: 3px solid #8fd6ee; }
.battle-side.side-b { border: 3px solid #f3aacb; }
.battle-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.battle-side-head strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-side-head small { color: var(--muted); font-size: 11.5px; }
.battle-side-state { min-height: 16px; font-size: 12px; color: var(--muted); }
.battle-side-state.correct { color: #22764a; font-weight: 800; }
.battle-side-state.wrong { color: #b3453f; font-weight: 800; }
.battle-answer { min-height: 42px; display: grid; place-items: center; border-radius: 12px; background: #f2fafb; border: 2px dashed #b9dedd; color: var(--ink); font-size: 23px; font-weight: 850; }
.battle-answer.filled { border-style: solid; border-color: var(--mint); }
.battle-answer.correct { background: #dff5e6; border-color: #7ae2a3; }
.battle-answer.wrong { background: #ffe6e6; border-color: #ff9a9a; }
.battle-answer-time { display: flex; align-items: center; justify-content: center; gap: 6px; }
.battle-time-slot { min-width: 58px; min-height: 34px; padding: 0 6px 2px; border-bottom: 3px solid #b9dedd; font-size: 22px; text-align: center; }
.battle-time-slot.active { border-bottom-color: #f0b429; background: #fff6df; border-radius: 6px 6px 0 0; }
.battle-time-slot.filled { color: var(--ink); }
.battle-time-colon { font-size: 22px; font-weight: 850; color: var(--ink); }
.battle-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.battle-keypad button.bkey { min-height: 42px; border: 0; border-radius: 12px; background: #eef7f8; color: var(--ink); font-size: 19px; font-weight: 800; }
.battle-keypad button.bkey.del { background: #ffe3e1; color: #ab3f45; font-size: 13px; }
.battle-keypad button.bkey.ok { background: var(--coral); color: #fff; font-size: 13px; }
.battle-keypad button.bkey.symbol { font-size: 22px; }
.battle-keypad button.bkey.active { outline: 3px solid var(--mint); }

/* ===== 记录 ===== */
.record-list { display: grid; gap: 8px; margin-top: 12px; }
.record-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 13px; background: #f6fcfd; border: 1px solid #dceff1; }
.record-main { min-width: 0; }
.record-main strong, .record-main span { display: block; }
.record-main strong { font-size: 13.5px; }
.record-main span { margin-top: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.record-tag { flex: 0 0 auto; text-align: right; font-weight: 800; font-size: 12.5px; }
.record-tag.ok { color: var(--green); }
.record-tag.bad { color: var(--red); }
.record-tag small { display: block; margin-top: 3px; font-weight: 500; color: var(--muted); font-size: 10.5px; }
.empty-state { background: var(--paper); border-radius: 24px; padding: 26px 20px; text-align: center; }
.empty-state h2 { margin: 0 0 8px; }

/* ===== 打印 ===== */
.print-preview { margin-top: 14px; padding: 16px; border-radius: 16px; background: #fff; border: 1px dashed #c4d8d9; color: #1b3340; }
.print-preview h3 { margin: 0 0 4px; text-align: center; font-size: 17px; }
.print-preview .print-meta { margin: 0 0 12px; text-align: center; color: #6a818a; font-size: 12px; }
.print-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.print-item { padding: 9px 0; border-bottom: 1px solid #e9f0f0; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.print-item-tree { min-height: 94px; display: flex; align-items: flex-start; gap: 6px; }
.print-index { flex: 0 0 auto; padding-top: 8px; }
.print-tree { flex: 1; min-height: 86px; display: grid; justify-items: center; grid-template-rows: 24px 25px 34px; }
.print-tree-total { font-size: 22px; line-height: 24px; font-weight: 800; }
.print-tree-lines { width: 120px; height: 25px; position: relative; }
.print-tree-lines::before, .print-tree-lines::after { content: ''; position: absolute; top: 1px; width: 2px; height: 34px; background: #60747b; transform-origin: top center; }
.print-tree-lines::before { left: 59px; transform: rotate(58deg); }
.print-tree-lines::after { left: 59px; transform: rotate(-58deg); }
.print-tree-branches { width: 150px; display: flex; justify-content: space-between; align-items: center; }
.print-tree-given, .print-tree-box { width: 32px; height: 32px; display: grid; place-items: center; font-size: 20px; font-weight: 800; line-height: 1; }
.print-tree-given { border: 1px solid transparent; }
.print-tree-box { border: 1.5px solid #52626b; border-radius: 3px; }
/* 数的合成和分解：按参考图每行 4 个分合树排版 */
.print-list.print-list-tree { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
.print-list-tree .print-item { border-bottom: 0; padding: 2px 0; }
.print-list-tree .print-item-tree { min-height: 0; display: grid; justify-items: center; }
.print-tree-figure { width: 100%; max-width: 116px; height: auto; display: block; }
.print-tree-figure .pt-line { fill: none; stroke: #60747b; stroke-width: 1.6; stroke-linecap: round; }
.print-tree-figure .pt-box { fill: #fff; stroke: #52626b; stroke-width: 1.5; }
.print-tree-figure .pt-num { fill: #1b3340; font-size: 15px; font-weight: 800; }
/* 应用题打印：单列、留出列式与作答的书写空间 */
.print-list-wp { grid-template-columns: 1fr; gap: 0; }
.print-list-wp .print-item { padding: 12px 0 26px; font-size: 15.5px; line-height: 1.7; display: flex; gap: 6px; align-items: flex-start; }
.print-list-wp .print-index { padding-top: 0; }
@media print {
  .print-item-tree { min-height: 88px; }
  .print-tree-total { font-size: 20px; }
  .print-tree-given, .print-tree-box { font-size: 18px; }
  .print-list.print-list-tree { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .print-list-tree .print-item-tree { min-height: 0; }
}

.actions-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }

/* ===== 分享 ===== */
.share-box { padding: 14px; margin: 12px 0; border-radius: 16px; background: #e6f6f5; color: var(--mint-deep); font-size: 14px; word-break: break-all; }

/* ===== 分享二维码 ===== */
.share-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; margin-bottom: 12px; border-radius: 16px; background: #f6fcfd; border: 1px solid #dceff1; }
.share-qr-img { width: 176px; max-width: 56vw; padding: 8px; border-radius: 12px; background: #fff; line-height: 0; }
.share-qr-img svg { display: block; width: 100%; height: auto; }
.share-qr-tip { margin: 0; font-size: 13px; font-weight: 800; color: var(--mint-deep); text-align: center; }
.share-qr-note { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #fff8e6; border: 1px solid #f0dcae; color: #8a6d1f; font-size: 13px; line-height: 1.6; }

/* ===== 一年级可打印口算 ===== */
.worksheet-frame { max-width: 1000px; }
.worksheet-panel { padding: 10px; }
.worksheet-embed { display: block; width: 100%; height: min(80dvh, 1020px); border: 0; border-radius: 18px; background: #fff; }

/* ===== 上册 / 下册 切换 ===== */
.term-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.term-tab { flex: 1; min-height: 40px; padding: 0 12px; border: 1px solid #9dd4d8; border-radius: 12px; background: #e8f8f8; color: var(--mint-deep); font-size: 14px; font-weight: 800; }
.term-tab.active { background: var(--mint-deep); border-color: var(--mint-deep); color: #fff; }

/* ===== 应用题 ===== */
/* 上下册 + 随堂/汇总 两层切换 */
.wp-switch { display: grid; gap: 8px; margin-bottom: 12px; }
.wp-switch .term-tabs { margin-bottom: 0; }
.wp-card { padding: 16px; border-radius: 16px; background: #f6fcfd; border: 1px solid #dceff1; }
.wp-text { margin: 0; font-size: 18px; line-height: 1.75; color: var(--ink); }
.wp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wp-answer { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #e5f2ff; color: #2a5f96; font-size: 15px; font-weight: 700; }
.wp-hint { margin: 12px 0 8px; color: var(--muted); font-size: 13px; }
.wp-read-tip { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff6df; color: #96650a; font-size: 13.5px; font-weight: 700; }

/* 认识时间精度切换 */
.clock-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.clock-mode-chip { min-height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; font-weight: 700; }
.clock-mode-chip.active { background: #fff; border-color: #fff; color: var(--screen-deep); }
.wp-judge { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.judge-box { position: relative; min-height: 74px; border: 2px dashed #cfe0e2; border-radius: 16px; background: #fff; color: var(--muted); font-size: 20px; font-weight: 800; }
.judge-box .judge-tick { position: absolute; top: 8px; right: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #eef2f3; color: #fff; }
.judge-box.ok.selected { border-style: solid; border-color: #7ae2a3; background: #dff5e6; color: #1f6b40; }
.judge-box.ok.selected .judge-tick { background: #35b96f; }
.judge-box.bad.selected { border-style: solid; border-color: #ff9a9a; background: #ffe6e6; color: #a13a3a; }
.judge-box.bad.selected .judge-tick { background: #e05a5a; }
.wp-nav { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

/* ===== 看图列式 ===== */
.picture-card { display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: #f6fcfd; border: 1px solid #dceff1; }
.picture-img { display: block; width: 100%; max-height: 46dvh; object-fit: contain; border-radius: 12px; background: #fff; }
.picture-prompt { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 16px; line-height: 1.6; }
.picture-missing { margin: 0; padding: 22px 10px; text-align: center; color: var(--muted); font-size: 14px; }
.picture-answer-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.picture-answer-label { font-size: 15px; font-weight: 800; color: var(--mint-deep); }
.picture-answer { min-width: 84px; padding: 6px 16px; border-radius: 12px; background: #fff; border: 2px dashed #b9dedd; text-align: center; font-size: 26px; font-weight: 850; color: var(--ink); }
.picture-answer.filled { border-style: solid; border-color: var(--mint); }
.picture-answer.correct { background: #dff5e6; border-color: #7ae2a3; color: #1f6b40; }
.picture-answer.wrong { background: #ffe6e6; border-color: #ff9a9a; color: #a13a3a; }
.func-key:disabled { opacity: .5; }

/* ===== 响应式 ===== */
@media (max-width: 480px) {
  .app-shell { padding: 14px 10px 34px; }
  .panel { padding: 14px; border-radius: 22px; }
  .screen { min-height: 300px; padding: 14px 12px 22px; }
  .tree-cell { width: 58px; height: 58px; font-size: 29px; }
  .mt-diagram { max-width: 300px; }
  .tree-row { gap: 26px; }
  .num-key { height: 54px; font-size: 26px; }
  .func-key { height: 54px; font-size: 15px; }
  .select-row, .topic-grid, .print-list { grid-template-columns: 1fr; }
  .print-list { grid-template-columns: 1fr; }
}
@media (min-width: 700px) {
  .app-shell { padding: 30px 20px 54px; }
  .screen { min-height: 380px; }
  .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .print-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  body { background: #fff; }
  .app-shell { padding: 0; }
  .brand, .section-head, .actions-row, .bottom-note, .field, .notice, .dots, .keypad, .feedback, .session-stats { display: none !important; }
  .panel, .print-panel { box-shadow: none; border: 0; background: #fff; }
  .print-preview { border: 0; padding: 0; }
}

/* ===== 页面动效模式 ===== */
.teaching-animation-app .app-frame { animation: lesson-frame-in .42s cubic-bezier(.2,.8,.2,1) both; }
.teaching-animation-app .brand h1 { animation: lesson-title-in .65s cubic-bezier(.2,.8,.2,1) both; }
.teaching-animation-app .panel { animation: lesson-panel-in .52s .06s cubic-bezier(.2,.8,.2,1) both; }
.teaching-animation-app .menu-btn { position: relative; overflow: hidden; animation: lesson-card-in .48s cubic-bezier(.2,.8,.2,1) both; }
.teaching-animation-app .menu-btn:nth-child(1) { animation-delay: .08s; }
.teaching-animation-app .menu-btn:nth-child(2) { animation-delay: .14s; }
.teaching-animation-app .menu-btn:nth-child(3) { animation-delay: .20s; }
.teaching-animation-app .menu-btn:nth-child(4) { animation-delay: .26s; }
.teaching-animation-app .menu-btn:nth-child(5) { animation-delay: .32s; }
.teaching-animation-app .menu-btn:nth-child(6) { animation-delay: .38s; }
.teaching-animation-app .menu-btn::after { content: ''; position: absolute; inset: 0 auto 0 -35%; width: 28%; transform: skewX(-18deg); background: rgba(255,255,255,.24); animation: lesson-sweep 1.15s .45s ease-out both; pointer-events: none; }
.teaching-animation-app .teaching-screen { animation: lesson-screen-in .48s cubic-bezier(.2,.8,.2,1) both; }
.teaching-animation-app .screen-mark { animation: lesson-feedback-in .28s ease both; }
@keyframes lesson-frame-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lesson-title-in { from { opacity: 0; transform: translateY(-10px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes lesson-panel-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lesson-card-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes lesson-screen-in { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes lesson-feedback-in { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lesson-sweep { from { left: -35%; } to { left: 135%; } }
@media (prefers-reduced-motion: reduce) {
  .teaching-animation-app *, .teaching-animation-app *::before, .teaching-animation-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}