/* ============================================================
 * 拼音树 · 样式（paintree.css）
 * 卡通、圆润、高对比；适配平板与手机
 * ============================================================ */

/* ---------- 侧栏「我的成长」补充信息 ---------- */
/* 迷你树：小画幅的卡通插画，圆角 + 描边 + 轻轻的树冠摇摆 */
.pt-mini-svg {
  max-width: 190px;
  border-radius: 14px;
  box-shadow: 0 0 0 2px #dff0c9, 0 4px 10px rgba(80, 140, 70, .18);
  background: linear-gradient(180deg, #eaf7ff 0%, #f5fff0 100%);
}
.pt-mini-svg .pt-mini-crown {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: ptMiniSway 6.5s ease-in-out infinite;
}
@keyframes ptMiniSway {
  0%, 100% { transform: rotate(-1.4deg); }
  50%      { transform: rotate(1.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pt-mini-svg .pt-mini-crown { animation: none; }
}
.pt-mini { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.pt-mini b { color: var(--green); font-size: 15px; }
.pt-bell { color: #c8761a; font-weight: 700; }

/* ---------- 成长阶段（种子 → 发芽 → 长叶 → 长大 → 开花 → 结果 → 满树果） ---------- */
.grow-stage {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  margin: 6px 0 2px; padding: 3px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: #17804f;
  background: var(--green-soft); border: 2px solid #b6e8cc;
}
.grow-stage-no { font-size: 11px; font-weight: 700; color: #7fa892; }

/* 弹窗里的成长阶段条 */
.ptree-track { margin: 4px 0 8px; }
.pt-track {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2px 0; font-size: 12px;
}
.pt-trk {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 52px; padding: 3px 2px; border-radius: 12px;
  color: #7d8fa3; opacity: .85;
}
.pt-trk i { font-size: 17px; font-style: normal; filter: grayscale(1); line-height: 1.1; }
.pt-trk em { font-style: normal; font-size: 11px; font-weight: 700; }
.pt-trk.is-done { opacity: 1; color: #17804f; background: var(--green-soft); }
.pt-trk.is-done i { filter: none; }
.pt-trk.is-cur {
  opacity: 1; color: #a5680b; background: var(--yellow-soft);
  box-shadow: 0 0 0 2px #ffd98a;
}
.pt-trk.is-cur i { filter: none; }
.pt-trk-arrow { color: #8ba1b8; font-size: 14px; padding: 0 1px; }
.pt-task {
  margin-top: 6px; text-align: center; font-size: 13px; font-weight: 700;
  color: var(--title); background: var(--blue-soft); border-radius: 14px; padding: 7px 12px;
}
.pt-strip {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  margin: 8px 0 2px; min-height: 24px;
}
.pt-strip-m {
  font-size: 19px; line-height: 1;
  background: var(--yellow-soft); border: 2px solid #ffd98a;
  border-radius: 50%; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 rgba(200, 160, 60, .25);
}
.pt-strip-more { font-size: 12px; color: var(--ink-2); align-self: center; }
.pt-strip-empty { font-size: 12px; color: var(--ink-2); }
.pt-open-btn { font-size: 14px; }

/* ---------- 弹窗 ---------- */
.ptree-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(24, 46, 74, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 18px 12px; overflow-y: auto;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ptree-mask[hidden] { display: none; }
body.ptree-open { overflow: hidden; }

.ptree-modal {
  background: #fff; border-radius: 26px;
  box-shadow: 0 10px 0 rgba(60, 110, 170, .22), 0 24px 48px rgba(30, 70, 120, .28);
  width: 100%; max-width: 860px; margin: auto;
  padding: 16px 16px 20px; position: relative;
}
.ptree-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.ptree-head h3 { font-size: 20px; color: var(--title); }
.ptree-head p { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.ptree-head-right { display: flex; align-items: center; gap: 8px; }
.ptree-mode { display: flex; gap: 4px; background: var(--blue-soft); border-radius: 999px; padding: 3px; }
.pt-mode-btn {
  border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700;
  color: var(--blue-mid); background: transparent;
}
.pt-mode-btn.active { background: #4a9eff; color: #fff; }
.ptree-close {
  width: 36px; height: 36px; border-radius: 50%; font-size: 18px;
  background: var(--line); color: #4a6480; font-weight: 700;
}
.ptree-close:hover { background: #d8e6f5; }

/* ---------- 图例 ---------- */
.ptree-legend {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  margin: 10px 0 6px; font-size: 12.5px; color: var(--ink-2);
}
.pt-lg { display: inline-flex; align-items: center; gap: 5px; }
.pt-lg i { width: 15px; height: 12px; border-radius: 50% / 60%; display: inline-block; border: 2px solid; }
.pt-lg-none i { background: #eef3f8; border-color: #d7e3ef; }
.pt-lg-seen i { background: #dbf3c7; border-color: #86cf74; }
.pt-lg-done i { background: #ffb13d; border-color: #ef8a12; }
.pt-lg-review i { background: #ffcf8a; border-color: #e0a35c; opacity: .6; }
.pt-lg-cur i { border-color: #3f8ce8; border-style: dashed; background: transparent; }
.pt-lg-tip { color: var(--ink-2); }

/* ---------- 树舞台 ---------- */
.ptree-stagebox {
  background: #f2fafe; border: 2px solid #ddeef8;
  border-radius: 20px; padding: 6px; overflow: hidden;
}
.ptree-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ptree-svg { display: block; width: 100%; min-width: 480px; height: auto; }
.ptree-svg text { font-family: var(--font); }

/* 树冠（含叶子果实）随风轻摇 —— 幅度极小，只是「活的」感觉 */
.ptree-canopy {
  transform-box: view-box; transform-origin: 360px 500px;
  animation: ptSway 8s ease-in-out infinite alternate;
}
@keyframes ptSway {
  from { transform: rotate(-0.5deg); }
  to { transform: rotate(0.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ptree-canopy { animation: none; }
}

.ptree-cur { animation: ptDash 1.4s linear infinite; }
@keyframes ptDash { to { stroke-dashoffset: -32; } }
.ptree-cur-t { font-size: 15px; font-weight: 800; fill: var(--blue-mid); }

/* 叶子四态 —— 颜色明确区分，不用「点过就全绿」 */
.pt-leaf { cursor: pointer; transition: transform .18s ease; }
.pt-leaf:hover { transform: translateY(-2.5px); }
.pt-hit { pointer-events: all; }                 /* 透明大圆：扩大触控命中区 */
.pt-leaf:focus { outline: none; }                /* 鼠标点击时不显示系统描边 */
.pt-leaf:focus-visible {                         /* 键盘 / 读屏聚焦时给清晰焦点环 */
  outline: none;
}
.pt-leaf:focus-visible .pt-leaf-bg,
.pt-leaf:focus-visible .pt-fruit-body {
  stroke: #3f8ce8 !important; stroke-width: 3.5;
}
.pt-leaf:focus-visible .pt-hit {
  stroke: #3f8ce8; stroke-width: 2.5; stroke-dasharray: 5 4;
}
/* 叶脉：跟着叶子状态走（未学 = 淡淡的芽，学过 = 绿叶的脉络） */
.pt-leaf-vein { fill: none; stroke-width: 1; opacity: .5; }
.pt-leaf.st-none .pt-leaf-vein { stroke: #d7e3ef; }
.pt-leaf.st-seen .pt-leaf-vein { stroke: #86cf74; }

.pt-leaf .pt-leaf-bg { stroke-width: 2; }
.pt-leaf.st-none .pt-leaf-bg { fill: #eef3f8; stroke: #d7e3ef; }
.pt-leaf.st-none .pt-leaf-py { fill: #556b82; }
.pt-leaf.st-none .pt-leaf-frac { fill: #6d8095; }

.pt-leaf.st-seen .pt-leaf-bg { fill: #dbf3c7; stroke: #86cf74; }
.pt-leaf.st-seen .pt-leaf-py { fill: #2f7a35; }
.pt-leaf.st-seen .pt-leaf-frac { fill: #4b8f50; }

/* 已掌握 / 该复习 = 真正的果实（苹果/橘子/桃子），文字用深棕更清楚 */
.pt-leaf.st-done .pt-leaf-py { fill: #5a2a00; font-weight: 700; }
.pt-leaf.st-done .pt-leaf-frac { fill: #7a4a10; }
.pt-leaf.st-review .pt-leaf-py { fill: #5a2a00; }
.pt-leaf.st-review .pt-leaf-frac { fill: #7a4a10; }

.pt-leaf.st-review { opacity: .62; }

/* 选中 / 悬停时给果实描蓝边（不再依赖 pt-leaf-bg） */
.pt-leaf.is-sel .pt-fruit-body { stroke: #3f8ce8 !important; stroke-width: 3.5; }
.pt-leaf:hover .pt-fruit-body { stroke-width: 2.6; }

.pt-leaf-py { font-family: var(--pinyin); font-weight: 600; }
.pt-leaf-frac { font-size: 12px; font-weight: 700; }
.pt-leaf-bell { font-size: 12px; }

.pt-leaf.is-sel .pt-leaf-bg { stroke: #3f8ce8; stroke-width: 3.5; }
.pt-leaf:hover .pt-leaf-bg { stroke-width: 3; }

/* ---------- 列表模式（手机更好读） ---------- */
.pt-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px; }
.pt-col { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 8px; }
.pt-col.is-current { border-color: #3f8ce8; box-shadow: 0 0 0 3px rgba(63, 140, 232, .16); }
.pt-colhead { font-size: 13px; font-weight: 800; color: var(--title); margin-bottom: 6px; }
.pt-colhead b { float: right; color: var(--green); }
.pt-cur-flag {
  display: block; margin-top: 4px; font-size: 11.5px; font-weight: 800;
  color: var(--blue-mid); background: var(--blue-soft); border-radius: 999px;
  padding: 2px 8px; text-align: center;
}
.pt-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pt-chip {
  position: relative; min-width: 44px; padding: 3px 5px 4px;
  border-radius: 10px; border: 2px solid #d7e3ef; background: #eef3f8;
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  transition: transform .15s ease;
}
.pt-chip:hover { transform: translateY(-1.5px); }
.pt-chip-py { font-family: var(--pinyin); font-size: 15px; color: #556b82; }
.pt-chip-f { font-size: 12px; font-weight: 700; color: #6d8095; }
.pt-chip.st-seen { background: #dbf3c7; border-color: #86cf74; }
.pt-chip.st-seen .pt-chip-py { color: #2f7a35; }
.pt-chip.st-seen .pt-chip-f { color: #4b8f50; }
.pt-chip.st-done { background: #ffb13d; border-color: #ef8a12; }
.pt-chip.st-done .pt-chip-py { color: #fff; font-weight: 700; }
.pt-chip.st-done .pt-chip-f { color: #fff4dd; }
.pt-chip.st-review { background: #ffcf8a; border-color: #d99a4e; border-style: dashed; opacity: .72; }
.pt-chip.st-review .pt-chip-py { color: #7d5316; }
.pt-chip.st-review .pt-chip-f { color: #8f6530; }
.pt-chip-bell { position: absolute; top: -7px; right: -5px; font-size: 11px; }

/* ---------- 三枝概览 ---------- */
.ptree-branchbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.pt-bchip {
  background: #fff; border: 2px solid var(--line); border-radius: 14px;
  padding: 7px 9px; font-size: 12.5px; color: var(--ink-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.pt-bchip .bn { font-weight: 800; color: var(--ink); }
.pt-bchip .bb { width: 100%; }
.pt-bchip .bb b { color: var(--green); font-size: 14px; }
.pt-bchip .br { color: #c8761a; font-weight: 700; }
.pt-bchip.is-current { border-color: #3f8ce8; background: var(--blue-soft); }
.pt-bchip.is-current .pt-cur-flag {
  width: 100%; text-align: center; color: var(--blue-mid); font-weight: 800; font-size: 11.5px;
}

/* ---------- 详情 ---------- */
.ptree-detail { margin-top: 10px; }
.pt-hint { font-size: 13px; color: var(--ink-2); text-align: center; padding: 10px; }
.pt-detail-card {
  background: var(--blue-soft); border-radius: 18px; padding: 12px;
}
.pt-detail-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pt-bigpy { font-family: var(--pinyin); font-size: 30px; font-weight: 700; color: var(--title); }
.pt-ex { font-size: 14px; color: var(--ink-2); }
.pt-state {
  font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
}
.pt-state.st-none { background: #eef3f8; color: #7b8ca0; }
.pt-state.st-seen { background: #dbf3c7; color: #2f7a35; }
.pt-state.st-done { background: #ffb13d; color: #fff; }
.pt-state.st-review { background: #ffcf8a; color: #7d5316; }
.pt-tone-title { font-size: 13px; color: var(--ink-2); margin: 10px 0 6px; }
.pt-tones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pt-tone { display: flex; flex-direction: column; gap: 4px; }
.pt-tone-btn {
  background: #fff; border: 2px solid var(--line); border-radius: 12px;
  padding: 7px 2px; font-family: var(--pinyin); font-size: 18px; color: var(--title);
}
.pt-tone-btn:hover { border-color: #4a9eff; }
.pt-tone-ok {
  background: #fff; border: 2px solid var(--line); border-radius: 999px;
  padding: 3px 2px; font-size: 11.5px; color: var(--ink-2);
}
.pt-tone.ok .pt-tone-btn { background: var(--green-soft); border-color: #3fc97b; color: #17804f; }
.pt-tone.ok .pt-tone-ok { background: #3fc97b; border-color: #2ea863; color: #fff; font-weight: 700; }
.pt-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }

/* ---------- 勋章 ---------- */
.ptree-medal-box { margin-top: 14px; }
.ptree-medal-box h4 { font-size: 15px; color: var(--title); margin-bottom: 8px; }
.ptree-medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.pt-medal {
  background: #f4f7fb; border: 2px solid var(--line); border-radius: 14px;
  padding: 8px 6px; text-align: center; opacity: .55;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pt-medal .mi { font-size: 24px; filter: grayscale(1); }
.pt-medal .mn { font-size: 12.5px; font-weight: 800; color: #5c708a; }
.pt-medal .md { font-size: 10.5px; color: #8fa2b8; line-height: 1.3; }
.pt-medal .mok, .pt-medal .mlock { font-size: 10.5px; font-weight: 700; }
.pt-medal .mlock { color: #a6b6c8; }
.pt-medal .mok { color: #17804f; }
.pt-medal.on {
  opacity: 1; background: var(--yellow-soft); border-color: #ffd98a;
  box-shadow: 0 3px 0 rgba(210, 170, 70, .25);
}
.pt-medal.on .mi { filter: none; }
.pt-medal.on .mn { color: #a5680b; }

/* ---------- 家长 / 老师小报告（默认折叠，界面保持干净） ---------- */
.ptree-report {
  margin-top: 14px; background: #f7fafd; border: 2px solid var(--line);
  border-radius: 16px; overflow: hidden;
}
.ptree-report summary {
  cursor: pointer; padding: 10px 14px; font-size: 14px; font-weight: 800;
  color: var(--title); list-style: none;
}
.ptree-report summary::-webkit-details-marker { display: none; }
.ptree-report summary::before { content: '▸ '; }
.ptree-report[open] summary::before { content: '▾ '; }
.ptree-report-body { padding: 4px 14px 14px; }
.pt-rows { display: flex; flex-direction: column; gap: 6px; }
.pt-row {
  display: flex; gap: 10px; align-items: baseline; font-size: 13px;
  border-bottom: 1px dashed #e3edf9; padding-bottom: 6px;
}
.pt-row .pk { width: 78px; flex: none; color: var(--ink-2); font-weight: 700; }
.pt-row .pv { color: var(--ink); }
.pt-big { font-size: 19px; color: #17804f; }
.pt-note { font-size: 11.5px; color: var(--ink-2); }

/* ---------- 侧栏「重学」按钮 ---------- */
.grow-reset { display: flex; gap: 6px; margin-top: 8px; }
.grow-reset-btn {
  flex: 1; padding: 7px 4px; font-size: 12.5px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
}
#growResetAll { color: #c8761a; border-color: #f4d6ac; }
#growResetAll:hover { border-color: #e8a44e; color: #a55d0d; }

/* ---------- 「重新学一遍」弹窗 ---------- */
/* 层级错开：写一写遮罩 z-index 120，本遮罩 125，同时弹出时不互相覆盖 */
.rs-mask { z-index: 125; }
.rs-modal { max-width: 720px; }
.rs-note {
  margin: 2px 0 10px; padding: 7px 12px; border-radius: 12px;
  background: #fff7e6; border: 2px solid #ffe0ad;
  font-size: 12.5px; color: #8a5a10; font-weight: 700;
}
.rs-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rs-tools .filter-chip { cursor: pointer; }
.rs-tools .filter-chip:hover { background: #e2edfb; }
.rs-body { max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.rs-group { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 8px 10px; margin-bottom: 10px; }
.rs-ghead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rs-gname { font-size: 14px; font-weight: 800; color: var(--title); }
.rs-gnum { font-size: 12px; color: var(--ink-2); }
.rs-gnum b { color: var(--green); font-size: 14px; }
.rs-gbtn {
  margin-left: auto; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--muted);
  background: #f0f5fb; border: 2px solid #e3eefb;
}
.rs-gbtn:hover { background: #e2edfb; border-color: #c9ddf5; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rs-chip {
  position: relative; min-width: 46px; padding: 5px 8px 4px; cursor: pointer;
  border-radius: 12px; background: #f4f8fc; border: 2px solid #dfe9f5;
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1;
  transition: transform .14s ease, box-shadow .14s ease;
}
.rs-chip:hover { transform: translateY(-1.5px); }
.rs-py { font-family: var(--pinyin); font-size: 16px; color: #7f92a8; font-weight: 600; }
.rs-tick { font-size: 11px; font-weight: 800; color: transparent; height: 13px; }
.rs-chip.st-seen { background: #e7f7d6; border-color: #a6dc93; }
.rs-chip.st-seen .rs-py { color: #3d7f37; }
.rs-chip.st-done { background: #ffe6bd; border-color: #f0b768; }
.rs-chip.st-done .rs-py { color: #8a5210; }
.rs-chip.st-review { background: #fff0d4; border-color: #e0b273; border-style: dashed; }
.rs-chip.st-review .rs-py { color: #8a6a2a; }
.rs-chip.is-pick {
  background: var(--blue); border-color: var(--blue-deep);
  box-shadow: 0 3px 0 var(--blue-deep); transform: translateY(-1px);
}
.rs-chip.is-pick .rs-py { color: #fff; }
.rs-chip.is-pick .rs-tick { color: #fff; }
.rs-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 2px dashed #e3edf9;
}
.rs-count { font-size: 13px; color: var(--ink-2); margin-right: auto; }
.rs-count b { color: var(--blue-mid); font-size: 17px; }
.rs-count-tip { font-size: 11.5px; color: #9ab0c8; }
.rs-foot .tool-btn.primary { margin-left: 0; }
.rs-confirm {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px; border-radius: 14px;
  background: #fff1f1; border: 2px solid #ffc9c9;
  font-size: 13px; color: #a33; font-weight: 700;
}
.rs-confirm[hidden] { display: none; }
.rs-confirm b { color: #d33; font-size: 16px; }
.rs-confirm .tool-btn { margin-left: 0; }
.rs-confirm .tool-btn.primary { margin-left: auto; }

/* ---------- 响应式：统一 4 档断点（与 style.css 对齐） ---------- */
@media (max-width: 1023px) {
  .ptree-modal { padding: 12px 10px 16px; border-radius: 20px; }
  .ptree-head h3 { font-size: 17px; }
  .pt-cols { grid-template-columns: 1fr; }
  .ptree-branchbar { grid-template-columns: 1fr; }
  .pt-row { flex-direction: column; gap: 2px; }
  .pt-row .pk { width: auto; }
}
@media (max-width: 639px) {
  .ptree-medals { grid-template-columns: repeat(2, 1fr); }
  .pt-tones { grid-template-columns: repeat(2, 1fr); }
  .grow-reset-btn { font-size: 11.5px; padding: 7px 2px; }
  .rs-modal { padding: 12px 10px 16px; }
}