/* 小学五年级数学学习工作台 —— 样式 */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #eef2fb;
  --card: #ffffff;
  --ink: #1d2a44;
  --ink-2: #5b6a86;
  --line: #e2e8f5;
  --brand: #3b6ef5;
  --brand-soft: #e8efff;
  --ok: #16a36a;
  --ok-soft: #e4f7ee;
  --warn: #e08a00;
  --warn-soft: #fff5e0;
  --bad: #e2483f;
  --bad-soft: #fdeceb;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(29, 42, 68, .07);
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 26px;
  background: linear-gradient(120deg, #3b6ef5, #6f4df3 60%, #a24df3);
  color: #fff;
  box-shadow: 0 4px 18px rgba(59, 110, 245, .28);
}
.topbar h1 { font-size: 20px; letter-spacing: .5px; }
.topbar .sub { font-size: 13px; opacity: .88; }
.topbar .spacer { flex: 1; }
.streak {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px; padding: 6px 14px; font-size: 13px;
}

/* ---------- 布局 ---------- */
.layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 296px;
  gap: 18px;
  padding: 20px 26px 60px;
  max-width: 1500px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 1180px) {
  .layout { grid-template-columns: 200px minmax(0, 1fr); }
  .col-right { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .col-left, .col-right { grid-column: auto; }
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 16px;
}
.panel > h2 {
  font-size: 14px; color: var(--ink-2); font-weight: 600;
  margin-bottom: 10px; letter-spacing: .4px;
}

/* ---------- 左侧导航 ---------- */
.tabs { display: flex; flex-direction: column; gap: 6px; }
.tab {
  text-align: left; border: 1px solid transparent; background: transparent;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-size: 14px; color: var(--ink); font-family: inherit;
  transition: background .15s, border-color .15s;
}
.tab:hover { background: #f4f7ff; }
.tab.active {
  background: var(--brand-soft); border-color: #c9dbff;
  color: var(--brand); font-weight: 600;
}
.tab .cnt {
  float: right; font-size: 11px; color: var(--ink-2);
  background: #f0f3fa; border-radius: 999px; padding: 1px 8px;
}


/* ---------- 知识卡片 ---------- */
.card-list { display: flex; flex-direction: column; gap: 8px; }
.card-item {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.card-item:hover { border-color: #c9dbff; box-shadow: 0 3px 12px rgba(59,110,245,.1); }
.card-item.active { border-color: var(--brand); background: linear-gradient(0deg, var(--brand-soft), #fff); }
.card-item .t { font-size: 14px; font-weight: 600; }
.card-item .d { font-size: 12px; color: var(--ink-2); }

/* ---------- 练习区 ---------- */
.quiz-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.quiz-head h2 { font-size: 16px; }
.pill {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); border: 1px solid #c9dbff;
}
.pill.diff-1 { background: var(--ok-soft); color: var(--ok); border-color: #b7e8d1; }
.pill.diff-2 { background: var(--warn-soft); color: var(--warn); border-color: #f6dda6; }
.pill.diff-3 { background: var(--bad-soft); color: var(--bad); border-color: #f6bfbb; }

.choices { display: flex; flex-direction: column; gap: 9px; margin: 14px 0; }
.choice {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--line); border-radius: 11px;
  padding: 11px 14px; cursor: pointer; background: #fff;
  font-size: 15px; transition: border-color .15s, background .15s;
}
.choice:hover { border-color: #c9dbff; background: #fafbff; }
.choice.selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px rgba(59,110,245,.14) inset; }
.choice.selected .key { background: var(--brand); color: #fff; }
.choice .key {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: #f0f3fa; color: var(--ink-2);
}
.choice .fill {
  flex: 1; min-width: 90px; border: none; border-bottom: 2px dashed #c9d3e8;
  font-size: 15px; font-family: inherit; padding: 3px 2px; outline: none;
  background: transparent; color: var(--ink);
}
.choice .fill:focus { border-bottom-color: var(--brand); background: #f7faff; }
.choice .unit { font-size: 13px; color: var(--ink-2); }
.fill-option-title { margin: 3px 0 -4px; font-size: 13px; color: var(--ink-2); }
.fill-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fill-options .choice { min-height: 44px; padding: 9px 11px; font-size: 13.5px; }
.fill-options .choice.selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px rgba(59,110,245,.12) inset; }
@media (max-width: 620px) { .fill-options { grid-template-columns: 1fr; } }

.choice.picked-correct { border-color: var(--ok); background: var(--ok-soft); }
.choice.picked-correct .key { background: var(--ok); color: #fff; }
.choice.wrong { border-color: var(--bad); background: var(--bad-soft); }
.choice.wrong .key { background: var(--bad); color: #fff; }
.choice.miss { border-color: var(--warn); background: var(--warn-soft); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
button.btn {
  font-family: inherit; font-size: 14px; cursor: pointer;
  border-radius: 10px; padding: 9px 18px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); transition: all .15s;
}
button.btn:hover { border-color: #c9dbff; background: #f7faff; }
button.btn.primary {
  background: linear-gradient(120deg, #3b6ef5, #6f4df3);
  color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(59,110,245,.3);
}
button.btn.primary:hover { filter: brightness(1.06); }
button.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
button.btn.ghost { background: transparent; }

.result-box {
  margin-top: 14px; padding: 12px 14px; border-radius: 11px;
  font-size: 14px; display: none; white-space: pre-wrap;
}
.result-box.show { display: block; }
.result-box.ok { background: var(--ok-soft); border: 1px solid #b7e8d1; color: #0f6b47; }
.result-box.bad { background: var(--bad-soft); border: 1px solid #f6bfbb; color: #9c2b24; }

.solution {
  margin-top: 12px; padding: 12px 14px; border-radius: 11px;
  background: #f7f9ff; border: 1px dashed #c9dbff; font-size: 14px;
  display: none;
}
.solution.show { display: block; }
.solution b { color: var(--brand); }

/* ---------- 计时 / 进度 ---------- */
.timer {
  font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700;
  letter-spacing: 1px;
}
.dots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dot {
  width: 12px; height: 12px; border-radius: 50%; background: #e6ebf5;
  border: 1px solid #d6deee;
}
.dot.ok { background: var(--ok); border-color: var(--ok); }
.dot.bad { background: var(--bad); border-color: var(--bad); }
.dot.now { outline: 3px solid var(--brand-soft); }

.progress-line {
  height: 9px; border-radius: 999px; background: #e9eef8; overflow: hidden; margin-top: 10px;
}
.progress-line > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #3b6ef5, #6f4df3); transition: width .3s;
}

/* ---------- 错题本 ---------- */
.wrong-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; }
.wrong-item {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 13px;
  background: #fffdfa;
}
.wrong-item .q { font-weight: 600; margin-bottom: 3px; }
.wrong-item .meta { color: var(--ink-2); font-size: 12px; }
.empty { color: var(--ink-2); font-size: 13px; padding: 8px 2px; }

.kv { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.kv:last-child { border-bottom: none; }
.kv b { font-variant-numeric: tabular-nums; }

.stars { display: flex; gap: 10px; flex-wrap: wrap; }
.medal {
  flex: 1 1 68px; text-align: center; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 4px; font-size: 12px; color: var(--ink-2); opacity: .45;
}
.medal.on { opacity: 1; border-color: #f6dda6; background: var(--warn-soft); color: #a4660a; font-weight: 600; }
.medal .icon { font-size: 20px; display: block; }

.footer { text-align: center; color: var(--ink-2); font-size: 12px; padding: 0 0 30px; }
.hidden { display: none !important; }

/* ---------- 学习动画 ---------- */
.anim-panel {
  margin: 14px 0 4px; padding: 14px;
  background: linear-gradient(180deg, #fbfcff, #f7faff);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.anim-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.anim-head h3 { font-size: 15px; }
.anim-badge {
  font-size: 11px; color: #7c8bab; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
}
.anim-body { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 700px) { .anim-body { grid-template-columns: 1fr; } }
.anim-stage {
  position: relative; background: linear-gradient(180deg, #fbfcff, #f2f5fd);
  border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  min-height: 300px; display: grid; place-items: center;
}
.anim-svg { width: 100%; height: auto; max-height: 430px; display: block; }
.anim-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.anim-ctrl .btn { padding: 7px 14px; font-size: 13px; }
.anim-progress { flex: 1; min-width: 100px; height: 8px; border-radius: 999px; background: #e9eef8; overflow: hidden; cursor: pointer; }
.anim-progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3b6ef5, #6f4df3); }
.anim-speed {
  font-family: inherit; font-size: 12px; border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 6px; background: #fff; color: var(--ink-2); cursor: pointer;
}
.anim-step { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; background: #fff; font-size: 13.5px; color: #3c4a68; min-height: 74px; }
.anim-step .k { font-weight: 700; color: var(--brand); display: block; margin-bottom: 4px; }
.anim-need { margin-top: 10px; padding: 10px 12px; border-radius: 11px; font-size: 13px; background: var(--warn-soft); border: 1px solid #f6dda6; color: #6b5327; }
.anim-need b { color: #a4660a; }
.anim-steps { margin: 10px 0 0; padding-left: 0; list-style: none; }
.anim-steps li { font-size: 13px; color: var(--ink-2); padding: 4px 0 4px 22px; position: relative; cursor: pointer; border-radius: 6px; }
.anim-steps li:hover { background: #f4f7ff; }
.anim-steps li::before {
  content: attr(data-i); position: absolute; left: 2px; top: 5px;
  width: 15px; height: 15px; border-radius: 50%; background: #e6ebf5; color: #7c8bab;
  font-size: 10px; display: grid; place-items: center; font-weight: 700;
}
.anim-steps li.on { color: var(--brand); font-weight: 600; }
.anim-steps li.on::before { background: var(--brand); color: #fff; }
.anim-tip { margin-top: 10px; padding: 9px 12px; border-radius: 11px; font-size: 13px; background: #eef4ff; border: 1px dashed #c9dbff; color: #2a4fa8; min-height: 40px; }
.anim-tip b { color: var(--brand); }
.anim-fallback { margin: 14px 0 0; padding: 14px; border-radius: 12px; background: var(--warn-soft); border: 1px solid #f6dda6; font-size: 13.5px; color: #6b5327; }

/* ==================== 语音讲解栏 ==================== */
.voice-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 13px; border-radius: 11px;
  background: linear-gradient(100deg, #eef4ff, #f7f0ff);
  border: 1px solid #d5e2ff; font-size: 13.5px; color: #2a4fa8;
}
.voice-bar.off { background: #f6f7fb; border-color: #e6eaf3; color: #8a94a8; }
.voice-bar .vb-icon { font-size: 16px; }
.voice-bar .vb-text { font-weight: 600; }
.voice-bar.off .vb-text { font-weight: 400; }
.voice-bar .vb-spacer { flex: 1; }
.voice-bar .vb-btn { padding: 5px 11px; font-size: 12.5px; }

/* ==================== 顶栏按钮：深色字 + 实心浅底 ====================
   顶栏是暖黄渐变（#ffd166 → #f2913d），白字压上去对比度只有 ~1.3:1，等于看不见。
   统一走「深色字 + 实心浅底 + 深色描边」，并加 !important 防止被按钮基础样式覆盖。 */
.topbar .btn {
  background: rgba(255,255,255,.92) !important;
  color: #4a3623 !important;
  border: 1px solid #c98a2e !important;
  font-weight: 700;
}
.topbar .btn:hover { background: #fff !important; border-color: #a4660a !important; }
/* 兜底：顶栏底色若被换成深色，自动切白字（syncTopbarTheme 会挂上 .dark-top） */
.topbar.dark-top .btn { background: rgba(255,255,255,.16) !important; color: #fff !important; border-color: rgba(255,255,255,.7) !important; }
.topbar.dark-top h1, .topbar.dark-top .sub, .topbar.dark-top .streak { color: #fff; }
.top-home { padding: 5px 13px; font-size: 13px; }

/* ==================== 折叠面板 ==================== */
.fold-head {
  display: flex; align-items: center; width: 100%; gap: 8px;
  border: none; background: transparent; cursor: pointer; padding: 2px 0;
  font-family: inherit; font-size: 14px; color: var(--ink-2); font-weight: 600;
  letter-spacing: .4px; text-align: left;
}
.fold-head:hover { color: var(--brand); }
.fold-head .fold-t { flex: 1; }
.fold-head .fold-arrow { font-size: 12px; transition: transform .18s; }
.fold-head[aria-expanded="true"] .fold-arrow { transform: rotate(180deg); }
.fold-body { display: none; margin-top: 10px; }
.fold-body.open { display: block; }
.fold-block .hero.fold-body { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .fold-head .fold-arrow { transition: none; } }

/* ==================== 二级页面结构 ====================
   任意时刻只有一个 .page 可见：一级首页只放 3 个入口，内容按用途拆到二级页。
   拆页的收益不只是「看着清爽」——每个二级页里同一块内容只有唯一实例，
   所以错题本 / 徽章 / 题目区不会在页与页之间重复渲染。 */
.page { display: none; }
.page.active { display: block; }

.page-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 1500px; margin: 16px auto 0; padding: 12px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.page-head h2 { font-size: 20px; color: var(--ink); }
.page-head .page-sub { font-size: 13.5px; color: var(--ink-2); }
.page-head .spacer { flex: 1; }
.page-head .back-btn { padding: 6px 13px; font-size: 13.5px; }

/* ---------- 一级首页 ---------- */
.home-hero {
  max-width: 1500px; margin: 18px auto 0; text-align: center;
}
.home-hero h2 { font-size: 26px; color: var(--ink); }
.home-hero p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.home-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; max-width: 1500px; margin: 20px auto 0;
}
.home-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 22px 22px 18px; text-align: left; cursor: pointer; font-family: inherit;
  background: linear-gradient(150deg, #ffffff, #f4f8ff);
  border: 1px solid #dde6fa; border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.home-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(59,110,245,.16); }
.home-card:focus-visible { outline: 3px solid rgba(59,110,245,.45); outline-offset: 2px; }
.home-card .hc-icon { font-size: 40px; line-height: 1.1; }
.home-card .hc-title { font-size: 21px; font-weight: 800; color: var(--ink); }
.home-card .hc-desc { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.home-card .hc-meta { margin-top: 8px; font-size: 13.5px; color: var(--brand); font-weight: 600; }
.home-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 1500px; margin: 18px auto 0; padding: 12px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); font-size: 14px; color: var(--ink-2);
}
.home-foot .btn { margin-left: auto; }

/* ---------- 学习页：可展开的「选择单元」侧栏 ---------- */
#pageLearn .layout { grid-template-columns: minmax(0, 1fr) 320px; }
#pageLearn .learn-layout{position:relative;z-index:120}
#pagePractice .layout { grid-template-columns: minmax(0, 1fr) 340px; }
.unit-picker-btn{font-weight:800;color:#3f5ea8;background:#f7f9ff;border-color:#cbd8f4}
.unit-drawer{position:fixed;z-index:120;left:0;top:0;width:min(390px,88vw);height:100dvh;overflow-y:auto;padding:16px;background:#f8f9fd;border-right:1px solid #dce3f1;box-shadow:18px 0 42px rgba(37,47,78,.22);transform:translateX(-104%);transition:transform .22s ease}
.unit-drawer.open{transform:translateX(0)}
.unit-drawer-head{position:sticky;top:-16px;z-index:2;display:flex;align-items:center;gap:12px;margin:-16px -16px 12px;padding:18px 18px 14px;background:rgba(255,255,255,.96);border-bottom:1px solid #e2e7f2;backdrop-filter:blur(10px)}
.unit-drawer-head>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.unit-drawer-head b{font-size:18px;color:#2b3154}
.unit-drawer-head span{font-size:12px;color:#7a849d}
.unit-drawer-close{margin-left:auto;width:36px;height:36px;border:1px solid #d9dfeb;border-radius:50%;background:#fff;color:#5d6882;font:700 25px/1 system-ui;cursor:pointer}
.unit-drawer-close:hover{background:#fff1f5;color:#b52d58;border-color:#ffc3d3}
.unit-drawer .panel{margin-bottom:12px;box-shadow:none}
.unit-list-panel{padding:10px}
.unit-drawer-backdrop{position:fixed;z-index:110;inset:0;border:0;background:rgba(25,31,50,.36);opacity:0;pointer-events:none;transition:opacity .2s ease}
.unit-drawer-backdrop.open{opacity:1;pointer-events:auto}
body.unit-drawer-open{overflow:hidden}
.unit-drawer .card-item:focus-visible{outline:3px solid rgba(59,110,245,.26);outline-offset:2px}
@media (max-width: 1280px) {
  #pageLearn .layout { grid-template-columns: minmax(0, 1fr); }
  #pageLearn .col-right { grid-column: 1 / -1; }
}
@media (max-width: 1180px) {
  #pageLearn .layout, #pagePractice .layout { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- 卡皮养成整页 ---------- */
.pet-page { max-width: 1500px; margin: 16px auto 0; }
.pet-page .pet-tip { margin-bottom: 10px; }

/* 通用小工具（原 inline style 收口到这里，便于统一维护） */
.mt-12 { margin-top: 12px; }
.w-full { width: 100%; }

/* ==========================================================================
   共用账户卡片（语文 / 数学首页都显示）
   --------------------------------------------------------------------------
   两个学科共用一份橘子币与同一只卡皮，首页给一行可见的确认：
   不要做成花哨面板，避免分散注意力 —— 只用一条浅底细条就够。
   ========================================================================== */
.shared-account {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 0; padding: 9px 13px;
  background: #fffdf5; border: 1px dashed #ecdcbc; border-radius: 12px;
  font-size: 12.5px; color: #6b6459; line-height: 1.6;
}
.shared-account[hidden] { display: none; }
.shared-account .sa-badge { font-size: 15px; line-height: 1; }
.shared-account .sa-line { color: #6b6459; }
.shared-account .sa-subjects { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.shared-account .sa-chip {
  font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
  background: #f4efe4; color: #6b6459; border: 1px solid #e8dcc6; white-space: nowrap;
}
.shared-account .sa-chip.on {
  background: #fff2d8; color: #a8700f; border-color: #f2d9a4; font-weight: 700;
}
.shared-account .sa-pet { font-size: 12px; color: #a8700f; white-space: nowrap; }
@media (max-width: 680px) {
  .shared-account { font-size: 12px; }
  .shared-account .sa-pet { width: 100%; }
}

/* ==========================================================================
   英语单元知识页专属板块：词汇 / 句型 / 课文 / 语法
   --------------------------------------------------------------------------
   语文那边是「字词 + 背诵」，英语换成该有的样子。统一浅底卡片，保持
   「卡皮主体、不杂乱」：每个板块只有一个小标题 + 若干行，不做彩色堆砌。
   ========================================================================== */
/* ---------------------------------------------------------------- 点读
   单词 / 句子 / 课文都要「点一下读一句」。历史上这几个类名只有 HTML、
   没有任何 CSS，所以文本看着和普通文字一模一样：没有手型光标、没有
   按下反馈，孩子根本不知道能点 —— 这就是「英语点了也没有点读」的体感来源。
   这里把可点样式补齐（光标 / 悬停 / 按下 / 正在朗读的高亮）。
   ------------------------------------------------------------------------ */
.spk {
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s, color .15s, transform .08s;
  /* 给可点文字一圈极淡的底色，让它一眼看出来「这是可以点的」 */
  box-shadow: inset 0 -6px 0 rgba(59, 110, 245, .07);
}
.spk:hover { background: #e8f0ff; color: #1f47a8; }
.spk:active { transform: translateY(1px); background: #d8e5ff; }
.spk:focus-visible { outline: 2px solid #3b6ef5; outline-offset: 2px; }
/* 正在朗读：小喇叭 + 高亮，读完由 JS 摘掉 on */
.spk.on { background: #fff0d2; color: #a8700f; box-shadow: inset 0 -6px 0 rgba(240, 168, 54, .28); }
.spk.on::after { content: ' 🔊'; font-size: .85em; }
/* 课文是列表项，整行可点，别把行号也变成按钮 */
.en-text li.spk { list-style: decimal; }
.en-text li.spk:hover { background: #e8f0ff; }

/* 点读提示条 */
.speak-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 9px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.6;
  background: #eef4ff; border: 1px dashed #c9dbff; color: #2a4fa8;
}
.speak-bar[data-supported="0"] { background: #fff6e6; border-color: #f0e3c8; color: #8d7357; }
.spk-ico { font-size: 15px; flex: none; }
.spk-hint { flex: 1 1 auto; min-width: 0; }
.speak-bar .spacer { flex: 0 0 auto; }

.en-h {
  font-size: 14px; color: #2a3a58; margin: 16px 0 8px;
  padding-left: 9px; border-left: 3px solid #3b6ef5;
}
.en-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 10px; }
.en-word {
  display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 11px; align-items: center;
  padding: 9px; border-radius: 12px; background: #fbfcff;
  border: 1px solid #e2e8f5;
}
.en-word-img{width:88px;height:88px;object-fit:cover;border-radius:10px;background:#f2f5fb;border:1px solid #e5e9f2}
.en-word-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.en-word b { font-size: 16px; color: #2a4fa8; }
.en-word .en-pin { font-size: 11.5px; color: #7c8bab; }
.en-word .en-cn { font-size: 13px; color: #3c4a68; }
.en-word .en-ex { font-size: 12px; color: #5b6a86; font-style: italic; }
@media(max-width:520px){
  .en-words{grid-template-columns:1fr}
  .en-word{grid-template-columns:76px minmax(0,1fr)}
  .en-word-img{width:76px;height:76px}
}

.en-pats { display: flex; flex-direction: column; gap: 9px; }
.en-pat {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
  padding: 9px 11px; border-radius: 10px; background: #fbfcff; border: 1px solid #e2e8f5;
}
@media (max-width: 640px) { .en-pat { grid-template-columns: 1fr; } }
.en-pat .en-ask, .en-pat .en-ans { display: flex; flex-direction: column; gap: 2px; }
.en-pat .en-ask b { font-size: 13.5px; color: #2a4fa8; }
.en-pat .en-ans b { font-size: 13.5px; color: #24674c; }
.en-pat .en-ask span, .en-pat .en-ans span { font-size: 12px; color: #5b6a86; }

.en-text { margin: 0; padding-left: 22px; }
.en-text li { font-size: 13.5px; color: #2a3a58; line-height: 1.85; margin-bottom: 3px; }
.en-textvoice {
  margin-top: 9px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px;
  background: #eef4ff; border: 1px dashed #c9dbff; color: #2a4fa8; line-height: 1.75;
}
.en-textvoice b { color: #3b6ef5; }

.en-gram { display: flex; flex-direction: column; gap: 8px; }
.en-gram-item {
  padding: 9px 12px; border-radius: 10px; background: #fffdf7;
  border: 1px solid #f0e3c8;
}
.en-gram-item b { font-size: 13.5px; color: #a8700f; }
.en-gram-item p { margin: 4px 0 0; font-size: 12.5px; color: #6b5327; line-height: 1.75; }

/* 课文动画卡片列表 */
.vidlist{margin-top:14px;padding-top:12px;border-top:1px dashed #d9dcf0}
.vidlist-h{font-weight:800;font-size:13px;color:#3a3c63;margin-bottom:10px}
.vidlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.vidcard{display:block;background:#fff;border:1px solid #e7e9f5;border-radius:14px;overflow:hidden;
  text-decoration:none;color:#23254a;box-shadow:0 6px 16px rgba(30,30,80,.08);transition:.18s}
.vidcard:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(30,30,80,.16)}
.vidcard img{width:100%;height:104px;object-fit:cover;display:block;background:#f3f5ff}
.vidcard-b{padding:9px 11px}
.vidcard-b b{display:block;font-size:12.5px;line-height:1.45}
.vidcard-b span{display:block;margin-top:4px;font-size:11px;color:#7d80a6}
.vidcard-now{display:none;margin-top:7px;width:max-content;padding:3px 8px;border-radius:999px;
  background:#ff5d8f;color:#fff;font-size:11px;font-style:normal;font-weight:800;letter-spacing:.2px}

/* 当前正在播放器里播放的课文卡片（点击卡片=装进上方播放器，不跳转） */
.vidcard{cursor:pointer}
.vidcard.active{border-color:#ff5d8f;background:#fff8fb;
  box-shadow:0 0 0 3px #ffd3de,0 12px 26px rgba(255,93,143,.20);transform:translateY(-2px)}
.vidcard.active .vidcard-b b{color:#b92f5a}
.vidcard.active .vidcard-now{display:block}

/* ==================== 分块学习工作区 ====================
   动画之后不再把所有文字一次铺开。六个分类一次只显示一个，长列表先露出少量内容。 */
.unit-source-more{margin:6px 0 12px;border:1px dashed #c9dbff;border-radius:10px;background:#f8faff;color:#4a5b7a;font-size:12.5px}
.unit-source-more summary{cursor:pointer;padding:8px 12px;font-weight:700;color:#5670ad;list-style:none}
.unit-source-more summary::-webkit-details-marker{display:none}
.unit-source-more summary::after{content:'⌄';float:right;color:#8393b8}
.unit-source-more[open] summary::after{content:'⌃'}
.unit-source-more>div{padding:0 12px 10px;line-height:1.65}
.study-workspace{margin-top:18px;border:1px solid #dce4f5;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(39,61,112,.08);overflow:hidden}
.study-title{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(100deg,#fff7e7,#f2f6ff)}
.study-title>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.study-title b{font-size:16px;color:#2b3154}
.study-title span{font-size:12px;color:#7783a4}
.study-title .study-step{margin-left:auto;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid #e1d5ba;color:#9a6817;font-weight:800;white-space:nowrap}
.study-tabs{display:grid;grid-template-columns:repeat(var(--study-tab-count,4),minmax(0,1fr));gap:6px;padding:10px;background:#f7f9fd;border-top:1px solid #eef1f8;border-bottom:1px solid #e5eaf4}
.study-tab{min-width:0;border:1px solid transparent;border-radius:11px;background:transparent;color:#66718e;padding:9px 5px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;transition:.16s}
.study-tab>span{display:block;font-size:18px;line-height:1.15;margin-bottom:3px}
.study-tab:hover{background:#fff;border-color:#dce4f5;color:#3d568f}
.study-tab.active{background:#fff;border-color:#ffb8ca;color:#b92f5a;box-shadow:0 5px 14px rgba(255,93,143,.14)}
.study-panel{padding:16px;animation:studyIn .18s ease}
.study-panel[hidden]{display:none!important}
@keyframes studyIn{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
.study-visual{display:grid;grid-template-columns:156px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:14px;padding:10px;border-radius:14px;background:linear-gradient(110deg,#fffaf0,#f4f7ff);border:1px solid #ece6d9}
.study-visual img,.study-visual-fallback{width:156px;height:94px;border-radius:10px;object-fit:cover;background:#eef2fb;display:grid;place-items:center;font-size:38px}
.study-visual-copy{display:flex;flex-direction:column;gap:5px}
.study-visual-copy b{font-size:16px;color:#2a3554}
.study-visual-copy span{font-size:13px;color:#6c7895;line-height:1.65}
.study-workspace>.speak-bar{margin:10px 12px 0}
.study-panel .en-h:first-of-type{margin-top:8px}
.study-more{display:block;margin:12px auto 2px;border:1px solid #cbd8f4;border-radius:999px;background:#f5f8ff;color:#4265b2;padding:7px 16px;cursor:pointer;font:inherit;font-size:12px;font-weight:700}
.study-more:hover{background:#eaf1ff;border-color:#9fb7ec}
.study-list.is-collapsed.limit-3>:nth-child(n+4),
.study-list.is-collapsed.limit-6>:nth-child(n+7),
.study-list.is-collapsed.limit-8>:nth-child(n+9){display:none}
.study-panel .tipbox{margin-top:14px}
.study-panel .points{margin-top:4px}
.knowledge-sounds{display:grid;gap:10px;margin-top:10px}
.knowledge-sound{display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center;padding:13px 15px;border:1px solid #dce7f7;border-radius:14px;background:#f8fbff}
.knowledge-letter{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#657be9,#8d66d9);color:#fff;font-size:25px;font-weight:900;box-shadow:0 5px 12px rgba(90,101,192,.2)}
.knowledge-sound>div{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.knowledge-sound b{color:#384467;font-size:13px}
.knowledge-read{border:0;background:transparent;padding:0;color:#273252;font:inherit;font-size:15px;line-height:1.5;text-align:left;cursor:pointer}
.knowledge-read:hover{color:#b52d58;text-decoration:underline}
/* 语音板块：本单元词表里符合该字母发音规律的实例词（点一下可读） */
.knowledge-sound-words{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px}
.knowledge-sound-words>span{flex:none;color:#8b93ad;font-size:12px}
.knowledge-sound-words b{font-size:13px;padding:2px 10px;border-radius:999px;border:1px solid #dbe4f7;background:#eef3ff}
.knowledge-groups{display:grid;gap:14px}
.knowledge-group{padding:14px;border:1px solid #e3e7f1;border-radius:15px;background:#fff}
.knowledge-group h3{margin:0 0 11px;color:#313b61;font-size:15px}
.knowledge-vocab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.knowledge-vocab-item{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:10px;background:#f7f9fe;border:1px solid #edf0f7;cursor:pointer;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.en-chunk,.en-sent{cursor:pointer;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.knowledge-vocab-item:hover,.knowledge-vocab-item:focus-visible,.en-chunk:hover,.en-sent:hover{background:#edf3ff;border-color:#9bb7f5;box-shadow:0 0 0 2px #dfe9ff;transform:translateY(-1px);outline:none}
.knowledge-vocab-item b{color:#38558f;font-size:14px;cursor:pointer}
.knowledge-vocab-item span{color:#68728c;font-size:12.5px;text-align:right}
.knowledge-breakthroughs{display:grid;gap:13px}
.knowledge-point{padding:15px;border:1px solid #eadff0;border-radius:15px;background:linear-gradient(115deg,#fffafd,#fff)}
.knowledge-point h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:#3b345d;font-size:15px}
.knowledge-point h3>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#ffe6ee;color:#b72f58;font-size:12px;flex:none}
.knowledge-note{margin:0 0 10px;padding:8px 10px;border-radius:9px;background:#fff7df;color:#73551d;font-size:12.5px;line-height:1.65}
.knowledge-lines{display:grid;gap:7px}
.knowledge-line{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;padding:8px 10px;border-radius:9px;background:#f8f9fd;line-height:1.55}
.knowledge-line b{color:#2e416e;font-size:13.5px}
.knowledge-line b.spk{cursor:pointer}
.knowledge-line b.spk:hover{color:#b52d58;text-decoration:underline}
.knowledge-line span{color:#68728c;font-size:12.5px}
@media(max-width:720px){
  .study-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .study-visual{grid-template-columns:104px minmax(0,1fr)}
  .study-visual img,.study-visual-fallback{width:104px;height:78px}
  .study-title .study-step{display:none}
  .knowledge-vocab-grid{grid-template-columns:1fr}
}
@media(max-width:460px){
  .study-panel{padding:12px}
  .study-visual{grid-template-columns:1fr}
  .study-visual img,.study-visual-fallback{width:100%;height:128px}
  .knowledge-line{grid-template-columns:1fr;gap:3px}
}