/* ============ 308 学习乐园 · 全局样式 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #FFF9F0;
  --ink: #1F2937;
  --ink2: #6B7280;
  --math: #3B82F6; --math-l: #EAF2FE; --math-d: #1D4ED8;
  --yw: #F96B3A;   --yw-l: #FFF0E8;   --yw-d: #C2410C;
  --en: #22B573;   --en-l: #E8F7F0;   --en-d: #047857;
  --other: #7C3AED; --other-l: #F1ECFE; --other-d: #6D28D9;
  --star: #FFC93C;
  --red: #EF4444;
  --green: #22B573;
  --radius: 20px;
  --shadow: 0 4px 14px rgba(31,41,55,.10);
  --shadow2: 0 10px 26px rgba(31,41,55,.16);
  --bounce: cubic-bezier(.34,1.56,.64,1);
}
html { font-size: 17px; }
body {
  font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Yuanti SC","Rounded Mplus 1c",sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
input, select { font-family: inherit; font-size: 1rem; }
.page { max-width: 1080px; margin: 0 auto; padding: 18px 18px 110px; }
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-6px);} 80%{transform:translateX(6px);} }
@keyframes pop { 0%{transform:scale(.6);opacity:0;} 70%{transform:scale(1.08);} 100%{transform:scale(1);opacity:1;} }
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

/* ============ 顶部栏 ============ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 3px solid #FFE9C7;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.topbar .logo { font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar .logo .star-dot { animation: floaty 2.4s ease-in-out infinite; }
.topbar .spacer { flex: 1; }
.star-pill {
  background: #FFF3D6; border: 2px solid #FFD970; color: #92600A;
  border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 1.05rem;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.user-pill {
  background: var(--math-l); color: var(--math-d); border-radius: 999px;
  padding: 6px 14px; font-weight: 700; white-space: nowrap;
}
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; background: #F3F4F6;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
  transition: transform .15s var(--bounce);
}
.icon-btn:active { transform: scale(.92); }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px; padding: 12px 20px; font-size: 1.05rem; font-weight: 700;
  min-height: 48px; transition: transform .12s var(--bounce), box-shadow .2s, background .2s;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn-lg { min-height: 54px; font-size: 1.15rem; padding: 14px 26px; border-radius: 16px; }
.btn-primary { color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { box-shadow: var(--shadow2); }
.btn-outline { background: #fff; border: 3px solid var(--ink); color: var(--ink); }
.btn-ghost { background: #F3F4F6; color: var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============ 通用卡片 ============ */
.card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 16px;
}
.back-bar {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink2);
  background: #fff; border: none; border-radius: 999px; padding: 8px 16px; margin-bottom: 14px;
  box-shadow: var(--shadow); min-height: 44px; font-size: 16px; font-family: inherit;
  cursor: pointer; text-decoration: none; transition: transform .12s var(--bounce), box-shadow .2s;
}
.back-bar:hover { box-shadow: var(--shadow-h, 0 8px 24px rgba(31,41,55,.14)); transform: translateY(-1px); }
.back-bar:active { transform: scale(.96); }

/* ============ 登录页 ============ */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  background: #fff; border-radius: 28px; box-shadow: var(--shadow2);
  width: 100%; max-width: 460px; padding: 34px 30px; text-align: center;
}
.login-logo { font-size: 3.4rem; animation: floaty 3s ease-in-out infinite; }
.login-card h1 { font-size: 1.9rem; margin: 8px 0 4px; }
.login-card .sub { color: var(--ink2); margin-bottom: 22px; font-size: 1.05rem; }
.field { text-align: left; margin-bottom: 16px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.field input {
  width: 100%; border: 3px solid #E5E7EB; border-radius: 14px; padding: 14px 16px;
  font-size: 1.15rem; min-height: 54px; outline: none; transition: border-color .2s;
}
.field input:focus { border-color: var(--math); }
.login-err { color: var(--red); font-weight: 700; min-height: 1.6em; margin-top: 4px; }
.login-card .btn-primary { width: 100%; background: var(--math); margin-top: 6px; }
.login-roster { margin-top: 18px; font-size: .92rem; color: var(--ink2); }

/* ============ 首页 ============ */
.hello-card {
  background: linear-gradient(135deg, #FFF6E3 0%, #FFEFD0 100%);
  border-radius: 24px; padding: 24px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
  border: 3px solid #FFE3AE;
}
.hello-card .avatar {
  width: 72px; height: 72px; border-radius: 50%; background: var(--star);
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(255,201,60,.5);
}
.hello-card h2 { font-size: 1.55rem; }
.hello-card .sub { color: var(--ink2); }
.hello-stats { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.stat-chip {
  background: #fff; border-radius: 16px; padding: 10px 16px; text-align: center;
  box-shadow: var(--shadow); min-width: 96px;
}
.stat-chip b { display: block; font-size: 1.5rem; }
.stat-chip span { color: var(--ink2); font-size: .9rem; }

.section-title { font-size: 1.3rem; font-weight: 800; margin: 22px 4px 14px; display: flex; align-items: center; gap: 8px; }
.subj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.subj-card {
  border-radius: 24px; padding: 24px 22px 20px; color: #fff; position: relative; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .2s var(--bounce), box-shadow .2s;
  display: flex; flex-direction: column; min-height: 196px; text-align: left;
}
.subj-card:hover { transform: translateY(-6px); box-shadow: var(--shadow2); }
.subj-card .big-emoji { font-size: 3.2rem; display: block; margin-bottom: 8px; line-height: 1; }
.subj-card h3 { font-size: 1.55rem; }
.subj-card p { opacity: .94; font-size: .98rem; margin-top: 6px; line-height: 1.45; }
.subj-card .go {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center;
  background: rgba(255,255,255,.22); border-radius: 999px; padding: 9px 18px;
  font-weight: 700; font-size: .98rem; min-height: 40px; transition: background .15s, transform .12s var(--bounce);
}
.subj-card:hover .go { background: rgba(255,255,255,.38); transform: scale(1.05); }
.subj-card.math { background: var(--math); }
.subj-card.yuwen { background: var(--yw); }
.subj-card.english { background: var(--en); }
.subj-card.other { background: var(--other); }

.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quick-card {
  background: #fff; border-radius: 20px; padding: 20px; box-shadow: var(--shadow);
  text-align: center; font-weight: 800; font-size: 1.1rem; transition: transform .15s var(--bounce);
  display: block;
}
.quick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow2); }
.quick-card .qe { font-size: 2rem; display: block; margin-bottom: 6px; }
.quick-card .badge-num { color: var(--red); }

/* ============ 学科页 ============ */
.subj-hero {
  border-radius: 24px; padding: 22px 26px; color: #fff; display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px; box-shadow: var(--shadow);
}
.subj-hero .sh-emoji { font-size: 2.8rem; }
.subj-hero h2 { font-size: 1.7rem; }
.subj-hero p { opacity: .94; }
.unit-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.unit-chip {
  background: #fff; border: 2px solid transparent; border-radius: 999px; padding: 9px 16px;
  font-size: .95rem; color: var(--ink2); box-shadow: var(--shadow); font-weight: 700;
  font-family: inherit; cursor: pointer; min-height: 44px; line-height: 1.2;
  transition: transform .12s var(--bounce), background .15s, color .15s, box-shadow .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.unit-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow2); }
