/* ============================================================
   成长陪练 · 家长端
   ============================================================ */

body.parent-body {
  background:
    radial-gradient(1000px 520px at 5% -8%, #eaf3ec 0%, rgba(234, 243, 236, 0) 62%),
    radial-gradient(900px 480px at 98% 2%, #f7eddd 0%, rgba(247, 237, 221, 0) 55%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------------- top bar ---------------- */
.p-top {
  position: sticky; top: 0; z-index: 90;
  background: rgba(246, 244, 238, .82);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(216, 210, 195, .7);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* 往下滚一段后顶栏才「浮起来」：一开始别抢戏 */
.p-top.is-scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--line-strong); }
.p-top-in {
  width: calc(100% - var(--gutter) * 2); margin: 0 auto;
  height: var(--nav-h); display: flex; align-items: center; gap: 10px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center; flex: none;
  background: linear-gradient(150deg, #2f8a6b, #0a3f32);
  color: #eaf3ec;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -8px rgba(10,63,50,.6);
}
.brand-name { font-family: var(--font-serif); font-size: 19px; font-weight: 700; letter-spacing: .02em; line-height: 1.15; }
.brand-sub { display: block; font-size: 9.5px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; margin-top: 1px; }
.p-nav { display: none; align-items: center; gap: 2px; flex: 1; }
.p-nav a {
  position: relative; padding: 7px 12px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.p-nav a:hover { color: var(--pine); background: rgba(15, 92, 72, .06); }
.p-nav a.on { color: var(--pine); font-weight: 700; }
.p-nav a.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--pine);
}
.p-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.child-pick {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 5px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color .2s, background .2s;
}
.child-pick:hover { border-color: var(--line-strong); background: #fff; }
.child-pick .cp-name { font-size: 12.5px; font-weight: 700; line-height: 1.2; display: block; }
.child-pick .cp-meta { font-size: 10px; color: var(--muted); line-height: 1.2; display: block; }
.child-pick .chev { color: var(--muted); }
.notif-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); border: 1.5px solid var(--bg); }
.avatar-btn { border-radius: 50%; padding: 0; line-height: 0; }
.avatar-btn .avatar { transition: box-shadow .2s; }
.avatar-btn:hover .avatar { box-shadow: 0 0 0 3px rgba(15, 92, 72, .14); }

.pop-host { position: relative; }
.popover.right { right: 0; top: calc(100% + 9px); }
.popover.left { left: 0; top: calc(100% + 9px); }
.pop-child { display: flex; align-items: center; gap: 10px; padding: 9px 10px; width: 100%; border-radius: var(--radius); text-align: left; }
.pop-child:hover { background: var(--pine-mist); }
.pop-child .pc-check { margin-left: auto; color: var(--pine); font-size: 13px; }
.pop-child small { display: block; color: var(--muted); font-size: 10.5px; }

/* ---------------- footer ---------------- */
.site-foot { display: none; border-top: 1px solid var(--line); margin-top: 30px; }
.site-foot-in {
  width: min(1180px, calc(100% - 40px)); margin: 0 auto;
  padding: 28px 0; display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--muted);
}
.site-foot a:hover { color: var(--pine); }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------------- mobile nav ---------------- */
/* 移动优先：底部标签栏手机常驻，≥900px 让位给顶部导航 */
.bottom-nav {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(248, 249, 247, .96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 4px 6px calc(4px + var(--safe-b));
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: var(--bottom-nav-h); padding: 4px 0;
  font-size: 11px; color: var(--muted); border-top: 2px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav a.on { border-top-color: var(--pine); color: var(--pine); font-weight: 700; }
.bottom-nav svg { width: 22px; height: 22px; }

/* 路由切换：一次编排好的入场，不做逐项 hover 表演 */
#view > .flow-wrap, #view .auth-wrap { animation: viewIn .28s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* 页面里的区块从上往下依次落位：每档 45ms，看得出顺序，但不拖时间。
   .submit-cta 是吸底操作条，带 transform 会让它的 fixed 失效，必须排除。 */
@media (prefers-reduced-motion: no-preference) {
  #view > .page > *:not(.submit-cta):not(.sticky-top) { animation: viewIn .34s var(--ease) both; }
  #view > .page > *:nth-child(2) { animation-delay: .045s; }
  #view > .page > *:nth-child(3) { animation-delay: .09s; }
  #view > .page > *:nth-child(4) { animation-delay: .135s; }
  #view > .page > *:nth-child(n+5) { animation-delay: .18s; }
}

/* ---------------- greeting ---------------- */
.greet { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.greet h1 { font-size: clamp(23px, 2.8vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.greet .date { font-size: 12px; color: var(--muted); margin-bottom: 4px; letter-spacing: .04em; }
.greet-actions { display: flex; align-items: center; gap: 10px; }

/* ---------------- hero ---------------- */
/* 今日主卡：深松绿的舞台，里面浮一张白纸任务卡 */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-xl);
  background: linear-gradient(125deg, #0d4f3e 0%, #0a3f32 55%, #082f26 100%);
  color: #edf5f0;
  box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  padding: 22px 22px 22px 25px;
}
.hero::before {
  content: ""; position: absolute; z-index: -1; right: -90px; top: -160px;
  width: 520px; height: 520px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 0 0 60px rgba(255,255,255,.025), 0 0 0 130px rgba(255,255,255,.018);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; left: -100px; bottom: -190px;
  width: 420px; height: 420px; border-radius: 50%;
  background: rgba(221, 143, 63, .12); filter: blur(30px);
}
.hero-copy { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
/* hero 右上角：今日全营打卡人数 / 平均学习时长 */
.hero-stats {
  position: absolute; top: 20px; right: 22px; z-index: 2;
  display: flex; gap: 26px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 10px 18px;
  backdrop-filter: blur(2px);
}
.hero-stats .hs-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.hero-stats b { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; color: #fff; }
.hero-stats span { font-size: 10.5px; color: rgba(237, 245, 240, .66); white-space: nowrap; }
@media (max-width: 860px) {
  .hero-stats {
    position: static; order: 2; align-self: flex-start;
    margin: 0 0 4px; padding: 8px 14px; gap: 18px;
  }
  .hero { display: flex; flex-direction: column; }
  .hero .hero-copy { order: 1; }
  .hero .hero-task { order: 3; }
}
.hero .eyebrow { color: rgba(237,245,240,.6); }
.hero h1 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.26; font-weight: 600; margin: 12px 0 0; letter-spacing: -.01em; }
.hero h1 em { font-style: normal; color: #f2c58e; }
.hero-course { margin-top: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-course .hc-name { font-size: 13px; font-weight: 600; color: #fff; }
.hero-course .hc-meta { font-size: 11.5px; color: rgba(237,245,240,.62); }
.hero-progress { margin-top: 9px; width: 100%; max-width: 330px; }
.hero-progress .bar { background: rgba(255,255,255,.16); height: 6px; }
.hero-progress .bar > i { background: #f2c58e; }
.hero-progress .hp-row { display: flex; justify-content: space-between; font-size: 10.5px; color: rgba(237,245,240,.6); margin-top: 5px; }
.hero-task {
  background: rgba(255,255,255,.97); color: var(--ink);
  border-radius: 22px; padding: 22px 22px 20px;
  box-shadow: 0 24px 50px -25px rgba(0,0,0,.5);
  display: flex; flex-direction: column; min-width: 0; position: relative;
}
.hero-task::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px;
  border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #dd8f3f, #f2c58e);
}
.task-kicker { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--apricot-deep); font-weight: 700; }
.task-kicker .seq { color: var(--muted); letter-spacing: .04em; font-weight: 600; }
.hero-task h2 { font-size: 22px; line-height: 1.35; margin: 9px 0 7px; font-family: var(--font-serif); font-weight: 600; }
.hero-task .ht-req { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 15px; }
.ev-chips .tag { font-weight: 500; }
.hero-task .btn { width: 100%; }
.hero-task .ht-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 10.5px; color: var(--muted); }
.hero-empty { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }

/* ---------------- stat strip ---------------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); margin-top: 18px; overflow: hidden;
}
.stat-cell { padding: 15px 20px; border-right: 1px solid var(--line); display: flex; gap: 12px; align-items: center; min-width: 0; }
.stat-cell:last-child { border-right: 0; }
.stat-cell:nth-child(2) { border-right: 0; }
.stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.stat-ic { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--pine-soft); color: var(--pine); flex: none; }
.stat-ic.acc { background: var(--apricot-soft); color: var(--apricot-deep); }
.stat-ic.sky { background: var(--sky-soft); color: var(--sky); }
.stat-ic.gold { background: var(--gold-soft); color: #8a641e; }
.stat-cell .sc-val { font-size: 21px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-cell .sc-val small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.stat-cell .sc-label { font-size: 10.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; }

/* ---------------- dashboard grid ---------------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: var(--gap); align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.panel-head h3 { font-size: 16px; font-weight: 600; }
.panel-head .ph-sub { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 6px; }

/* today's done list */
.done-list { display: flex; flex-direction: column; }
.done-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.done-item:last-child { border-bottom: 0; padding-bottom: 0; }
.done-check { width: 24px; height: 24px; border-radius: 50%; background: var(--pine-soft); color: var(--pine); display: grid; place-items: center; flex: none; }
.done-main { flex: 1; min-width: 0; }
.done-main .dm-name { font-size: 13px; font-weight: 600; }
.done-main .dm-meta { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.done-min { font-size: 13px; font-weight: 700; color: var(--pine); font-variant-numeric: tabular-nums; }
.done-foot { display: flex; align-items: center; justify-content: space-between; background: var(--paper-2); border-radius: var(--radius); padding: 10px 14px; margin-top: 14px; font-size: 12px; }
.done-foot b { font-size: 17px; color: var(--ink); }

/* week rhythm */
.week-bars { display: flex; align-items: flex-end; gap: 8px; height: 104px; margin-top: 6px; }
.week-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.week-bar .wb { width: 100%; max-width: 30px; border-radius: var(--radius-xs); background: var(--bg-deep); min-height: 4px; position: relative; transition: height .6s var(--ease); }
.week-bar .wb.has { background: linear-gradient(180deg, #8fc0aa, #2f8a6b); }
.week-bar .wb.today { background: linear-gradient(180deg, #f0c592, #dd8f3f); }
.week-bar .wb.has::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.week-bar .wl { font-size: 10px; color: var(--muted-2); }
.week-bar .wv { font-size: 9.5px; color: var(--muted); font-weight: 600; height: 12px; }

/* path preview */
.path-mini { display: flex; flex-direction: column; gap: 0; }
.pm-row { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.pm-row:last-child { padding-bottom: 0; }
.pm-row::before { content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 1.5px; background: var(--line); }
.pm-row:last-child::before { display: none; }
.pm-dot { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); flex: none; display: grid; place-items: center; font-size: 9px; color: var(--muted); z-index: 1; margin-top: 1px; }
.pm-dot.done { background: var(--pine); border-color: var(--pine); color: #fff; }
.pm-dot.now { border-color: var(--apricot); background: #fff; box-shadow: 0 0 0 4px rgba(221,143,63,.14); }
.pm-dot.now::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--apricot); }
.pm-main { min-width: 0; }
.pm-main .pm-name { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.pm-main .pm-status { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.pm-row.now .pm-name { color: var(--apricot-deep); }

/* square preview */
.sq-preview { display: flex; flex-direction: column; gap: 10px; }
.sq-item { display: flex; gap: 10px; padding: 11px 12px; border-radius: var(--radius-lg); background: var(--paper-2); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.sq-item:hover { border-color: var(--line); background: #fff; }
.sq-item .sq-main { min-width: 0; flex: 1; }
.sq-item .sq-name { font-size: 12px; font-weight: 700; }
.sq-item .sq-name span { font-weight: 400; color: var(--muted); font-size: 10.5px; margin-left: 4px; }
.sq-item .sq-text { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sq-item .sq-meta { font-size: 10px; color: var(--muted); margin-top: 5px; display: flex; gap: 10px; }

/* reading recommendation */

/* ---------------- task submit ---------------- */
.focus-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper); font-size: 12px; color: var(--ink-2); }
.back-btn:hover { background: #fff; border-color: var(--line-strong); }
.submit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.task-hero { padding: 18px; }
.task-hero .th-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.task-hero h1 { font-size: clamp(23px, 2.5vw, 30px); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; }
.task-hero .th-course { font-size: 12px; color: var(--muted); margin-top: 5px; }
.task-hero .th-note { margin-top: 14px; padding: 13px 16px; border-radius: 13px; background: var(--pine-soft); border: 1px solid rgba(15, 92, 72, .16); font-size: 12.5px; color: var(--ink); line-height: 1.75; }
.task-hero .th-note b { display: block; font-size: 10.5px; letter-spacing: .08em; color: var(--pine); margin-bottom: 4px; }
.task-hero .th-req { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--paper-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); white-space: pre-line; line-height: 1.7; }
.checkin-date-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.checkin-date-row .cd-label { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.checkin-date-row .input { width: 150px; height: 34px; padding: 0 9px; font-size: 12px; }
.evidence-block { margin-top: 18px; }
.evidence-block .eb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.evidence-block .eb-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.evidence-area { border: 1px dashed var(--line-strong); background: var(--paper); border-radius: var(--radius-lg); padding: 12px; transition: border-color .2s, background .2s; }
.evidence-area:hover { border-color: var(--muted-2); }
.evidence-area.optional { background: var(--paper-2); }
.upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload-add { display: inline-flex; align-items: center; gap: 7px; height: 64px; width: 64px; border-radius: var(--radius); border: 1px dashed var(--line-strong); background: var(--paper-2); color: var(--muted); font-size: 10px; flex-direction: column; justify-content: center; }
.upload-add:hover { border-color: var(--pencil); color: var(--pencil); background: var(--pencil-mist); }
.upload-thumb { width: 64px; height: 64px; border-radius: var(--radius); position: relative; overflow: hidden; background: linear-gradient(140deg, #e2e8ef, #b6c2ce); border: 1px solid var(--line); display: grid; place-items: center; font-size: 19px; }
.upload-thumb .ut-x { position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; border-radius: 50%; background: rgba(22,36,31,.6); color: #fff; font-size: 10px; display: grid; place-items: center; line-height: 1; }
.upload-empty-note { font-size: 11px; color: var(--muted); }
.upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-thumb .ut-prog { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(22,36,31,.55); color: #fff; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.upload-thumb .ut-legacy { color: var(--muted); display: grid; place-items: center; }
.upload-thumb .ut-flag { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(22,36,31,.55); color: #fff; font-size: 9px; text-align: center; line-height: 14px; }
.up-bar { height: 4px; border-radius: 999px; background: var(--bg-deep); overflow: hidden; }
.up-bar i { display: block; height: 100%; background: var(--pine); border-radius: inherit; transition: width .2s; }
.file-pill { display: flex; align-items: center; gap: 9px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; font-size: 11.5px; }
.file-pill .fp-ic { width: 28px; height: 28px; border-radius: var(--radius); background: var(--pine-soft); color: var(--pine); display: grid; place-items: center; flex: none; }
.minute-input-wrap { display: flex; align-items: center; gap: 10px; }
.minute-input-wrap .input { width: 130px; font-size: 20px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.minute-unit { font-size: 13px; color: var(--muted); }
.time-collect { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* 广场翻页 */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; }
.pager:empty { display: none; }
.pager-btn { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); color: var(--ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.pager-btn:hover:not(:disabled) { border-color: var(--pine); color: var(--pine); }
.pager-btn.on { background: var(--pine); border-color: var(--pine); color: #fff; }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-dots { color: var(--muted); font-size: 12px; padding: 0 2px; }
@media (min-width: 700px) {
  .time-collect { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tc-row { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 12px; }
  .tc-name { flex: none; }
  .tc-input { justify-content: space-between; }
  .tc-input .input { width: 84px; height: 36px; }
}
.tc-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); }
.tc-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
.tc-input { display: flex; align-items: center; gap: 6px; flex: none; }
.tc-input .input { width: 96px; height: 38px; text-align: center; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tc-input span { font-size: 11px; color: var(--muted); }
.tc-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.tc-total b { font-size: 24px; color: var(--pine); font-variant-numeric: tabular-nums; }
.quick-minutes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.quick-minutes .chip { height: 28px; font-variant-numeric: tabular-nums; }
.total-min { display: inline-flex; align-items: baseline; gap: 4px; font-size: 11.5px; color: var(--muted); }
.total-min b { font-size: 17px; color: var(--ink); }
.visibility-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vis-opt { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--paper); transition: all .2s; }
.vis-opt:hover { border-color: var(--line-strong); }
.vis-opt.on { border-color: var(--pencil); background: var(--pencil-mist); box-shadow: 0 0 0 1px var(--pencil) inset; }
.vis-opt .vo-ic { color: var(--pencil); flex: none; margin-top: 1px; }
.vis-opt .vo-name { font-size: 12px; font-weight: 700; }
.vis-opt .vo-desc { font-size: 10px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.side-sticky { position: static; display: flex; flex-direction: column; gap: 14px; }
.checklist { display: flex; flex-direction: column; gap: 7px; }
.checklist-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.checklist-row .cl-dot { width: 17px; height: 17px; border-radius: 50%; background: var(--bg-deep); color: var(--muted); display: grid; place-items: center; font-size: 9px; flex: none; }
.checklist-row.done .cl-dot { background: var(--pine-soft); color: var(--pine); }
.checklist-row.warn .cl-dot { background: var(--rose-soft); color: var(--rose); }
.draft-note { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--muted); }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------------- history calendar ---------------- */
.hist-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head h3 { font-size: 18px; }
.cal-nav { display: flex; gap: 4px; }
.cal-nav button { width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); background: #fff; font-size: 13px; }
.cal-nav button:hover { border-color: var(--line-strong); }
.cal-week, .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-week div { text-align: center; font-size: 10.5px; color: var(--muted); padding: 4px 0 7px; }
.cal-day {
  min-height: 60px; border-radius: var(--radius); border: 1px solid transparent;
  padding: 5px 5px 4px; display: flex; flex-direction: column; gap: 2px;
  position: relative; background: transparent; text-align: left; transition: all .18s;
}
.cal-day:hover { background: #fff; border-color: var(--line); }
.cal-day.empty { opacity: 0; pointer-events: none; }
.cal-day .cd-num { font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.cal-day.today .cd-num { color: #fff; background: var(--ink); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; }
.cal-day .cd-min { font-size: 8.5px; color: var(--pencil); font-weight: 700; }
.cal-day .cd-tasks { display: none; gap: 3px; flex-wrap: wrap; margin-top: auto; }
.cal-day .cd-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--leaf); }
.cal-day .cd-dot.pending { background: var(--apricot); }
.cal-day .cd-dot.late { background: var(--rose); }
.cal-day .cd-dot.missed { background: var(--line-strong); }
.cal-day.has { background: #fff; border-color: var(--line); }
.cal-day.selected { border-color: var(--pine); box-shadow: 0 0 0 2px rgba(15, 92, 72, .12); }
.cal-day.missed { background: repeating-linear-gradient(135deg, #fbfaf6, #fbfaf6 5px, #f6f4ee 5px, #f6f4ee 10px); }
.cal-day .cd-badge { position: absolute; top: 6px; right: 6px; font-size: 8px; padding: 1px 4px; border-radius: var(--radius-sm); background: var(--rose-soft); color: var(--rose); }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 10.5px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.day-detail { position: static; }
.day-detail .dd-date { font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.day-detail .dd-sum { display: flex; gap: 16px; margin: 10px 0 14px; font-size: 11px; color: var(--muted); }
.day-detail .dd-sum b { color: var(--ink); font-size: 14px; }
.dd-task { padding: 11px 0; border-top: 1px dashed var(--line); }
.dd-task:first-of-type { border-top: 0; }
.dd-task .dt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dd-task .dt-name { font-size: 12.5px; font-weight: 600; }
.dd-task .dt-meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.dd-review { font-size: 11px; background: var(--pine-mist); border-left: 2px solid var(--leaf); padding: 7px 9px; border-radius: 0 7px 7px 0; margin-top: 7px; color: var(--ink-2); }
.dd-review b { color: var(--mark-deep); font-weight: 700; }

/* ---------------- course path ---------------- */
.path-hero { background: linear-gradient(120deg, #0d4f3e, #0a3f32); color: #edf5f0; border-radius: var(--radius-xl); padding: 26px 28px; position: relative; overflow: hidden; }
.path-hero::before { content: ""; position: absolute; right: -60px; top: -120px; width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 0 0 50px rgba(255,255,255,.03), 0 0 0 100px rgba(255,255,255,.02); }
.path-hero h1 { font-size: clamp(26px, 3vw, 36px); margin: 8px 0 6px; }
.path-hero p { font-size: 12.5px; color: rgba(237,245,240,.65); max-width: 520px; }
.path-hero .ph-stats { display: flex; gap: 30px; margin-top: 24px; flex-wrap: wrap; }
.path-hero .ph-stats b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.path-hero .ph-stats span { font-size: 10.5px; color: rgba(237,245,240,.55); }
.package-block { margin-top: 22px; }
.package-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.package-title h3 { font-size: 17px; }
.course-path { position: relative; }
.course-node { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 16px; position: relative; padding-bottom: 16px; }
.course-node:last-child { padding-bottom: 0; }
.course-node::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line); }
.course-node:last-child::before { display: none; }
.course-node.done::before { background: var(--pencil); }
.cn-marker { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--paper); color: var(--muted); font-size: 14px; font-weight: 700; position: relative; z-index: 1; }
.course-node.done .cn-marker { background: var(--pine); border-color: var(--pine); color: #fff; }
.course-node.now .cn-marker { background: #fff; border-color: var(--apricot); color: var(--apricot-deep); box-shadow: 0 0 0 5px rgba(221, 143, 63, .14); }
.course-card { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); }
.course-node.now .course-card { border-color: #eccfa9; background: linear-gradient(180deg, #fffaf3, #fff); box-shadow: var(--shadow-sm); }
.course-node.done .course-card { background: var(--paper-2); }
.course-card .cc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.course-card h4 { font-size: 15px; font-weight: 700; }
.course-card .cc-meta { font-size: 10.5px; color: var(--muted); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.course-card .cc-desc { font-size: 11.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.6; }
.course-card .cc-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.course-card .cc-foot .bar { flex: 1; }
.closing-note { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--sticker-soft); border: 1px solid #f0e3c0; font-size: 11px; color: var(--sticker-deep); }
.closing-note b { font-weight: 700; }
.timeline-empty { padding: 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius); text-align: center; font-size: 12px; color: var(--muted); }

/* ---------------- square ---------------- */
.sq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.sq-feed { display: flex; flex-direction: column; gap: 14px; }
.sq-card { padding: 16px; }
.sq-card .sc-head { display: flex; align-items: center; gap: 11px; }
.sq-card .sc-user { flex: 1; min-width: 0; }
.sq-card .sc-name { font-size: 13px; font-weight: 700; }
.sq-card .sc-sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sq-card .sc-body { margin-top: 12px; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.sq-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 11px; }
.sq-media .sm-img { aspect-ratio: 1.35; border-radius: var(--radius-sm); background: linear-gradient(140deg, #e2e8ef, #b6c2ce); display: grid; place-items: center; color: rgba(22, 36, 31, .4); font-size: 20px; overflow: hidden; position: relative; }
.sq-media .sm-img:nth-child(2) { background: linear-gradient(140deg, #f3ddd7, #d9a79b); }
.sq-media .sm-img:nth-child(3) { background: linear-gradient(140deg, #d6e0ea, #a5bccc); }
.sq-card .sc-actions { display: flex; align-items: center; gap: 16px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #e9ecef; }
.sq-act { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); font-weight: 500; padding: 3px 4px; border-radius: var(--radius-sm); }
.sq-act:hover { color: var(--pencil); background: var(--pencil-mist); }
.sq-act.liked { color: var(--rose); }
.sq-act.liked svg { fill: currentColor; }
.sq-teacher { margin-top: 11px; padding: 12px 14px; border-radius: 12px; background: var(--gold-soft); border: 1px solid #efe0bf; }
.sq-teacher .st-head { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--mark-deep); font-weight: 700; }
.sq-teacher .st-text { font-size: 12px; color: var(--ink); margin-top: 5px; line-height: 1.6; }
.sq-comments { margin-top: 11px; background: var(--paper-2); border-radius: var(--radius); padding: 10px 12px; }
.sq-comment { display: flex; gap: 8px; padding: 5px 0; font-size: 11.5px; }
.sq-comment .cm-name { font-weight: 700; color: var(--pencil); flex: none; }
.sq-comment .cm-text { color: var(--ink-2); }
.comment-form { display: flex; gap: 8px; margin-top: 10px; }
.comment-form input { flex: 1; border: 1px solid var(--line); border-radius: var(--radius-sm); height: 32px; padding: 0 12px; font-size: 11.5px; background: #fff; }
.comment-form input:focus { outline: none; border-color: var(--leaf); }
.sq-side { display: flex; flex-direction: column; gap: 14px; position: static; }
.rule-card { font-size: 11px; color: var(--muted); line-height: 1.75; }
.rule-card li { position: relative; padding-left: 13px; }
.rule-card li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); }
.parent-of-day { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 11.5px; }
.parent-of-day:last-child { border-bottom: 0; }
.pod-rank { width: 20px; font-family: var(--font-en); font-size: 14px; color: var(--apricot-deep); }

/* ---------------- library ---------------- */
.lib-hero { background: linear-gradient(125deg, #123f33, #0a3f32 70%, #092e25); border-radius: var(--radius-xl); padding: 26px 28px; color: #eef5f0; position: relative; overflow: hidden; }
.lib-hero::before { content: ""; position: absolute; right: 24%; top: -140px; width: 340px; height: 340px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 50px rgba(255,255,255,.025); }
.lib-hero h1 { font-size: clamp(26px, 3vw, 36px); margin: 8px 0 0; }
.lib-hero p { font-size: 12.5px; color: rgba(238,245,240,.6); margin-top: 6px; max-width: 480px; }
.lib-cats { display: flex; gap: 8px; margin-top: 18px; overflow-x: auto; padding-bottom: 2px; }
.lib-cat { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 15px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper); transition: all .2s; min-width: 92px; }
.lib-cat:hover { background: #fff; border-color: var(--line-strong); }
.lib-cat.on { background: var(--pencil); border-color: var(--pencil); color: #fff; }
.lib-cat .lc-name { font-size: 12.5px; font-weight: 700; }
.lib-cat .lc-count { font-size: 9.5px; opacity: .6; }
.lib-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 18px; }
.lib-tools .spacer { flex: 1; }
/* 主题 chips 横向滚动：flex 子项禁止收缩，否则会被压成一字一行 */
.lib-tools .scroll-x { flex: 1 1 100%; min-width: 0; }
.lib-tools .scroll-x .chip { flex: none; white-space: nowrap; }
.lib-tools .input { max-width: 230px; height: 34px; font-size: 12px; border-radius: var(--radius-sm); padding-left: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2377837d' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 13px center; }
.series-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.series-card { overflow: hidden; display: flex; flex-direction: column; }
.series-card .sc-cover { height: 168px; border-radius: 0; }
.series-card .sc-body { padding: 13px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.series-card .sc-title { font-family: var(--font-en); font-size: 16px; line-height: 1.25; font-weight: 600; }
.series-card .sc-cn { font-size: 11px; color: var(--muted); margin-top: 1px; }
.series-card .sc-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.series-card .sc-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.level-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.level-chip { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--bg-deep); color: var(--ink-2); letter-spacing: .03em; }
.level-chip.raz { background: var(--apricot-soft); color: var(--apricot-deep); }
.level-chip.lex { background: var(--sky-soft); color: var(--sky); }
.level-chip.ar { background: var(--pine-soft); color: var(--pine); }
.level-chip.age { background: var(--rose-soft); color: var(--rose); }
.series-banner { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; align-items: start; }
.series-banner .sb-cover { height: 190px; }
.series-banner .sb-info h1 { font-family: var(--font-en); font-size: 30px; line-height: 1.15; }
.series-banner .sb-cn { font-size: 13px; color: var(--muted); margin-top: 3px; }
.series-banner .sb-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; margin-top: 12px; }
.vol-list { display: flex; flex-direction: column; }
.vol-row { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.vol-actions { grid-column: 2; margin-top: 6px; }
.vol-row:last-child { border-bottom: 0; }
.vol-idx { width: 30px; height: 30px; border-radius: var(--radius); background: var(--bg-deep); display: grid; place-items: center; font-family: var(--font-en); font-size: 13px; color: var(--ink-2); }
.vol-title { font-family: var(--font-en); font-size: 15px; font-weight: 600; }
.vol-meta { font-size: 10.5px; color: var(--muted); margin-top: 1px; display: flex; gap: 8px; flex-wrap: wrap; }
.vol-actions { display: flex; gap: 6px; }

/* ---------------- quiz / reading flows ---------------- */
.flow-wrap { width: calc(100% - var(--gutter) * 2); margin: 0 auto; padding: 18px 0 calc(var(--bottom-nav-h) + var(--safe-b) + 40px); }
.flow-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.flow-top .ft-title { font-size: 13px; font-weight: 600; }
.flow-top .ft-sub { font-size: 10.5px; color: var(--muted); }
.flow-progress { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 11px; color: var(--muted); }
.flow-progress .bar { width: 120px; height: 5px; }
.quiz-card { padding: 20px 18px; border-radius: var(--radius-xl); }
.quiz-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.quiz-q { font-family: var(--font-en); font-size: clamp(19px, 5vw, 24px); line-height: 1.45; font-weight: 500; color: var(--ink); }
.quiz-q .q-word { padding: 1px 4px; border-radius: var(--radius-sm); transition: background .2s; cursor: pointer; }
.quiz-q .q-word:hover { background: var(--gold-soft); }
.tts-btn { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 9px; border-radius: var(--radius-sm); background: var(--pencil-mist); color: var(--pencil); font-size: 10.5px; font-weight: 600; border: 1px solid #d5e0ee; }
.tts-btn:hover { background: #e6ecf4; }
.tts-btn.playing { animation: tts-pulse 1.4s infinite; }
.tts-btn.off { background: var(--paper-2); color: var(--muted); border-color: var(--line); text-decoration: line-through; text-decoration-thickness: 1px; }
@keyframes tts-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(15,92,72,.2); } 50% { box-shadow: 0 0 0 5px rgba(15,92,72,.08); } }
.cover-art.cover-photo { background: var(--paper-2); }
.cover-photo .ca-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.options { display: grid; gap: 10px; margin-top: 24px; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  min-height: var(--tap); padding: 13px 14px; border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--paper); font-family: var(--font-en); font-size: 15px;
  transition: border-color .18s, background .18s, transform .18s;
}
.opt:hover { border-color: var(--pencil); background: var(--pencil-mist); }
.opt .opt-key { width: 27px; height: 27px; border-radius: var(--radius); background: var(--bg-deep); display: grid; place-items: center; font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; color: var(--ink-2); flex: none; }
.opt.correct { border-color: var(--leaf); background: var(--pine-mist); }
.opt.correct .opt-key { background: var(--pine); color: #fff; }
.opt.wrong { border-color: var(--rose); background: var(--rose-soft); }
.opt.wrong .opt-key { background: var(--rose); color: #fff; }
.opt.muted-opt { opacity: .55; }
/* 已选择但暂不揭示对错：只用中性色描边，不用绿/红 */
.opt.picked { border-color: var(--pine); background: var(--pine-mist); }
.opt.picked .opt-key { background: var(--pine); color: #fff; }
.opt.picked::after { content: "已选择"; margin-left: auto; font-family: var(--font-sans); font-size: 10.5px; color: var(--pine); letter-spacing: .04em; }
.opt[disabled] { cursor: default; transform: none; }
.q-picked-note { margin-top: 18px; border-radius: var(--radius-lg); padding: 13px 16px; font-size: 12.5px; line-height: 1.6; background: var(--bg-deep); border: 1px dashed var(--line); color: var(--ink-2); }
.q-feedback { margin-top: 18px; border-radius: var(--radius-lg); padding: 14px 16px; font-size: 12.5px; display: flex; gap: 10px; line-height: 1.6; }
.q-feedback.ok { background: var(--pencil-mist); border: 1px solid #d5e0ee; color: var(--pencil-deep); }
.q-feedback.no { background: var(--mark-soft); border: 1px solid #f2d9d4; color: var(--mark-deep); }
.q-feedback .qf-title { font-weight: 700; margin-bottom: 2px; }
.quiz-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.quiz-foot .hint { max-width: 420px; }
.result-hero { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; align-items: center; padding: 22px 20px; }
.result-hero .score-ring { justify-self: center; }
.score-ring { position: relative; display: grid; place-items: center; }
.score-ring .sr-num { position: absolute; text-align: center; }
.score-ring .sr-num b { font-family: var(--font-en); font-size: 48px; line-height: 1; display: block; }
.score-ring .sr-num span { font-size: 10.5px; color: var(--muted); }
.result-hero h2 { font-size: 26px; }
.result-hero .rh-sub { font-size: 12px; color: var(--muted); margin-top: 5px; }
.result-stats { display: flex; gap: 26px; margin-top: 16px; flex-wrap: wrap; }
.result-stats b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.result-stats span { font-size: 10px; color: var(--muted); }
.review-item { border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 9px; overflow: hidden; background: #fff; }
.review-q { display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; width: 100%; text-align: left; }
.review-q .rq-no { width: 22px; height: 22px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.review-q .rq-no.ok { background: var(--pine-soft); color: var(--pine); }
.review-q .rq-no.no { background: var(--rose-soft); color: var(--rose); }
.review-q .rq-text { flex: 1; font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.review-q .rq-arrow { color: var(--muted); transition: transform .2s; }
.review-item.open .rq-arrow { transform: rotate(180deg); }
.review-body { padding: 0 16px 15px 49px; display: none; }
.review-item.open .review-body { display: block; }
.review-body .rb-line { font-size: 11.5px; margin-top: 4px; }
.review-body .rb-line b { font-weight: 600; }
.review-body .rb-exp { margin-top: 8px; padding: 9px 11px; background: var(--paper-2); border-radius: var(--radius); font-size: 11.5px; color: var(--ink-2); line-height: 1.6; }

/* retell */
.retell-prompt { background: var(--pine-mist); border-radius: var(--radius-lg); padding: 16px 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.story-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.story-map div { background: #fff; border: 1px solid #dde4ec; border-radius: var(--radius); padding: 9px 10px; min-height: 72px; }
.story-map b { display: block; font-size: 10px; color: var(--pencil); letter-spacing: .04em; margin-bottom: 3px; }
.story-map span { font-size: 10.5px; color: var(--muted); }
.retell-tabs { display: flex; gap: 4px; background: var(--bg-deep); padding: 3px; border-radius: var(--radius); width: fit-content; }
.retell-tabs button { padding: 7px 18px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--muted); }
.retell-tabs button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-xs); }
.rec-btn { width: 84px; height: 84px; border-radius: 50%; background: var(--pencil); color: #fff; display: grid; place-items: center; margin: 0 auto; box-shadow: 0 10px 24px -12px rgba(22, 36, 31, .45); }
.rec-btn.recording { background: var(--rose); animation: rec-pulse 1.6s infinite; }
@keyframes rec-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(221, 143, 63, .24); } 50% { box-shadow: 0 0 0 16px rgba(221, 143, 63, 0); } }

/* retell audio upload */
.audio-zone { border-radius: var(--radius-lg); }
.audio-drop { width: 100%; border: 1px dashed var(--line-strong); background: var(--paper-2); border-radius: var(--radius-lg); padding: 26px 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-2); transition: border-color .18s, background .18s; }
.audio-drop:hover, .audio-zone.drag .audio-drop { border-color: var(--pine); background: var(--pine-mist); }
.audio-drop .ad-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--pine-soft); color: var(--pine); display: grid; place-items: center; margin-bottom: 3px; }
.audio-file { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: 12px 14px; flex-wrap: wrap; }
.audio-file .af-ic { width: 38px; height: 38px; border-radius: var(--radius); background: var(--pine-soft); color: var(--pine); display: grid; place-items: center; flex: none; }
.audio-file .af-name { font-weight: 600; font-size: 12.5px; overflow-wrap: anywhere; }
.audio-file audio { width: 100%; height: 36px; margin-top: 10px; }

/* rubric */
.rubric-row { display: grid; grid-template-columns: 100px minmax(0,1fr) 48px; gap: 12px; align-items: center; padding: 8px 0; font-size: 12px; }
.rubric-row .rb-bar { height: 6px; border-radius: var(--radius-sm); background: var(--bg-deep); overflow: hidden; }
.rubric-row .rb-bar i { display: block; height: 100%; background: var(--leaf); border-radius: inherit; }
.rubric-row .rb-score { text-align: right; font-weight: 700; color: var(--pine); }

/* ---------------- medals ----------------
   勋章做成「实体金属币」：外圈车花金属反光 + 内圈凹槽 + 斜向高光 + 投影。
   尺寸由调用处内联给（38/40/52/82px），所以这里一律用百分比/em，
   保证同一套样式在后台小图标和家长端大勋章上都成立。 */
.medal-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.medal-card { padding: 20px 16px; text-align: center; position: relative; }
.medal {
  width: 82px; height: 82px; border-radius: 50%;
  margin: 0 auto 12px;
  display: grid; place-items: center;
  position: relative; isolation: isolate;
  font-family: var(--font-doc);
  font-size: 27px; font-weight: 800; color: #6b4712;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.92), rgba(255,255,255,0) 48%),
    conic-gradient(from 200deg,
      #f9e9bb 0deg, #d5a94f 42deg, #fdf3d6 84deg, #c08f36 130deg,
      #f7e3ae 178deg, #bd8a2f 224deg, #fbeeca 270deg, #c89840 312deg, #f9e9bb 360deg);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.85),
    inset 0 -6px 12px rgba(96,63,10,.4),
    0 0 0 2px #f3dfae,
    0 0 0 3px rgba(128,90,26,.42),
    0 6px 16px rgba(96,63,10,.22);
  text-shadow: 0 1px 0 rgba(255,255,255,.78), 0 -1px 1px rgba(92,60,8,.5);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* 内圈：压下去的凹槽，让中间那一个字浮起来 */
.medal::before {
  content: ""; position: absolute; inset: 11%; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: inset 0 1px 3px rgba(110,74,16,.42), 0 1px 1px rgba(255,255,255,.5);
}
/* 斜向高光：从左上一道扫到右下，金属感主要靠它 */
.medal::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(148deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 64%, rgba(255,255,255,.26) 100%);
  pointer-events: none;
}
.medal.silver {
  color: #3d4642;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.95), rgba(255,255,255,0) 48%),
    conic-gradient(from 200deg, #f7f8f5 0deg, #b9c3bf 42deg, #ffffff 84deg, #9fada8 130deg, #eef2ef 178deg, #a6b3ae 224deg, #f6f8f6 270deg, #b2beb9 312deg, #f7f8f5 360deg);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.95), inset 0 -6px 12px rgba(70,84,78,.3),
    0 0 0 2px #eef1ee, 0 0 0 3px rgba(120,134,128,.38), 0 6px 16px rgba(70,84,78,.18);
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 -1px 1px rgba(70,84,78,.45);
}
.medal.bronze {
  color: #5a3315;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,240,225,.92), rgba(255,255,255,0) 48%),
    conic-gradient(from 200deg, #f6ddc4 0deg, #c48b57 42deg, #ffe9d3 84deg, #a9713f 130deg, #f3d4b4 178deg, #ab6f3a 224deg, #f8e0c8 270deg, #bd8350 312deg, #f6ddc4 360deg);
  box-shadow:
    inset 0 2px 3px rgba(255,245,235,.85), inset 0 -6px 12px rgba(92,53,20,.4),
    0 0 0 2px #f2dcc4, 0 0 0 3px rgba(133,84,45,.38), 0 6px 16px rgba(92,53,20,.2);
  text-shadow: 0 1px 0 rgba(255,240,225,.8), 0 -1px 1px rgba(92,53,20,.5);
}
/* 未获得：磨砂素圈 + 虚线内环，不用灰度滤镜（灰度会把投影一起弄脏） */
.medal.locked {
  color: #a8a294;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.9), rgba(255,255,255,0) 46%),
    conic-gradient(from 200deg, #f2efe7 0deg, #dcd8cd 42deg, #fbf9f4 84deg, #cfcabd 130deg, #efece3 178deg, #d5d0c4 224deg, #f8f6f0 270deg, #d9d4c8 312deg, #f2efe7 360deg);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.85), inset 0 -4px 10px rgba(120,114,100,.26),
    0 0 0 1px #e7e2d6, 0 4px 10px rgba(120,114,100,.12);
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}
.medal.locked::before { border-style: dashed; border-color: rgba(140,132,114,.45); box-shadow: none; }
.medal-card:hover .medal { transform: translateY(-2px); }
.medal-card:hover .medal.locked { transform: none; }

.medal-card .mc-name { font-size: 12.5px; font-weight: 700; }
.medal-card .mc-cond { font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.medal-card .mc-date { font-size: 9.5px; color: var(--muted); margin-top: 6px; font-weight: 600; }
.medal-card .mc-progress { margin-top: 8px; }
.medal-card .mc-progress .bar { height: 4px; }
.medal-card .mc-progress span { font-size: 9px; color: var(--muted); display: block; margin-top: 3px; }

/* ---------------- certificates ----------------
   奖状按「正式证书」排版：米色纸面 + 双线描金边框 + 四角饰角 +
   宋体标题 + 分隔花线 + 签名栏 + 朱红印章。印章用机构简称，不再写死。 */
.cert-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cert-card { padding: 12px; container-type: inline-size; }
.cert-art {
  position: relative;
  aspect-ratio: 1.45;
  padding: 7% 8% 6%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  font-size: 13px;
  font-size: clamp(10.5px, 3.7cqw, 19px);
  color: #4a3a1c;
  text-align: center;
  border-radius: 8px;
  background:
    radial-gradient(130% 100% at 50% 0%, #fffefb 0%, #fdf9ee 42%, #f6edd9 100%);
  box-shadow:
    inset 0 0 0 1px rgba(178,142,74,.4),
    inset 0 0 34px rgba(178,142,74,.14),
    0 6px 18px rgba(120,92,40,.12);
}
/* 双线描金：外框 + 内细线 */
.cert-art .ce-edge {
  position: absolute; inset: 2.6%; border-radius: 3px;
  border: 1px solid rgba(176,140,72,.55);
  pointer-events: none;
}
.cert-art .ce-edge::after {
  content: ""; position: absolute; inset: 3px; border-radius: 2px;
  border: 1px solid rgba(176,140,72,.24);
}
/* 四角饰角：两个方向的短金线 */
.cert-art .ce-corner {
  position: absolute; width: 4.2%; height: 6.4%;
  border: 0 solid rgba(168,132,64,.75);
  pointer-events: none;
}
.cert-art .ce-corner.tl { top: 3.6%; left: 3.8%; border-top-width: 1.5px; border-left-width: 1.5px; }
.cert-art .ce-corner.tr { top: 3.6%; right: 3.8%; border-top-width: 1.5px; border-right-width: 1.5px; }
.cert-art .ce-corner.bl { bottom: 3.6%; left: 3.8%; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.cert-art .ce-corner.br { bottom: 3.6%; right: 3.8%; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.cert-art .ce-head { display: flex; flex-direction: column; align-items: center; gap: .18em; }
.cert-art .ce-org {
  font-family: var(--font-doc);
  font-size: .78em; letter-spacing: .3em; text-indent: .3em;
  color: #8a641e;
}
.cert-art .ce-kicker {
  font-size: .5em; letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase; color: rgba(138,100,30,.72);
}
.cert-art .ce-title {
  font-family: var(--font-doc);
  font-size: 1.62em; line-height: 1.25; font-weight: 600;
  letter-spacing: .08em; text-indent: .08em;
  color: #4f3b16; margin: .34em 0 .1em;
}
/* 花线：细线 + 中间菱形 */
.cert-art .ce-rule { display: flex; align-items: center; gap: .5em; width: 62%; margin: .1em 0 .5em; }
.cert-art .ce-rule i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(176,140,72,0), rgba(176,140,72,.75), rgba(176,140,72,0)); }
.cert-art .ce-rule b { width: .34em; height: .34em; transform: rotate(45deg); background: rgba(168,132,64,.8); }
.cert-art .ce-line { font-size: .82em; color: #6d5a31; letter-spacing: .04em; }
.cert-art .ce-name {
  font-family: var(--font-doc);
  font-size: 1.24em; font-weight: 600; color: #4f3b16;
  margin: 0 .12em; border-bottom: 1px solid rgba(168,132,64,.5); padding-bottom: .06em;
}
.cert-art .ce-desc {
  font-size: .76em; line-height: 1.7; color: #7a6438;
  margin-top: .62em; max-width: 88%;
}
/* 签名栏 */
.cert-art .ce-foot {
  position: absolute; left: 12%; right: 12%; bottom: 12%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1em;
}
.cert-art .ce-sign { text-align: left; font-size: .62em; color: #8a641e; }
.cert-art .ce-sign:last-child { text-align: right; }
.cert-art .ce-sign span {
  display: block; min-width: 5.6em; padding-bottom: .28em;
  border-bottom: 1px solid rgba(176,140,72,.55);
  font-size: 1.12em; color: #5c4720;
}
.cert-art .ce-sign em { display: block; margin-top: .3em; font-style: normal; letter-spacing: .16em; color: rgba(138,100,30,.72); }
/* 朱红印章：双圈 + 机构简称，压右下角、略斜 */
.cert-art .ce-seal {
  position: absolute; right: 8%; bottom: 24%;
  width: 3.1em; height: 3.1em; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-doc); font-size: .68em; line-height: 1.05;
  letter-spacing: .04em;
  color: rgba(170,52,40,.86);
  border: 1.5px solid rgba(170,52,40,.72);
  box-shadow: inset 0 0 0 2px rgba(170,52,40,.16);
  transform: rotate(-9deg);
  background: radial-gradient(circle at 40% 35%, rgba(190,60,45,.1), rgba(190,60,45,.03));
  opacity: .92;
}
.cert-card .cc-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.cert-card.revoked .cert-art { filter: grayscale(1); opacity: .55; }

/* ---------------- messages / me ---------------- */
.msg-list { display: flex; flex-direction: column; }
.msg-row { display: flex; gap: 13px; padding: 15px 18px; border-bottom: 1px solid var(--line); transition: background .2s; }
.msg-row:last-child { border-bottom: 0; }
.msg-row:hover { background: var(--paper-2); }
.msg-row.unread { background: var(--pencil-mist); }
.msg-ic { width: 34px; height: 34px; border-radius: var(--radius); display: grid; place-items: center; flex: none; background: var(--pine-soft); color: var(--pine); }
.msg-ic.acc { background: var(--apricot-soft); color: var(--apricot-deep); }
.msg-ic.gold { background: var(--sticker-soft); color: var(--sticker-deep); }
.msg-main { flex: 1; min-width: 0; }
.msg-main .mm-title { font-size: 12.5px; font-weight: 600; }
.msg-main .mm-text { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.msg-time { font-size: 10px; color: var(--muted-2); flex: none; }
.me-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--gap); align-items: start; }
.me-profile { text-align: center; padding: 28px 20px; }
.me-profile h2 { font-size: 20px; margin-top: 10px; }
.me-nav { display: flex; flex-direction: column; margin-top: 16px; }
.me-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); font-size: 12.5px; color: var(--ink-2); }
.me-nav a:hover { background: var(--pencil-mist); color: var(--pencil); }

/* 勋章与奖状：手风琴，内容就在菜单行里展开 */
.me-nav button.me-nav-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: 0; border-radius: var(--radius); background: none;
  font-family: inherit; font-size: 12.5px; color: var(--ink-2); text-align: left; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.me-nav button.me-nav-toggle:hover { background: var(--pencil-mist); color: var(--pencil); }
.me-nav button.me-nav-toggle.open { background: var(--pencil-mist); color: var(--pencil); }
.me-nav-count { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.me-nav-toggle.open .me-nav-count { color: var(--pencil); }
.me-nav-toggle .chev { display: inline-flex; color: var(--muted-2); transition: transform .2s var(--ease); }
.me-nav-toggle.open .chev { transform: rotate(90deg); color: var(--pencil); }
.me-nav-acc {
  text-align: left; margin: 4px 0 10px; padding: 14px;
  border-radius: var(--radius-lg); background: var(--paper-2); border: 1px solid var(--line);
  animation: accIn .22s var(--ease);
}
@keyframes accIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.me-nav-acc .acc-sum { display: flex; align-items: center; gap: 10px; }
.me-nav-acc .acc-stats { display: flex; gap: 8px; margin-top: 12px; }
.me-nav-acc .acc-stats > div { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 4px; text-align: center; }
.me-nav-acc .acc-stats b { display: block; font-size: 16px; line-height: 1.3; }
.me-nav-acc .acc-stats span { font-size: 9px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-nav-acc .acc-tabs { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 10px; }
.me-nav-acc .seg { padding: 2px; }
.me-nav-acc .seg button { padding: 5px 12px; font-size: 11px; }
.me-nav-acc .acc-tip { display: none; white-space: nowrap; }
.me-nav-acc .medal-wall { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.me-nav-acc .medal-card { padding: 10px 6px; border-radius: var(--radius); }
.me-nav-acc .medal-card:hover { transform: translateY(-1px); }
.me-nav-acc .medal { width: 44px; height: 44px; font-size: 16px; margin-bottom: 6px; }
.me-nav-acc .medal::before { inset: 12%; border-width: 1px; }
.me-nav-acc .medal-card .mc-name { font-size: 10.5px; }
.me-nav-acc .medal-card .mc-cond { display: none; }
.me-nav-acc .medal-card .mc-progress { margin-top: 6px; }
.me-nav-acc .medal-card .mc-progress .bar { height: 3px; }
.me-nav-acc .medal-card .mc-progress span { font-size: 8.5px; }
.me-nav-acc .medal-card .mc-date { font-size: 8.5px; margin-top: 5px; }
.me-nav-acc .cert-grid { grid-template-columns: 1fr; gap: 12px; }
.me-nav-acc .acc-note { background: var(--rose-soft); border-radius: var(--radius); padding: 9px 11px; font-size: 10.5px; color: var(--ink-2); line-height: 1.6; }
.me-nav-acc .acc-foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; }
.me-nav-acc .acc-foot a { color: var(--pencil); font-weight: 600; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .sr-name { font-size: 13px; font-weight: 600; }
.setting-row .sr-desc { font-size: 11px; color: var(--muted); margin-top: 1px; }
.bind-hero { text-align: center; padding: 30px; }
.bind-input { display: flex; gap: 8px; max-width: 380px; margin: 16px auto 0; }
.bind-input input { text-align: center; letter-spacing: .28em; font-size: 20px; font-weight: 700; text-transform: uppercase; }

/* 编辑孩子：头像 + 昵称概览，下面是四个字段 */
.ce-head { display: flex; align-items: center; gap: 12px; }
.ce-head .avatar { margin: 0; }
.ce-head .tag { flex: none; }
.ce-head #ceMeta { line-height: 1.5; }
.field > .seg { align-self: flex-start; }

/* ---------------- responsive ---------------- */
/* ---------------- 自动听写 ---------------- */
.dict-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  padding: 22px 22px 22px 25px; border-radius: var(--radius-xl);
  background: linear-gradient(125deg, #123f33, #0a3f32 70%, #092e25);
  color: #eef5f0; box-shadow: var(--shadow-lg);
}
.dict-hero::before {
  content: ""; position: absolute; right: 17%; top: -170px; width: 360px; height: 360px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 54px rgba(255,255,255,.025); pointer-events: none;
}
.dict-hero > * { position: relative; z-index: 1; }
.dict-hero .eyebrow { color: rgba(238,245,240,.55); }
.dict-hero h1 { font-size: clamp(26px, 3vw, 36px); line-height: 1.3; margin-top: 8px; color: #f2f8f4; }
.dict-hero p { max-width: 540px; margin-top: 10px; font-size: 12.5px; line-height: 1.75; color: rgba(238,245,240,.62); }
.dict-hero-side { display: flex; align-items: stretch; justify-content: flex-end; gap: 10px; }
.dict-stat {
  min-width: 96px; flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 14px 16px; text-align: center; border-radius: 15px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
}
.dict-stat b { font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dict-stat span { margin-top: 4px; font-size: 10.5px; color: rgba(238,245,240,.55); }
.dict-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: var(--gap); align-items: start; }
.dict-grid > aside { display: flex; flex-direction: column; }
.dict-player-card { order: -1; }
.dict-input-card { min-height: 0; }
.dict-input-card { display: flex; flex-direction: column; min-height: 390px; }
.dict-input-card .panel-head { margin-bottom: 12px; }
.dict-lang-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.dict-lang-label { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.dict-lang button { padding: 6px 12px; }
.dict-lang button:disabled { opacity: .45; cursor: not-allowed; }
/* 拍照提取提示 + 粘贴按钮 */
.dict-paste-tip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--paper-2); border: 1px dashed var(--line-strong); }
.dict-paste-tip .dpt-text { flex: 1; min-width: 200px; font-size: 11.5px; color: var(--ink-2); line-height: 1.55; }
.dict-paste-tip .dpt-text b { color: var(--ink); }
.dict-textarea {
  min-height: 250px; resize: vertical; padding: 14px 16px;
  font-family: var(--font-en); font-size: 16px; line-height: 1.9; letter-spacing: .01em;
}
.dictation-page[data-lang="zh"] .dict-textarea,
.dictation-page[data-lang="zh"] .dict-current,
.dictation-page[data-lang="zh"] .dict-result-item b { font-family: var(--font-sans); }
.dict-input-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.dict-preview {
  display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
  max-height: 148px; overflow: auto; margin-top: 12px; padding: 2px;
}
.dict-chip { height: 26px; padding: 0 10px; font-size: 11.5px; }
.dict-chip.more { color: var(--pine); background: var(--pine-soft); border-color: transparent; }
.dict-cover { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 38px 20px; }
.dict-cover[hidden] { display: none; }
.dict-cover-icon {
  width: 60px; height: 60px; margin-bottom: 14px; display: grid; place-items: center;
  border-radius: var(--radius-lg); color: var(--pine); background: var(--pine-soft);
}
.dict-cover h3 { font-size: 20px; font-weight: 700; }
.dict-cover p { max-width: 380px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.dict-cover-tip {
  max-width: 390px; margin: 18px auto 0; padding: 10px 13px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
  font-size: 11px; line-height: 1.6; color: var(--muted);
}
.dict-setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.dict-setting b { display: block; font-size: 12.5px; font-weight: 700; }
.dict-setting small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.dict-setting + .dict-setting { padding-top: 14px; }
.dict-num { display: flex; align-items: center; gap: 6px; flex: none; }
.dict-num .input { width: 78px; height: 40px; padding: 0 6px; text-align: center; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dict-num em { font-style: normal; font-size: 11px; color: var(--muted); }
.dict-hint { margin-top: 10px; font-size: 10.5px; line-height: 1.6; color: var(--muted); }
.dict-hint + .dict-hint { margin-top: 5px; }
.dict-hint.warn { color: var(--rose); }
.dict-player { padding: 4px 0 0; text-align: center; }
.dict-play {
  width: 78px; height: 78px; margin: 0 auto 12px; display: grid; place-items: center;
  border-radius: 50%; background: var(--pine); color: #fff;
  box-shadow: 0 12px 28px -12px rgba(22,36,31,.5);
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
.dict-play:hover { transform: translateY(-1px); }
.dict-play svg { fill: currentColor; }
.dict-play:disabled { background: var(--line-strong); color: #fff; box-shadow: none; cursor: not-allowed; transform: none; }
.dict-play.playing { animation: dictPulse 1.9s ease-in-out infinite; }
@keyframes dictPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 92, 72, .22), 0 10px 24px -12px rgba(10,63,50,.4); }
  50% { box-shadow: 0 0 0 13px rgba(15, 92, 72, 0), 0 10px 24px -12px rgba(10,63,50,.4); }
}
.dict-status { font-size: 14px; font-weight: 700; }
.dict-progress-text { margin-top: 3px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dict-player .bar { margin-top: 12px; }
.dict-reveal { align-items: center; justify-content: center; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.dict-reveal input { margin-top: 0; }
.dict-current {
  margin-top: 12px; padding: 11px 12px; border-radius: var(--radius);
  background: var(--pine-mist); color: var(--pine-deep);
  font-family: var(--font-en); font-size: 24px; font-weight: 700; letter-spacing: .02em;
}
.dict-current[hidden] { display: none; }
.dict-result-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dict-result-item {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
}
.dict-result-item span { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dict-result-item b { font-family: var(--font-en); font-size: 13.5px; font-weight: 600; }

@media (max-width: 720px) {
  .dict-hero { padding: 22px 22px 22px 25px; }
  .dict-hero h1 { font-size: 27px; }
  .dict-hero-side { max-width: none; }
  .dict-stat { padding: 12px; }
  .dict-stat b { font-size: 24px; }
  .dict-textarea { min-height: 190px; font-size: 15px; }
  .dict-cover { min-height: 240px; padding: 26px 8px; }
  .dict-result-item { font-size: 12px; }
}

@media (max-width: 720px) {
  .p-top-in { width: calc(100% - 24px); height: 60px; gap: 10px; }
  .brand-sub { display: none; }
  .brand-name { font-size: 17px; }
  .brand-mark { width: 34px; height: 34px; border-radius: var(--radius); }
  .child-pick .cp-name { font-size: 11.5px; }
  .child-pick .cp-meta { display: none; }
  .child-pick { padding-right: 6px; }
  .greet { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hero { padding: 22px 22px 22px 25px; }
  .hero h1 { font-size: 27px; }
  .hero-task { padding: 18px; }
  .hero-task h2 { font-size: 19px; }
  .stat-cell { padding: 12px 14px; }
  .stat-cell .sc-val { font-size: 18px; }
  .stat-ic { width: 30px; height: 30px; border-radius: var(--radius); }
  .series-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .series-banner { grid-template-columns: 1fr; }
  .series-banner .sb-cover { height: 200px; }
  .cert-grid { grid-template-columns: 1fr; }
  .medal-wall { grid-template-columns: repeat(2, 1fr); }
  .me-nav-acc .medal-wall { grid-template-columns: repeat(3, 1fr); }
  .me-nav-acc .acc-stats span { font-size: 8.5px; }
  .cal-day { min-height: 62px; padding: 5px; border-radius: var(--radius); }
  .cal-day .cd-tasks { display: none; }
  .cal-day .cd-min { font-size: 8.5px; }
  .cal-week, .cal { gap: 3px; }
  .page { width: calc(100% - 26px); }
  .flow-wrap { width: calc(100% - 26px); }
  .quiz-card { padding: 22px 20px; }
  .quiz-q { font-size: 20px; }
  .opt { padding: 12px; font-size: 15px; }
  .result-hero { grid-template-columns: 1fr; padding: 24px; gap: 16px; }
  .result-hero .score-ring { justify-self: center; }
  .story-map { grid-template-columns: 1fr 1fr; }
  .submit-grid { gap: 16px; }
  .task-hero { padding: 20px; }
  .sq-card { padding: 16px; }
  .sq-media { grid-template-columns: repeat(2, 1fr); }
  .flow-top .flow-progress .bar { width: 70px; }
  .cal-day .cd-num.today { margin: 0; }
  .img-grid, .text-grid { gap: 8px; }
  .img-opt { font-size: 32px; }
  .text-opt { padding: 13px; font-size: 13px; }
  .series-card .sc-cover { height: 132px; }
  .series-card .sc-title { font-size: 14px; }
  .vol-row { grid-template-columns: 28px minmax(0,1fr); }
  .vol-actions { grid-column: 2; margin-top: 6px; }
}

/* ------------------------------------------------------------
   营期权限：未开通时导航「打卡」的锁定态
   ------------------------------------------------------------ */
.p-nav a.is-locked { opacity: .55; }
.p-nav a.is-locked::after {
  content: "未开通";
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--apricot-soft);
  color: var(--apricot-deep);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: 1px;
  white-space: nowrap;
}
.bottom-nav a.is-locked { opacity: .5; }

/* ------------------------------------------------------------
   登录页（退出登录 / 注销账号后）
   ------------------------------------------------------------ */
.parent-body.guest-mode .p-top,
.parent-body.guest-mode .site-foot,
.parent-body.guest-mode .bottom-nav { display: none; }
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center;
  padding: 48px 18px;
  background:
    radial-gradient(1200px 520px at 12% -10%, rgba(15,92,72,.10), transparent 60%),
    radial-gradient(900px 420px at 92% 8%, rgba(221,143,63,.10), transparent 62%);
}
.auth-card { width: min(436px, 100%); }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.auth-card h1 { letter-spacing: -.02em; }
.auth-card .field { margin-bottom: 0; }
.auth-card #authSend { min-width: 104px; }
@media (max-width: 520px) {
  .auth-wrap { padding: 28px 14px; align-items: start; }
  .auth-card { padding: 22px 18px; }
}

/* ============================================================
   宽屏逐级增强：手机是基准，这里只做加法
   ============================================================ */
@media (min-width: 560px) {
  .medal-wall { grid-template-columns: repeat(3, 1fr); }
  .me-nav-acc .medal-wall { grid-template-columns: repeat(4, 1fr); }
  .story-map { grid-template-columns: repeat(4, 1fr); }
  .sq-media { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) {
  .series-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cert-grid { grid-template-columns: 1fr 1fr; }
  .greet { flex-direction: row; align-items: flex-end; gap: 18px; margin-bottom: 18px; }
}
@media (min-width: 760px) {
  .task-hero { padding: 26px; }
  .sq-card { padding: 20px 22px; }
  .cal-day { min-height: 88px; padding: 7px 7px 6px; gap: 3px; }
  .cal-day .cd-tasks { display: flex; }
  .cal-week, .cal { gap: 5px; }
  .cal-day .cd-min { font-size: 9.5px; }
  .vol-row { grid-template-columns: 34px minmax(0,1fr) auto; gap: 14px; }
  .vol-actions { grid-column: auto; margin-top: 0; }
  .quiz-card { padding: 30px 34px; }
  .quiz-q { font-size: clamp(21px, 2.6vw, 27px); }
  .opt { padding: 14px 16px; font-size: 16px; }
}
@media (min-width: 900px) {
  .p-nav { display: flex; }
  .site-foot { display: block; }
  .bottom-nav { display: none; }
  .p-top-in { width: min(1180px, calc(100% - var(--gutter) * 2)); gap: 26px; }
  .hero { grid-template-columns: 1.1fr .9fr; gap: 22px; padding: 30px 30px 30px 33px; }
  .stat-strip { grid-template-columns: repeat(4, 1fr); }
  .stat-cell:nth-child(2) { border-right: 1px solid var(--line); }
  .stat-cell:nth-child(-n+2) { border-bottom: 0; }
  .dict-hero { grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; padding: 26px 28px; }
  .series-banner { grid-template-columns: 210px minmax(0,1fr); gap: 24px; }
  .series-banner .sb-cover { height: 260px; }
  .result-hero { grid-template-columns: 210px minmax(0,1fr); gap: 28px; padding: 30px 34px; }
  .result-hero .score-ring { justify-self: auto; }
}
@media (min-width: 1000px) {
  .dash { grid-template-columns: 1.35fr .9fr; gap: 18px; margin-top: 18px; }
  .submit-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; }
  .hist-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
  .sq-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
  .me-grid { grid-template-columns: 300px minmax(0,1fr); gap: 20px; }
  .dict-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; margin-top: 18px; }
  .dict-grid > aside { display: block; }
  .dict-player-card { order: 0; }
  .dict-input-card { min-height: 390px; }
  .side-sticky { position: sticky; top: calc(var(--nav-h) + 20px); }
  .sq-side { position: sticky; top: calc(var(--nav-h) + 20px); }
  .day-detail { position: sticky; top: calc(var(--nav-h) + 20px); }
}
@media (min-width: 1040px) {
  .series-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .medal-wall { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   交互：手机上把主操作固定在拇指区
   ============================================================ */
@media (max-width: 999px) {
  .submit-cta {
    position: fixed; left: var(--gutter); right: var(--gutter); z-index: 78;
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 10px);
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 10px 12px;
    box-shadow: 0 14px 34px -20px rgba(22, 36, 31, .55);
  }
  .submit-cta .btn { width: 100%; margin-top: 0; }
  .submit-cta .hint { display: none; }
  /* 给常驻操作条留出空间，最后一张卡不会被压住 */
  .page.has-submit-cta { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 132px); }
}
/* 禁用态也看得清：手机上按钮不靠 hover 传达状态 */
@media (hover: none), (pointer: coarse) {
  .submit-cta .btn:active { transform: scale(.985); }
}