.unit-chip:active { transform: scale(.95); }
.unit-chip.active {
  background: var(--brand, var(--math)); color: #fff; border-color: var(--brand, var(--math));
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}
/* 空态提示 */
.empty-unit {
  background: #FFF6E8; border: 2px dashed #F2C97D; border-radius: 18px; padding: 26px 18px;
  text-align: center; color: #9A6A1F; font-size: 1.05rem; font-weight: 700; margin-bottom: 8px;
}
.item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.item-card {
  background: #fff; border-radius: 20px; padding: 18px; box-shadow: var(--shadow);
  transition: transform .15s var(--bounce), box-shadow .2s; display: block;
  border-top: 6px solid transparent;
}
.item-card:hover { transform: translateY(-5px); box-shadow: var(--shadow2); }
.item-card .ic-emoji { font-size: 2rem; }
.item-card h4 { font-size: 1.12rem; margin: 8px 0 4px; }
.item-card p { color: var(--ink2); font-size: .92rem; }
.item-card.t-math { border-top-color: var(--math); }
.item-card.t-yuwen { border-top-color: var(--yw); }
.item-card.t-english { border-top-color: var(--en); }
.item-card.t-other { border-top-color: var(--other); }
.item-card.game { border-top-color: var(--star); }
.best-score { display: inline-block; margin-top: 8px; font-size: .85rem; color: #92600A; background: #FFF3D6; border-radius: 999px; padding: 3px 10px; font-weight: 700; }

/* ============ v17.0 其他学科（道法 + 科学） ============ */
.game-badge {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  font-size: .78rem; font-weight: 800; padding: 3px 11px; border-radius: 999px;
}
.game-badge.gb-sci { background: var(--math-l); color: var(--math-d); }
.game-badge.gb-df { background: var(--yw-l); color: var(--yw-d); }
.mem-grid.ot .mem-front { background: var(--other); }
.tf-light { height: 14px; max-width: 520px; margin: 0 auto 20px; border-radius: 999px; background: #E5E7EB; transition: background .25s, box-shadow .25s; }
.tf-light.ok { background: var(--green); box-shadow: 0 0 18px rgba(34, 181, 115, .55); }
.tf-light.no { background: var(--red); box-shadow: 0 0 18px rgba(239, 68, 68, .55); }
.tf-q { font-size: 1.5rem; font-weight: 800; line-height: 1.7; max-width: 560px; margin: 8px auto 4px; }
.tf-hint { color: var(--ink2); font-size: 1.05rem; margin-bottom: 8px; }
.tf-btns { display: flex; gap: 16px; justify-content: center; margin: 18px 0 14px; flex-wrap: wrap; }
.tf-btn {
  min-width: 132px; min-height: 64px; font-size: 1.45rem; font-weight: 800;
  border: none; border-radius: 18px; color: #fff; cursor: pointer;
  transition: transform .12s var(--bounce), box-shadow .2s;
}
.tf-btn.yes { background: var(--green); box-shadow: 0 6px 0 #15803d; }
.tf-btn.no { background: var(--red); box-shadow: 0 6px 0 #B91C1C; }
.tf-btn:active { transform: scale(.97) translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }

/* ============ 练习配置 / 做题 ============ */
.prac-head { border-radius: 22px; padding: 22px; display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.prac-icon { font-size: 3rem; }
.prac-head h2 { font-size: 1.6rem; }
.prac-head p { color: var(--ink2); }
.config-card h3 { margin-bottom: 14px; font-size: 1.2rem; }
.cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 2px dashed #F3F4F6; flex-wrap: wrap; }
.cfg-row span { font-weight: 700; }
.cfg-row select { border: 3px solid #E5E7EB; border-radius: 12px; padding: 10px 14px; min-height: 48px; font-size: 1.05rem; font-weight: 700; background: #fff; }
.cfg-check { display: flex; align-items: center; gap: 10px; padding: 14px 0; font-weight: 600; color: var(--ink2); }
.cfg-check input { width: 24px; height: 24px; }
.cfg-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.cfg-actions .btn { flex: 1; min-width: 200px; }
.tip { text-align: center; color: var(--ink2); padding: 8px; }

.quiz-bar {
  position: sticky; top: 70px; z-index: 20; background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  border-radius: 16px; box-shadow: var(--shadow); padding: 12px 18px;
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.quiz-bar span { color: var(--ink2); font-weight: 700; }
.quiz-bar .btn { margin-left: auto; min-height: 44px; padding: 8px 18px; }
.bottom-submit { position: static; margin-top: 18px; }
.q-card { padding: 16px 18px; }
.q-top { display: flex; align-items: flex-start; gap: 10px; }
.q-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem;
}
.q-prompt { font-size: 1.18rem; font-weight: 600; flex: 1; padding-top: 2px; word-break: break-word; }
.q-big { font-size: 1.5rem; letter-spacing: 2px; }
.speak-btn { font-size: 1.3rem; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--en-l); }
.q-input {
  margin-top: 12px; width: 100%; border: 3px solid #E5E7EB; border-radius: 12px;
  padding: 12px 14px; font-size: 1.2rem; min-height: 52px; outline: none;
}
.q-input:focus { border-color: var(--math); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.choice-btn {
  background: #F9FAFB; border: 3px solid #E5E7EB; border-radius: 14px; padding: 14px 10px;
  font-size: 1.12rem; font-weight: 700; min-height: 52px; transition: all .12s;
}
.choice-btn.sel { background: var(--math-l); border-color: var(--math); color: var(--math-d); transform: scale(1.03); }
.choice-btn.locked { pointer-events: none; }
.choice-btn.ans-right { background: #DCFCE7; border-color: var(--green); color: #15803D; }
.q-card.right { border: 3px solid #BBF7D0; }
.q-card.wrong { border: 3px solid #FECACA; animation: shake .4s ease; }
.q-fb { margin-top: 10px; font-size: 1.05rem; display: none; }
.q-card.right .q-fb, .q-card.wrong .q-fb { display: block; animation: pop .3s var(--bounce) both; }
.q-card.right .q-input, .q-card.wrong .q-input { pointer-events: none; }
.q-card.right .q-input { border-color: #86EFAC; background: #F0FDF4; }
.q-card.wrong .q-input { border-color: #FCA5A5; background: #FEF2F2; }

.result-card { text-align: center; padding: 28px; border: 4px solid #FFE3AE; background: #FFFBF2; }
.result-card.all-right { border-color: var(--star); background: #FFFBEB; }
.result-emoji { font-size: 3.4rem; animation: pop .5s var(--bounce) both; }
.result-card h2 { font-size: 1.6rem; margin: 6px 0; }
.result-score { font-size: 1.25rem; }
.result-score b { color: var(--green); font-size: 1.6rem; }
.result-stars { font-size: 1.3rem; font-weight: 800; color: #B45309; margin: 8px 0; }
.result-badges { margin-top: 10px; font-weight: 700; color: var(--yw-d); }
.mini-badge {
  display: inline-block; background: #FFF3D6; border: 2px solid var(--star); border-radius: 999px;
  padding: 4px 12px; margin: 4px 4px 0; font-size: .95rem;
}
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* ============ 错题本 / 勋章墙 / 成绩单 ============ */
.wrong-group { margin-bottom: 20px; }
.wrong-item { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 10px; border-left: 6px solid var(--red); }
.wrong-item .wq { font-weight: 700; font-size: 1.08rem; }
.wrong-item .wa { color: #15803D; font-weight: 700; margin-top: 4px; }
.wrong-item .wm { color: var(--red); }
.wrong-item .wt { color: var(--ink2); font-size: .85rem; margin-top: 4px; }
.empty-box { text-align: center; padding: 60px 20px; color: var(--ink2); }
.empty-box .ee { font-size: 4rem; display: block; margin-bottom: 10px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.badge-cell {
  background: #fff; border-radius: 18px; padding: 18px 12px; text-align: center; box-shadow: var(--shadow);
}
.badge-cell .bi { font-size: 2.6rem; filter: none; }
.badge-cell.locked .bi { filter: grayscale(1); opacity: .35; }
.badge-cell h5 { font-size: 1rem; margin-top: 6px; }
.badge-cell.locked h5 { color: var(--ink2); }
.badge-cell p { font-size: .82rem; color: var(--ink2); margin-top: 2px; }
.badge-cell.locked { background: #F9FAFB; }

.report-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.report-table th, .report-table td { padding: 12px 14px; text-align: left; border-bottom: 2px solid #F3F4F6; font-size: 1.02rem; }
.report-table th { background: #FFF3D6; }

/* ============ 游戏通用 ============ */
.game-shell { background: #fff; border-radius: 24px; box-shadow: var(--shadow2); padding: 20px; min-height: 420px; }
.game-hud { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.hud-pill { background: #F3F4F6; border-radius: 999px; padding: 8px 18px; font-weight: 800; font-size: 1.1rem; }
.hud-pill.timer { background: var(--yw-l); color: var(--yw-d); }
.hud-pill.timer.urgent { background: #FEE2E2; color: var(--red); animation: pulse .6s infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.hud-pill.combo { background: #FFF3D6; color: #B45309; }
.game-stage { text-align: center; }
.game-q { font-size: 1.7rem; font-weight: 800; margin: 18px 0; min-height: 2.2em; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.game-q .big-pinyin { font-size: 2.2rem; color: var(--yw-d); letter-spacing: 3px; }
.game-input-row { display: flex; gap: 10px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.game-input {
  border: 4px solid var(--math); border-radius: 16px; padding: 14px 18px;
  font-size: 1.8rem; font-weight: 800; width: 200px; text-align: center; outline: none; min-height: 60px;
}
.game-btn {
  border-radius: 16px; padding: 14px 28px; font-size: 1.2rem; font-weight: 800; min-height: 56px;
  color: #fff; transition: transform .12s var(--bounce); box-shadow: var(--shadow);
}
.game-btn:active { transform: scale(.95); }
.ans-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 16px 0; }
.ans-btn {
  background: #F9FAFB; border: 3px solid #E5E7EB; border-radius: 16px; padding: 16px 8px;
  font-size: 1.25rem; font-weight: 800; min-height: 60px; transition: all .12s;
}
.ans-btn:active { transform: scale(.95); }
.ans-btn.good { background: #DCFCE7; border-color: var(--green); color: #15803D; }
.ans-btn.bad { background: #FEE2E2; border-color: var(--red); color: #B91C1C; animation: shake .35s; }
.ans-btn:disabled { pointer-events: none; }
.game-msg { min-height: 1.8em; font-size: 1.2rem; font-weight: 800; margin: 8px 0; }
.game-msg.ok { color: #16A34A; }
.game-msg.no { color: #DC2626; }
.game-over { text-align: center; padding: 30px 10px; }
.game-over .go-emoji { font-size: 3.6rem; animation: pop .5s var(--bounce) both; }
.game-over h2 { font-size: 1.8rem; margin: 8px 0; }
.game-over .go-score { font-size: 1.4rem; font-weight: 800; color: #B45309; }
.game-over .go-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.flash-correct { animation: flashGreen .5s; }
.flash-wrong { animation: flashRed .5s; }
@keyframes flashGreen { 30% { background: #DCFCE7; } }
@keyframes flashRed { 30% { background: #FEE2E2; } }

/* 翻牌 */
.mem-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); max-width: 520px; margin: 0 auto; }
.mem-grid.cols-6 { grid-template-columns: repeat(6, 1fr); max-width: 640px; }
.mem-card {
  aspect-ratio: 3/4; perspective: 600px; cursor: pointer;
}
.mem-inner {
  position: relative; width: 100%; height: 100%; transition: transform .35s var(--bounce);
  transform-style: preserve-3d;
}
.mem-card.flipped .mem-inner, .mem-card.done .mem-inner { transform: rotateY(180deg); }
.mem-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem; padding: 4px; text-align: center; word-break: break-word;
}
.mem-front { background: var(--math); color: #fff; font-size: 1.6rem; }
.mem-back { background: #fff; border: 3px solid #FDE68A; color: var(--ink); transform: rotateY(180deg); }
.mem-card.done .mem-back { background: #DCFCE7; border-color: var(--green); }
.mem-grid.yw .mem-front { background: var(--yw); }
.mem-grid.en .mem-front { background: var(--en); }

/* 地鼠 */
.mole-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 20px 0; }
.mole-hole {
  width: 150px; height: 150px; border-radius: 50% 50% 18px 18px;
  background: radial-gradient(circle at 50% 75%, #8B5E3C 0%, #6B4423 70%);
  position: relative; overflow: hidden; flex-shrink: 0;
}
.mole {
  position: absolute; left: 50%; bottom: -100%; transform: translateX(-50%);
  width: 110px; height: 110px; border-radius: 50% 50% 40% 40%;
  background: #A1662F; border: 4px solid #7C4A21;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; color: #fff; text-align: center; line-height: 1.15;
  transition: bottom .18s var(--bounce); cursor: pointer; user-select: none;
  padding: 8px;
}
.mole.up { bottom: 12px; }
.mole.hit { background: var(--star); color: #7C4A21; }
.mole.en-mole { font-size: 1.15rem; }

/* 购物 */
.shop-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.shop-item {
  background: #FFF7ED; border: 3px solid #FED7AA; border-radius: 16px; padding: 12px 8px;
  text-align: center; font-weight: 700; transition: transform .12s;
}
.shop-item:active { transform: scale(.94); }
.shop-item.picked { background: #FFEDD5; border-color: var(--yw); }
.shop-item .si-emoji { font-size: 2rem; display: block; }
.shop-item .si-price { color: var(--yw-d); font-size: .95rem; }
.shop-tray { background: var(--yw-l); border-radius: 16px; padding: 14px; margin: 14px 0; min-height: 60px; font-weight: 700; }

/* 闯关进度 */
.adv-track {
  position: relative; height: 70px; background: linear-gradient(#BDE0FE 0 62%, #94D82D 62% 78%, #8B5E3C 78%);
  border-radius: 16px; margin: 18px 0; overflow: hidden;
}
.adv-hero { position: absolute; bottom: 22px; font-size: 2.4rem; transition: left .4s var(--bounce); }
.adv-flag { position: absolute; right: 8px; bottom: 20px; font-size: 2rem; }

/* 披萨 / 角度 SVG 区 */
.pizza-box, .angle-box { display: flex; justify-content: center; margin: 10px 0; }
.pizza-slice { cursor: pointer; transition: opacity .15s; }
.pizza-slice.sel { opacity: .35; }
.angle-ray { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.angle-arc { fill: none; stroke: var(--math); stroke-width: 4; }

/* 气球 */
.balloon-stage { position: relative; height: 340px; margin: 14px 0; overflow: hidden; border-radius: 18px; background: linear-gradient(#E0F2FE, #F0F9FF); }
.balloon {
  position: absolute; font-size: 3.2rem; cursor: pointer; transition: transform .1s;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
.balloon:active { transform: scale(.85); }
.balloon.popped { visibility: hidden; }

/* 钓鱼 */
.fish-stage { position: relative; height: 300px; margin: 14px 0; overflow: hidden; border-radius: 18px; background: linear-gradient(#7DD3FC, #0EA5E9); }
.fish {
  position: absolute; font-size: 2rem; cursor: pointer; background: rgba(255,255,255,.92);
  border-radius: 999px; padding: 6px 14px; font-weight: 800; color: #0369A1; white-space: nowrap;
  transition: top 1s linear, left 1s linear;
}
.fish.caught { visibility: hidden; }

/* 摘苹果 */
.apple-tree { font-size: 2.6rem; cursor: pointer; display: inline-block; transition: transform .12s; padding: 4px; }
.apple-tree.picked { opacity: .25; pointer-events: none; }
.apple-basket { font-size: 3rem; min-height: 70px; }

/* ============ Toast ============ */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(30px);
  background: rgba(31,41,55,.92); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-weight: 700; opacity: 0; pointer-events: none; transition: all .3s var(--bounce); z-index: 200;
  max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ 底部导航（手机） ============ */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-top: 3px solid #FFE9C7; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  justify-content: space-around;
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .78rem; font-weight: 700; color: var(--ink2); min-width: 64px; padding: 4px;
}
.bottom-nav a .bn-emoji { font-size: 1.5rem; }
.bottom-nav a.active { color: var(--math-d); }

/* ============ 响应式 ============ */
@media (max-width: 900px) {
  .subj-grid, .item-grid, .quick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  html { font-size: 16px; }
  .subj-grid, .item-grid, .quick-grid { grid-template-columns: 1fr; }
  .subj-card { min-height: 0; }
  .subj-card p { font-size: 1.02rem; }
  .bottom-nav { display: flex; }
  .topbar .user-pill { display: none; }
  .hello-stats { margin-left: 0; width: 100%; }
  .quiz-bar { top: 64px; }
  .mem-grid { grid-template-columns: repeat(4, 1fr); }
  .mem-grid.cols-6 { grid-template-columns: repeat(4, 1fr); }
  .mole-hole { width: 105px; height: 105px; }
  .mole { width: 78px; height: 78px; font-size: 1.1rem; }
  .game-q { font-size: 1.35rem; }
  .fish { font-size: 1.3rem; padding: 5px 10px; }
}

/* 练习/做题全屏页（自带返回栏，无底部导航） */
.practice-screen{min-height:100vh;padding:16px 0 40px;}
.practice-screen #view{max-width:960px;margin:0 auto;padding:0 14px;}

/* 练习配置页选项 */
.opts-panel{display:flex;flex-direction:column;gap:10px;margin:16px 0;}
.opt-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#FFF9F0;padding:12px 14px;border-radius:14px;}
.opt-row label{font-weight:700;color:#1F2937;min-width:80px;}
.opt-chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{border:2px solid #E5E7EB;background:#fff;color:#1F2937;padding:8px 16px;border-radius:999px;font-size:15px;font-weight:700;cursor:pointer;min-height:44px;font-family:inherit;}
.chip.active{border-color:var(--brand);background:var(--brand-lt);color:var(--brand);}
.practice-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}

/* 拓展标签（保留样式备用，当前 UI 未使用） */
.item-card { position: relative; }
.tier-badge {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  font-size: .72rem; font-weight: 800; padding: 2px 9px; border-radius: 999px;
  line-height: 1.5;
}
.tier-badge.adv { background: linear-gradient(135deg,#F96B3A,#F97316); color:#fff; box-shadow: 0 2px 6px rgba(249,107,58,.35); }

/* ================= 每日作业模块 ================= */
/* 首页入口大卡 */
.hw-home-card{
  display:flex;align-items:center;gap:14px;margin:18px 4px 6px;
  background:linear-gradient(135deg,#8B5CF6 0%,#6D28D9 100%);
  border-radius:20px;padding:16px 18px;text-decoration:none;color:#fff;
  box-shadow:0 8px 20px rgba(109,40,217,.28);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;
  min-height:64px;
}
.hw-home-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(109,40,217,.36);}
.hw-home-card:active{transform:scale(.97);}
.hw-home-icon{font-size:2rem;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));}
.hw-home-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.hw-home-title{font-size:1.2rem;font-weight:800;}
.hw-home-sub{font-size:.92rem;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hw-home-sub.has-hw{color:#FFF3C4;font-weight:700;}
.hw-home-go{font-size:1.2rem;font-weight:800;}

/* 作业页 */
.hw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.hw-refresh{flex-shrink:0;}
.hw-tabs{display:flex;gap:8px;overflow-x:auto;padding:14px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.hw-tabs::-webkit-scrollbar{display:none;}
.hw-tab{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  border:2px solid #E5E7EB;background:#fff;color:#1F2937;
  padding:10px 16px;border-radius:999px;font-size:1rem;font-weight:700;
  cursor:pointer;min-height:46px;font-family:inherit;
  transition:all .15s;
}
.hw-tab .hw-tab-emoji{font-size:1.1rem;}
.hw-tab:active{transform:scale(.95);}
.hw-tab.active{border-color:#8B5CF6;background:#F1ECFE;color:#6D28D9;box-shadow:0 3px 8px rgba(139,92,246,.25);}
.hw-tab-date{font-size:.72rem;font-weight:600;color:#9CA3AF;background:#F3F4F6;border-radius:999px;padding:1px 8px;margin-left:2px;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hw-tab.active .hw-tab-date{background:#fff;color:#7C3AED;}

.hw-date-card{background:#fff;border-radius:18px;padding:16px 16px 8px;margin-bottom:16px;box-shadow:0 2px 10px rgba(31,41,55,.06);}
.hw-date-head{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:2px dashed #F3F4F6;margin-bottom:12px;}
.hw-date-title{font-size:1.12rem;font-weight:800;color:#1F2937;}
.hw-date-week{font-size:.9rem;color:#9CA3AF;font-weight:600;}
.hw-block{margin-bottom:12px;}
.hw-block-head{margin-bottom:8px;}
.hw-subj-tag{display:inline-block;font-size:.95rem;font-weight:800;padding:4px 14px;border-radius:999px;}
.hw-item{background:#FFFBF5;border:1px solid #F3EDE2;border-radius:14px;padding:12px 14px;margin-bottom:8px;}
.hw-content{font-size:1.02rem;line-height:1.75;color:#1F2937;word-break:break-word;}
.hw-line{min-height:1.4em;}
.hw-atts{margin-top:10px;display:flex;flex-direction:column;gap:8px;}
.hw-att{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #EDE6D9;border-radius:12px;padding:8px 10px;flex-wrap:wrap;}
.hw-att-name{flex:1;min-width:0;font-size:.95rem;font-weight:700;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hw-att-ops{display:flex;gap:8px;flex-shrink:0;}
.hw-att-btn{
  display:inline-flex;align-items:center;gap:4px;text-decoration:none;
  border:none;border-radius:10px;padding:8px 14px;font-size:.92rem;font-weight:700;
  cursor:pointer;min-height:40px;font-family:inherit;
}
a.hw-att-btn{line-height:1;}
.hw-att-btn.dl{background:#EAF2FE;color:#1D4ED8;}
.hw-att-btn.pr{background:#F1ECFE;color:#6D28D9;}
.hw-att-btn:active{transform:scale(.95);}

/* 骨架屏 */
.hw-loading{display:flex;flex-direction:column;gap:14px;}
.hw-skel-card{background:#fff;border-radius:18px;padding:18px;}
.sk{height:16px;border-radius:8px;background:linear-gradient(90deg,#F3F4F6 25%,#E5E7EB 37%,#F3F4F6 63%);background-size:400% 100%;animation:sk-shine 1.3s ease infinite;margin-bottom:12px;}
.sk-title{height:20px;width:40%;}
.sk-line{width:92%;}
.sk-line.short{width:68%;margin-bottom:0;}
@keyframes sk-shine{0%{background-position:100% 0;}100%{background-position:-100% 0;}}

/* 空态 / 错态 */
.hw-empty{background:#fff;border-radius:18px;padding:40px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.hw-empty-emoji{font-size:3rem;line-height:1;}
.hw-empty p{font-size:1.15rem;font-weight:800;color:#1F2937;margin:4px 0 0;}
.hw-empty-sub{font-size:.95rem;color:#9CA3AF;}
.hw-empty .btn-lg{margin-top:12px;}
.hw-error .hw-empty-emoji{animation:none;}

@media (max-width:768px){
  .hw-att{flex-direction:column;align-items:stretch;}
  .hw-att-name{white-space:normal;line-height:1.5;}
  .hw-att-ops{justify-content:stretch;}
  .hw-att-btn{flex:1;justify-content:center;}
  .hw-home-sub{white-space:normal;font-size:.86rem;}
}

/* ================= 提升练习模块 ================= */
/* 学科页入口卡 */
.ts-entry{
  display:flex;align-items:center;gap:12px;margin:14px 4px 4px;
  background:var(--ts-lt,#F3F4F6);border:2px dashed var(--ts-color,#9CA3AF);
  border-radius:16px;padding:13px 16px;text-decoration:none;color:#1F2937;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;
  min-height:56px;
}
.ts-entry:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(31,41,55,.10);}
.ts-entry:active{transform:scale(.97);}
.ts-entry-mark{font-size:1.7rem;line-height:1;}
.ts-entry-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ts-entry-title{font-size:1.12rem;font-weight:800;color:var(--ts-color,#1F2937);}
.ts-entry-sub{font-size:.85rem;color:#6B7280;}
.ts-entry-go{font-size:.95rem;font-weight:800;color:var(--ts-color,#1F2937);flex-shrink:0;}

/* 提升练习列表页 */
.ts-list{display:flex;flex-direction:column;gap:16px;padding-bottom:8px;}
.ts-unit.card{border-radius:20px;padding:16px;box-shadow:0 2px 10px rgba(31,41,55,.06);}
.ts-unit-title{font-size:1.2rem;font-weight:800;color:#1F2937;margin:0 0 12px;display:flex;align-items:center;gap:8px;}
.ts-unit-sub{font-size:.88rem;color:#9CA3AF;margin:-6px 0 12px 14px;line-height:1.5;}
.ts-unit-title::before{content:"";width:6px;height:20px;border-radius:3px;background:var(--ts,#3B82F6);display:inline-block;}
.ts-row{border:1.5px solid #F3EDE2;border-radius:14px;padding:12px 14px;margin-bottom:10px;background:#FFFDF8;}
.ts-row:last-child{margin-bottom:0;}
.ts-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.ts-badge{font-size:.9rem;font-weight:800;padding:3px 12px;border-radius:999px;}
.ts-sub{font-size:.85rem;color:#9CA3AF;}
.ts-ops{display:flex;gap:8px;flex-wrap:wrap;}
.ts-btn{
  display:inline-flex;align-items:center;gap:4px;flex:1;justify-content:center;
  border:none;border-radius:12px;padding:11px 10px;font-size:.98rem;font-weight:800;
  background:var(--ts-lt,#EAF2FE);color:var(--ts,#1D4ED8);cursor:pointer;min-height:46px;font-family:inherit;
  text-decoration:none;min-width:96px;
}
.ts-btn:active{transform:scale(.96);}
a.ts-btn.ts-dl{background:#fff;border:1.5px solid var(--ts,#3B82F6);color:var(--ts,#1D4ED8);}
.ts-page{box-shadow:none;border:1px solid #F0EBE1;}

/* 期末各单元分值占比：入口条 + 弹窗条形图（v17.5，零依赖纯 CSS） */
.ts-dist-bar{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  margin:12px 0 14px;padding:11px 14px;min-height:44px;
  background:var(--ts-lt,#EAF2FE);color:var(--ts,#1D4ED8);
  border:none;border-radius:14px;font-size:.95rem;font-weight:800;font-family:inherit;
  cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;
}
.ts-dist-bar:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(31,41,55,.10);}
.ts-dist-bar:active{transform:scale(.97);}
.ts-dist-mask{
  position:fixed;inset:0;z-index:300;background:rgba(31,41,55,.45);
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:fadeIn .2s ease both;
}
.ts-dist-card{
  background:#fff;border-radius:20px;width:calc(100% - 32px);max-width:560px;
  max-height:80vh;overflow-y:auto;padding:18px 18px 16px;
  box-shadow:0 12px 32px rgba(31,41,55,.18);
  animation:tsPop .28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes tsPop{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:none;}}
.ts-dist-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.ts-dist-head h3{font-size:1.15rem;font-weight:800;color:#1F2937;margin:0;}
.ts-dist-close{
  border:none;background:#F3F4F6;color:#6B7280;width:34px;height:34px;border-radius:50%;
  font-size:15px;font-weight:800;cursor:pointer;flex-shrink:0;font-family:inherit;line-height:1;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
.ts-dist-close:hover{background:#E5E7EB;}
.ts-dist-close:active{transform:scale(.94);}
.ts-dist-intro{font-size:.85rem;color:#6B7280;line-height:1.6;margin:0 0 14px;}
.ts-dist-rows{display:flex;flex-direction:column;gap:9px;margin-bottom:14px;}
.ts-dist-row{display:flex;align-items:center;gap:8px;}
.ts-dist-label{flex:0 1 42%;min-width:0;font-size:12px;color:#4B5563;line-height:1.35;}
.ts-dist-track{flex:1;min-width:0;height:14px;border-radius:7px;background:#F3F4F6;overflow:hidden;}
.ts-dist-fill{display:block;height:100%;border-radius:7px;background:var(--ts,#3B82F6);min-width:6px;transition:width .4s cubic-bezier(.34,1.56,.64,1);}
.ts-dist-fill.ts-dist-hi{background:#854F0B;}
.ts-dist-val{flex-shrink:0;font-size:11px;color:#5F5E5A;font-weight:700;white-space:nowrap;}
.ts-dist-note{font-size:11.5px;color:#9CA3AF;line-height:1.7;margin:0;border-top:1.5px dashed #F3EDE2;padding-top:10px;}
@media (max-width:400px){
  .ts-dist-label{flex-basis:46%;}
  .ts-dist-card{padding:16px 14px;}
}

@media (max-width:768px){
  .ts-entry-sub{white-space:normal;font-size:.8rem;}
  .ts-entry-go{display:none;}
  .ts-btn{flex:1 1 45%;}
  a.ts-btn.ts-dl{flex:1 1 100%;}
}

/* 提升练习·学科页同级板块入口卡 */
.item-card.ts-upgrade{
  grid-column:1 / -1; background:linear-gradient(135deg,#FFFDF5 0%,#fff 60%);
  border:2px dashed transparent; display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow); padding:18px 20px;
}
.item-card.ts-upgrade .ic-emoji{font-size:2.2rem;}
.item-card.ts-upgrade h4{margin:0;font-size:1.2rem;}
.item-card.ts-upgrade p{margin:2px 0 0;}
@media (max-width:768px){
  .item-card.ts-upgrade{flex-wrap:wrap;padding:16px;}
}

/* ===== 每日打卡区块 ===== */
.ck-block{margin-top:14px;padding:14px 14px 6px;background:#fff;border:2px solid #FDE68A;border-radius:16px;}
.ck-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:1.05rem;color:#92400E;margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed #FDE68A;}
.ck-head-count{font-size:.9rem;font-weight:800;color:#B45309;background:#FEF3C7;border-radius:999px;padding:3px 12px;}
.ck-head-count.ok{color:#166534;background:#DCFCE7;}
.ck-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-top:1px dashed #FDE68A;cursor:pointer;min-height:48px;border-radius:10px;transition:background .15s;}
.ck-row:first-of-type{border-top:none;}
.ck-row:hover{background:#FFFBEB;}
.ck-row:active{transform:scale(.985);}
.ck-check{font-size:1.35rem;line-height:1;flex:none;}
.ck-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ck-title{font-size:1rem;font-weight:700;color:#1F2937;word-break:break-all;}
.ck-row.done .ck-title{color:#9CA3AF;text-decoration:line-through;}
.ck-ch{display:inline-block;font-size:.78rem;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap;}
.ck-ch-ding{color:#1D4ED8;background:#EAF2FE;}
.ck-ch-circle{color:#C2410C;background:#FFF0E8;}
.ck-ch-plain{color:#6B7280;background:#F3F4F6;}
.ck-detail{flex-basis:100%;font-size:.85rem;color:#6B7280;line-height:1.5;}
/* 无书面作业轻提示（虚拟"今天"卡片内，打卡块之后） */
.hw-none{margin-top:10px;padding:12px 14px;background:#FFFBEF;border:1.5px dashed #FDE68A;border-radius:12px;color:#B45309;font-weight:600;font-size:.95rem;text-align:center;}

/* 在线做题 · 阅读短文置顶卡片（课内片段阅读/课外阅读） */
.read-card{background:#FFFBEB;border:1.5px solid #FDE68A;border-radius:16px;padding:16px 18px;margin-bottom:14px;}
.read-card .read-title{font-weight:800;text-align:center;font-size:19px;margin:0 0 8px;color:#92400E;}
.read-card p{margin:0;line-height:1.8;font-size:17px;text-indent:2em;color:#78350F;}

/* ============== 搭积木·看一看（m-stack，v17.12） ============== */
.ms-wrap{display:flex;gap:16px;align-items:flex-start;justify-content:center;flex-wrap:wrap;}
.ms-main{flex:1 1 480px;min-width:300px;max-width:640px;}
.ms-cvwrap{position:relative;display:inline-block;background:#F8FAFC;border:2px solid #E5E7EB;border-radius:18px;overflow:hidden;max-width:100%;}
.ms-cv{display:block;max-width:100%;height:auto;touch-action:none;cursor:grab;}
.ms-cvwrap:active .ms-cv{cursor:grabbing;}
.ms-tip{display:none;position:absolute;left:50%;bottom:12px;transform:translateX(-50%);max-width:88%;background:rgba(31,41,55,.88);color:#fff;font-size:.95rem;font-weight:600;line-height:1.5;padding:8px 14px;border-radius:12px;pointer-events:none;text-align:center;}
.ms-tip-sticky{background:rgba(30,64,175,.9);}
.ms-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px;}
.ms-btn{min-height:44px;padding:10px 20px;border:none;border-radius:14px;background:#3B82F6;color:#fff;font-size:1.05rem;font-weight:800;font-family:inherit;cursor:pointer;transition:transform .12s var(--bounce),box-shadow .12s;}
.ms-btn:active{transform:scale(.95);}
.ms-btn:hover{box-shadow:0 4px 12px rgba(59,130,246,.35);}
.ms-mode{background:#93C5FD;color:#1E3A8A;}
.ms-mode.ms-on{background:#3B82F6;color:#fff;}
.ms-home{background:#F3F4F6;color:#6B7280;}
.ms-side{flex:0 0 148px;display:flex;flex-direction:column;gap:12px;align-items:center;}
.ms-view{background:#fff;border:2px solid #E5E7EB;border-radius:14px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.ms-vt{font-size:.9rem;font-weight:800;color:#6B7280;}
.ms-targets{width:100%;display:flex;flex-direction:column;gap:10px;align-items:center;}
.ms-tt{font-size:1rem;font-weight:800;color:#1F2937;text-align:center;line-height:1.5;}
.ms-targets .ms-view{flex-direction:row;width:100%;justify-content:space-between;}
.ms-card{position:absolute;top:10px;left:50%;transform:translateX(-50%);max-width:86%;background:#fff;border:2px solid #FCA5A5;border-radius:14px;padding:12px 18px;font-size:1rem;font-weight:700;color:#B91C1C;box-shadow:0 8px 24px rgba(0,0,0,.12);text-align:center;animation:pop .35s var(--bounce) both;z-index:5;}
.ms-card-pass{border-color:#86EFAC;color:#15803D;}
.ms-card .ms-btn{margin-top:8px;min-height:44px;}
.ms-person{background:#EFF6FF;color:#1D4ED8;font-size:1rem;}
.ms-opts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px;}
.ms-opt{cursor:pointer;transition:transform .12s var(--bounce);}
.ms-opt:hover{transform:scale(1.06);border-color:#3B82F6;}
.ms-quiz-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
@media (max-width:768px){
  .ms-side{flex-direction:row;flex-wrap:wrap;justify-content:center;flex-basis:100%;}
  .ms-card{position:static;transform:none;margin-top:10px;}
}

/* v17.18 问答：观察区与答题按钮视觉区分 */
.ms-persons { margin-top: 14px; padding: 10px 8px 12px; background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 16px; }
.ms-pt { font-size: 13px; color: #6B7280; text-align: center; margin-bottom: 8px; }
.ms-persons .ms-person { background: #fff; color: #1D4ED8; border: 2px solid #DBEAFE; box-shadow: none; }
.ms-ot { text-align: center; font-size: 13px; color: #6B7280; margin: 10px 0 6px; }

/* v17.19 点小人直显该方向视图 */
#ms-peep-box { margin-top: 10px; background: #fff; border: 2px solid #DBEAFE; border-radius: 14px; padding: 8px; width: 100%; }

/* ===== v18 三上计算练习（口算 + 竖式手写板） co-/pad- ===== */
.co-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 4px; flex-wrap: wrap; }
.co-top h2 { margin: 0; font-size: 1.25rem; }
.co-progress { color: #6B7280; font-size: 0.92rem; }
.co-section-title { font-size: 1.05rem; font-weight: 800; color: #1F2937; margin: 18px 0 8px; }
.co-note { color: #6B7280; font-size: 0.88rem; margin: 2px 0 8px; }
.co-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.co-cell { background: #fff; border: 1.5px solid #E2E8F0; border-radius: 12px; padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.co-q { font-size: 1.02rem; font-weight: 700; color: #1F2937; text-align: center; white-space: nowrap; }
.co-in { width: 100%; min-height: 42px; border: 2px solid #DBEAFE; border-radius: 10px; text-align: center; font-size: 1.05rem; font-weight: 700; color: #1F2937; background: #F8FAFC; outline: none; }
.co-in:focus { border-color: #3B82F6; background: #fff; }
.co-in.co-ok { border-color: #22B573; background: #E8F7F0; color: #15803D; }
.co-in.co-wrong { border-color: #EF4444; background: #FEF2F2; color: #B91C1C; }
.co-vert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.co-vwrap { background: #fff; border: 1.5px solid #E2E8F0; border-radius: 14px; padding: 10px 12px; }
.co-vq { font-size: 1.1rem; font-weight: 800; color: #1F2937; }
.co-vrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.co-vin { flex: 1 1 90px; min-width: 84px; min-height: 44px; border: 2px solid #DBEAFE; border-radius: 10px; text-align: center; font-size: 1.05rem; font-weight: 700; color: #1F2937; background: #F8FAFC; outline: none; }
/* v18.3 有余数除法：商/余数双框 */
.co-vrow2 { gap: 6px 8px; }
.co-part { font-size: 0.95rem; font-weight: 700; color: #64748B; white-space: nowrap; }
.co-rem-sep { font-size: 1.15rem; font-weight: 700; color: #334155; letter-spacing: 2px; white-space: nowrap; }
.co-vin-q, .co-vin-r { flex: 0 1 64px; min-width: 56px; width: 64px; }
.co-vin-q.co-ok, .co-vin-r.co-ok { border-color: #22B573; background: #E8F7F0; color: #15803D; }
.co-vin-q.co-wrong, .co-vin-r.co-wrong { border-color: #EF4444; background: #FEF2F2; color: #B91C1C; }
.co-vin:focus { border-color: #3B82F6; background: #fff; }
.co-vin.co-ok { border-color: #22B573; background: #E8F7F0; color: #15803D; }
.co-vin.co-wrong { border-color: #EF4444; background: #FEF2F2; color: #B91C1C; }
.co-pad-btn { border: none; border-radius: 12px; background: #3B82F6; color: #fff; font-weight: 700; min-height: 44px; padding: 0 14px; cursor: pointer; }
.co-pad-btn:active { transform: scale(0.97); }
.co-vhint { color: #6B7280; font-size: 0.82rem; margin-top: 4px; }
.co-thumb-slot { margin-top: 6px; min-height: 0; }
.co-thumb { border: 1.5px dashed #CBD5E1; border-radius: 8px; background: #fff; }
.co-actions { display: flex; gap: 10px; margin: 18px 0 8px; flex-wrap: wrap; }
.co-wrong-list { background: #FEF2F2; border-radius: 12px; padding: 10px 12px; color: #B91C1C; font-size: 0.95rem; margin-top: 10px; line-height: 1.7; }
/* 手写板 */
.pad-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 14px; }
.pad-card { background: #fff; border-radius: 18px; padding: 12px; width: min(480px, 96vw); max-height: 94vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(31, 41, 55, 0.25); }
.pad-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pad-title { font-weight: 800; font-size: 1.1rem; color: #1F2937; }
.pad-close { border: none; background: #F1F5F9; border-radius: 10px; width: 36px; height: 36px; font-size: 1rem; cursor: pointer; }
.pad-canvas-wrap { background: #F8FAFC; border-radius: 12px; padding: 6px; display: flex; justify-content: center; }
.pad-canvas { background: #fff; border: 1.5px solid #E2E8F0; border-radius: 8px; touch-action: none; cursor: crosshair; }
.pad-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pad-lws { display: inline-flex; gap: 6px; }
.pad-lw { border: 2px solid #E2E8F0; background: #fff; border-radius: 10px; min-height: 38px; min-width: 44px; font-weight: 700; color: #475569; cursor: pointer; }
.pad-lw-on { border-color: #3B82F6; color: #3B82F6; background: #EAF2FE; }
.pad-ops { display: inline-flex; gap: 6px; }
.pad-undo, .pad-clear { border: 2px solid #E2E8F0; background: #fff; border-radius: 10px; min-height: 38px; padding: 0 10px; font-weight: 700; color: #475569; cursor: pointer; }
.pad-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.pad-hint { color: #6B7280; font-size: 0.82rem; }
.pad-confirm { border: none; background: #22B573; color: #fff; border-radius: 12px; min-height: 44px; padding: 0 18px; font-weight: 800; cursor: pointer; }
.pad-confirm:active { transform: scale(0.97); }
@media (max-width: 640px) {
  .co-grid { grid-template-columns: repeat(2, 1fr); }
  .co-vert-grid { grid-template-columns: 1fr; }
  .co-q { font-size: 1rem; }
}

/* ---------- v18.5 练习计时挑战 ---------- */
.quiz-timer {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; white-space: nowrap;
  color: #1D4ED8; background: #EFF6FF; border: 2px solid #BFDBFE; border-radius: 999px;
  padding: 4px 12px; line-height: 1.2;
}
.result-timer {
  margin-top: 8px; font-size: 1.05rem; font-weight: 800; color: #1D4ED8;
  background: #EFF6FF; border-radius: 10px; padding: 8px 14px; display: inline-block;
}
@media (max-width: 640px) {
  .quiz-bar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
  .quiz-timer { font-size: 13px; padding: 3px 10px; }
}

/* ================= v18.6 #/calc 计时挑战 ================= */
.co-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.co-toolbar .co-progress { margin-left: auto; font-size: 13px; color: #64748B; font-weight: 700; }
.co-timer-btn { padding: 8px 16px; font-size: 14px; }
.co-timer-btn[aria-pressed="true"] { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; font-weight: 800; }
.co-timer-badge { display: inline-block; }
@media (max-width: 640px) {
  .co-toolbar { gap: 8px 10px; }
  .co-toolbar .co-progress { width: 100%; margin-left: 0; }
}

/* ================= v18.7 计时开关醒目化（不影响 practice 的 .quiz-timer） ================= */
.co-timer-btn { border: 2px solid var(--brand, #1D4ED8); background: #EFF6FF; color: var(--brand, #1D4ED8); font-weight: 800; padding: 8px 18px; font-size: 14px; border-radius: 999px; }
.co-timer-btn:active { transform: scale(0.96); }
.co-timer-badge { background: var(--brand, #1D4ED8); color: #fff; font-size: 16px; font-weight: 800; padding: 6px 14px; cursor: pointer; user-select: none; box-shadow: 0 2px 8px rgba(29, 78, 216, 0.35); transition: transform 0.1s ease; }
.co-timer-badge:active { transform: scale(0.94); }