/* 绘本阅读 · 高保真原型
 * 组件改编自 Uiverse.io（MIT）：按压按钮 PriyanshuGupta28 · 圆形大按钮 catraco · 3D 翻页箭头 Z4drus ·
 * 翻书加载 vinodjangid07 · 分段选择 Yaya12085 · 日夜开关 Galahhad · 圆形勾选 Praashoo7 ·
 * 星级评分 ForzDz · 成就通知 Yaya12085 · 圆点纹理 BadlyWrittenStylesheet
 * 贴纸：Microsoft Fluent Emoji 3D（MIT）；字体：Fredoka / Andika（OFL）
 */
@font-face { font-family: "Fredoka"; font-weight: 400; font-display: swap; src: url(vendor/fonts/fredoka-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url(vendor/fonts/fredoka-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url(vendor/fonts/fredoka-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url(vendor/fonts/fredoka-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Andika"; font-weight: 400; font-display: swap; src: url(vendor/fonts/andika-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Andika"; font-weight: 700; font-display: swap; src: url(vendor/fonts/andika-latin-700-normal.woff2) format("woff2"); }

:root {
  --paper: #fff7ec;
  --paper-2: #fdeeda;
  --card: #ffffff;
  --line: #f1e4d1;
  --ink: #2b2452;
  --ink-2: #625b87;
  --ink-3: #a39dbf;
  --brand: #ff7a45;
  --brand-d: #d9582a;
  --brand-l: #ffe7dc;
  --sun: #ffc53d;
  --sun-d: #d99a12;
  --sun-l: #fff3cf;
  --sky: #3d8bff;
  --sky-d: #2463d1;
  --sky-l: #e3eeff;
  --mint: #22b573;
  --mint-d: #158a55;
  --mint-l: #dcf6ea;
  --grape: #7c5cff;
  --grape-d: #5a3ddc;
  --grape-l: #ece7ff;
  --berry: #ff4f7b;
  --berry-d: #d4325c;
  --c-cons: #2f6bff;
  --c-vowel: #ff4d6d;
  --c-team: #c026d3;
  --radius: 24px;
  --shadow-sm: 0 1px 0 rgba(43, 36, 82, .04), 0 4px 14px -6px rgba(43, 36, 82, .16);
  --shadow: 0 1px 0 rgba(43, 36, 82, .04), 0 14px 34px -14px rgba(43, 36, 82, .26);
  --shadow-lg: 0 30px 60px -24px rgba(43, 36, 82, .45);
  --font-ui: "Fredoka", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-read: "Andika", "Fredoka", "PingFang SC", system-ui, sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
/* 图片不吃触摸事件：微信 / 安卓浏览器长按图片会弹「转发 / 保存图片」菜单，
   家长锁要长按 1.5 秒，书页也会被孩子长按 —— 让触摸落到外层按钮 / 页面上 */
img { max-width: 100%; -webkit-touch-callout: none; pointer-events: none; }
[v-cloak] { display: none; }

/* 圆点纹理（Uiverse · BadlyWrittenStylesheet 改） */
.dots {
  --dot: rgba(43, 36, 82, .07);
  --size: 26px;
  background-image: radial-gradient(var(--dot) 9%, #0000 10%), radial-gradient(var(--dot) 9%, #0000 10%);
  background-position: 0 0, calc(var(--size) / 2) calc(var(--size) / 2);
  background-size: var(--size) var(--size);
}

.emoji { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em; object-fit: contain; }
.page-wrap { min-height: 100%; padding: 18px clamp(16px, 3vw, 36px) 120px; max-width: 1180px; margin: 0 auto; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--paper-2); color: var(--ink-2); white-space: nowrap;
}
.tag.solid { color: #fff; }

/* ------------------------------------------------------------------ 按压按钮（Uiverse · PriyanshuGupta28 改） */
.push {
  --c: var(--brand); --e: var(--brand-d); --r: 18px;
  position: relative; border: 0; padding: 0; background: transparent; cursor: pointer;
  outline-offset: 4px; transition: filter .25s; user-select: none;
}
.push .p-shadow {
  position: absolute; inset: 0; border-radius: var(--r);
  background: rgba(43, 36, 82, .28); filter: blur(2px);
  transform: translateY(3px); transition: transform .6s cubic-bezier(.3, .7, .4, 1);
}
.push .p-edge { position: absolute; inset: 0; border-radius: var(--r); background: var(--e); }
.push .p-front {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .45em;
  border-radius: var(--r); background: var(--c); color: #fff;
  padding: .78em 1.5em; font-weight: 600; font-size: 1.05rem; letter-spacing: .3px; white-space: nowrap;
  transform: translateY(-5px); transition: transform .6s cubic-bezier(.3, .7, .4, 1);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
}
.push:hover { filter: brightness(1.05); }
.push:hover .p-front { transform: translateY(-7px); transition: transform .25s cubic-bezier(.3, .7, .4, 1.5); }
.push:active .p-front { transform: translateY(-2px); transition: transform 34ms; }
.push:hover .p-shadow { transform: translateY(5px); transition: transform .25s cubic-bezier(.3, .7, .4, 1.5); }
.push:active .p-shadow { transform: translateY(1px); transition: transform 34ms; }
.push:focus:not(:focus-visible) { outline: none; }
.push.big .p-front { font-size: 1.25rem; padding: .85em 1.8em; }
.push.small .p-front { font-size: .95rem; padding: .55em 1.05em; }
.push.white { --c: #fff; --e: #e3d8c6; }
.push.white .p-front { color: var(--ink); }
.push.sky { --c: var(--sky); --e: var(--sky-d); }
.push.mint { --c: var(--mint); --e: var(--mint-d); }
.push.grape { --c: var(--grape); --e: var(--grape-d); }
.push.sun { --c: var(--sun); --e: var(--sun-d); }
.push.sun .p-front { color: #5a3d00; }
.push.berry { --c: var(--berry); --e: var(--berry-d); }
.push:disabled { filter: grayscale(.6) opacity(.6); cursor: default; }

/* ------------------------------------------------------------------ 圆形大按钮（Uiverse · catraco 改） */
.bigplay {
  --primary: 255, 122, 69; --secondary: 175, 66, 30;
  width: 74px; height: 68px; border: none; cursor: pointer; user-select: none; margin-bottom: 6px;
  touch-action: manipulation; border-radius: 100%; position: relative; background: transparent;
  outline: 9px solid rgba(var(--primary), .22); transition: outline-color .3s;
}
.bigplay .back { position: absolute; inset: 0; border-radius: 100%; background: rgb(var(--secondary)); }
.bigplay .front {
  position: absolute; inset: 0; border-radius: 100%;
  background: linear-gradient(0deg, rgba(var(--primary), .75) 20%, rgb(var(--primary)) 50%);
  box-shadow: 0 .5em 1em -.2em rgba(var(--secondary), .5);
  border: 1px solid rgb(var(--secondary));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px; transform: translateY(-14%); transition: .15s;
}
.bigplay:active .front { transform: translateY(0); box-shadow: none; }
.bigplay.playing { outline-color: rgba(var(--primary), .45); animation: ring 1.4s ease-out infinite; }
@keyframes ring { 0% { outline-width: 6px; } 50% { outline-width: 13px; } 100% { outline-width: 6px; } }

/* ------------------------------------------------------------------ 3D 圆角图标按钮（Uiverse · Z4drus 改） */
.b3d {
  appearance: none; position: relative; border: 0; background: transparent; padding: 0;
  width: 58px; height: 58px; border-radius: 20px; cursor: pointer;
}
.b3d .top {
  position: relative; z-index: 2; height: calc(100% - 6px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px; color: #fff; font-size: 24px; font-weight: 700;
  background-image: linear-gradient(145deg, #8f73ff, #4f8dff);
  text-shadow: 0 -1px rgba(0, 0, 0, .25); transition: transform .25s, border-radius .25s;
}
.b3d .bottom {
  position: absolute; z-index: 1; left: 3px; right: 3px; bottom: 0; top: 6px; border-radius: 20px;
  background-image: linear-gradient(145deg, #4f8dff, #5a3ddc); box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}
.b3d:active .top { transform: translateY(4px); border-radius: 12px 12px 10px 10px / 10px; }
.b3d:disabled { opacity: .35; cursor: default; }
.b3d.light .top { background-image: linear-gradient(145deg, #ffffff, #f3ecff); color: var(--grape-d); text-shadow: none; }
.b3d.light .bottom { background-image: linear-gradient(145deg, #d9cff7, #bfb2ee); }

/* ------------------------------------------------------------------ 翻书加载（Uiverse · vinodjangid07 改） */
.loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; height: 60vh; color: var(--ink-2); }
.loader .book-wrapper { width: 130px; display: flex; align-items: center; justify-content: flex-end; position: relative; }
.loader .book { width: 100%; height: auto; filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, .14)); }
.loader .book-page { width: 50%; height: auto; position: absolute; animation: paging .5s linear infinite; transform-origin: left; }
@keyframes paging {
  0% { transform: rotateY(0deg) skewY(0deg); }
  50% { transform: rotateY(90deg) skewY(-20deg); }
  100% { transform: rotateY(180deg) skewY(0deg); }
}

/* ------------------------------------------------------------------ 分段选择（Uiverse · Yaya12085 改，加滑块） */
.seg {
  position: relative; display: inline-flex; padding: 4px; border-radius: 16px;
  background: rgba(43, 36, 82, .07); box-shadow: inset 0 1px 2px rgba(43, 36, 82, .08);
}
.seg label { position: relative; z-index: 1; cursor: pointer; }
.seg input { display: none; }
.seg span {
  display: flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .2s; white-space: nowrap;
}
.seg input:checked + span { color: var(--ink); font-weight: 600; }
.seg .glider {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; border-radius: 12px; background: #fff;
  box-shadow: 0 2px 6px rgba(43, 36, 82, .16); transition: left .3s var(--spring), width .3s var(--spring);
}

/* ------------------------------------------------------------------ 日夜开关（Uiverse · Galahhad 原样，改作「睡前模式」） */
.theme-switch {
  --toggle-size: 13px; --container-width: 5.625em; --container-height: 2.5em; --container-radius: 6.25em;
  --container-light-bg: #3d7eae; --container-night-bg: #1d1f2c; --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em; --sun-bg: #ecca2f; --moon-bg: #c4c9d1; --spot-color: #959db1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff; --clouds-color: #f3fdff; --back-clouds-color: #aacadf;
  --transition: .5s cubic-bezier(0, -.02, .4, 1.25); --circle-transition: .3s cubic-bezier(0, -.02, .35, 1.17);
}
.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after { box-sizing: border-box; margin: 0; padding: 0; font-size: var(--toggle-size); }
.theme-switch__container {
  width: var(--container-width); height: var(--container-height); background-color: var(--container-light-bg);
  border-radius: var(--container-radius); overflow: hidden; cursor: pointer; position: relative; transition: var(--transition);
  box-shadow: 0 -.062em .062em rgba(0, 0, 0, .25), 0 .062em .125em rgba(255, 255, 255, .94);
}
.theme-switch__container::before {
  content: ""; position: absolute; z-index: 1; inset: 0; border-radius: var(--container-radius);
  box-shadow: 0 .05em .187em rgba(0, 0, 0, .25) inset, 0 .05em .187em rgba(0, 0, 0, .25) inset;
}
.theme-switch__checkbox { display: none; }
.theme-switch__circle-container {
  width: var(--circle-container-diameter); height: var(--circle-container-diameter); background-color: rgba(255, 255, 255, .1);
  position: absolute; left: var(--circle-container-offset); top: var(--circle-container-offset); border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, .1), inset 0 0 0 3.375em rgba(255, 255, 255, .1), 0 0 0 .625em rgba(255, 255, 255, .1), 0 0 0 1.25em rgba(255, 255, 255, .1);
  display: flex; transition: var(--circle-transition); pointer-events: none;
}
.theme-switch__sun-moon-container {
  pointer-events: auto; position: relative; z-index: 2; width: var(--sun-moon-diameter); height: var(--sun-moon-diameter);
  margin: auto; border-radius: var(--container-radius); background-color: var(--sun-bg); overflow: hidden; transition: var(--transition);
  box-shadow: .062em .062em .062em 0 rgba(254, 255, 239, .61) inset, 0 -.062em .062em 0 #a1872a inset;
  filter: drop-shadow(.062em .125em .125em rgba(0, 0, 0, .25)) drop-shadow(0 .062em .125em rgba(0, 0, 0, .25));
}
.theme-switch__moon {
  transform: translateX(100%); width: 100%; height: 100%; background-color: var(--moon-bg); border-radius: inherit;
  box-shadow: .062em .062em .062em 0 rgba(254, 255, 239, .61) inset, 0 -.062em .062em 0 #969696 inset; transition: var(--transition); position: relative;
}
.theme-switch__spot { position: absolute; top: .75em; left: .312em; width: .75em; height: .75em; border-radius: var(--container-radius); background-color: var(--spot-color); box-shadow: 0 .0312em .062em rgba(0, 0, 0, .25) inset; }
.theme-switch__spot:nth-of-type(2) { width: .375em; height: .375em; top: .937em; left: 1.375em; }
.theme-switch__spot:nth-last-of-type(3) { width: .25em; height: .25em; top: .312em; left: .812em; }
.theme-switch__clouds {
  width: 1.25em; height: 1.25em; background-color: var(--clouds-color); border-radius: var(--container-radius);
  position: absolute; bottom: -.625em; left: .312em; transition: .5s cubic-bezier(0, -.02, .4, 1.25);
  box-shadow: .937em .312em var(--clouds-color), -.312em -.312em var(--back-clouds-color), 1.437em .375em var(--clouds-color), .5em -.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -.062em var(--back-clouds-color), 2.937em .312em var(--clouds-color), 2em -.312em var(--back-clouds-color), 3.625em -.062em var(--clouds-color), 2.625em 0 var(--back-clouds-color), 4.5em -.312em var(--clouds-color), 3.375em -.437em var(--back-clouds-color), 4.625em -1.75em 0 .437em var(--clouds-color), 4em -.625em var(--back-clouds-color), 4.125em -2.125em 0 .437em var(--back-clouds-color);
}
.theme-switch__stars-container { position: absolute; color: var(--stars-color); top: -100%; left: .312em; width: 2.75em; height: auto; transition: var(--transition); }
.theme-switch__checkbox:checked + .theme-switch__container { background-color: var(--container-night-bg); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container { left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter)); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon { transform: translate(0); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds { bottom: -4.062em; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container { top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------------ 普通开关 */
.switch { position: relative; display: inline-block; width: 50px; height: 30px; flex: none; }
.switch input { display: none; }
.switch i {
  position: absolute; inset: 0; border-radius: 99px; background: #e4dcf0; transition: .3s; cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(43, 36, 82, .15);
}
.switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(43, 36, 82, .3); transition: .3s var(--spring);
}
.switch input:checked + i { background: var(--mint); }
.switch input:checked + i::after { transform: translateX(20px); }

/* ------------------------------------------------------------------ 圆形勾选（Uiverse · Praashoo7 改） */
.chk { display: block; position: relative; cursor: pointer; font-size: 15px; user-select: none; flex: none; }
.chk input { position: absolute; opacity: 0; height: 0; width: 0; }
.chk .mark { position: relative; height: 2em; width: 2em; background-color: #e6dff0; border-radius: 50%; transition: .4s; }
.chk .mark:hover { box-shadow: inset 8px 8px 10px #cfc6de, inset -8px -8px 10px #ffffff; }
.chk input:checked ~ .mark { background-color: var(--mint); transform: rotateX(360deg); box-shadow: 0 3px 8px rgba(34, 181, 115, .4); }
.chk .mark::after {
  content: ""; position: absolute; display: none; left: .74em; top: .5em; width: .42em; height: .78em;
  border: solid #fff; border-width: 0 .17em .17em 0; transform: rotate(45deg);
}
.chk input:checked ~ .mark::after { display: block; }

/* ------------------------------------------------------------------ 星级评分（Uiverse · ForzDz 改） */
.stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.stars input { display: none; }
.stars label { cursor: pointer; color: #e1d9ea; transition: color .3s, transform .3s; }
.stars label::before { content: "\2605"; font-size: 40px; line-height: 1; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label {
  color: #ffc300; transform: scale(1.15); animation: bounce .5s ease-in-out alternate;
}
@keyframes bounce { to { transform: scale(1.28); } }

/* ------------------------------------------------------------------ 成就通知（Uiverse · Yaya12085 改） */
.notice {
  display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 10px 12px;
  box-shadow: 0 24px 44px -18px rgba(43, 36, 82, .35); animation: noticeIn .7s var(--spring) both;
}
.notice .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--grape-l); display: grid; place-items: center; flex: none; }
.notice .ic img { width: 36px; height: 36px; }
.notice .t { font-weight: 700; font-size: 16px; }
.notice .d { font-size: 13px; color: var(--ink-2); }
.notice .lv { display: inline-flex; margin-top: 3px; align-items: center; gap: 3px; background: var(--grape); color: #fff; border-radius: 99px; padding: 1px 9px; font-size: 12px; font-weight: 600; }
@keyframes noticeIn { from { transform: translateY(20px) scale(.92); opacity: 0; } }

/* ------------------------------------------------------------------ Toast */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: rgba(43, 36, 82, .92); color: #fff; font-size: 15px; box-shadow: var(--shadow);
  animation: toastIn .45s var(--spring) both;
}
.toast img { width: 24px; height: 24px; }
@keyframes toastIn { from { transform: translateY(16px) scale(.9); opacity: 0; } }

/* ------------------------------------------------------------------ 飞星 */
.flystar { position: fixed; z-index: 300; width: 44px; height: 44px; pointer-events: none; transition: transform .8s cubic-bezier(.5, -.3, .7, .6), opacity .8s; }

/* ------------------------------------------------------------------ 底部导航 */
.tabbar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50;
  width: max-content;   /* left:50% 时自动宽度只按半屏算，手机上会把图标挤扁 */
  display: flex; gap: 4px; padding: 7px; border-radius: 26px; background: rgba(43, 36, 82, .94);
  box-shadow: 0 18px 40px -16px rgba(43, 36, 82, .6); backdrop-filter: blur(10px);
}
.tabbar button {
  position: relative; border: 0; background: transparent; color: rgba(255, 255, 255, .62); cursor: pointer;
  display: flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 19px; font-size: 15px; font-weight: 500;
  transition: background .3s, color .3s;
}
.tabbar button img { flex: none; width: 26px; height: 26px; filter: grayscale(.7) opacity(.8); transition: .3s var(--spring); }
.tabbar button.on { background: rgba(255, 255, 255, .14); color: #fff; }
.tabbar button.on img { filter: none; transform: scale(1.15) rotate(-6deg); }
.tabbar .badge { position: absolute; top: 3px; left: 30px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--berry); color: #fff; font-size: 11px; display: grid; place-items: center; font-weight: 700; }
@media (max-width: 560px) { .tabbar button span.lbl { display: none; } .tabbar button { padding: 9px 14px; } }

/* ------------------------------------------------------------------ 谁在读 */
.who { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 24px; text-align: center; position: relative; overflow: hidden; }
.who h1 { font-size: clamp(30px, 5vw, 46px); margin: 0; font-weight: 600; }
.who .sub { color: var(--ink-2); margin-top: 8px; font-size: 17px; }
.who .kids { display: flex; gap: clamp(18px, 4vw, 48px); flex-wrap: wrap; justify-content: center; }
.kid { border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: transform .35s var(--spring); }
.kid:hover { transform: translateY(-6px) rotate(-2deg); }
.kid:active { transform: scale(.94); }
.kid .av {
  width: clamp(120px, 18vw, 170px); height: clamp(120px, 18vw, 170px); border-radius: 50%;
  display: grid; place-items: center; box-shadow: var(--shadow), inset 0 -8px 0 rgba(0, 0, 0, .08); border: 6px solid #fff;
}
.kid .av img { width: 66%; height: 66%; }
.kid b { font-size: 24px; font-weight: 600; }
.kid small { color: var(--ink-2); font-size: 14px; }
.parent-pill { position: absolute; right: 20px; bottom: 20px; transition: opacity .25s; }
.blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; pointer-events: none; }
.floaty { position: absolute; width: 64px; animation: floaty 6s ease-in-out infinite; pointer-events: none; }
@keyframes floaty { 50% { transform: translateY(-14px) rotate(6deg); } }

/* ------------------------------------------------------------------ 首页 */
.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.topbar .av { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 4px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; flex: none; }
.topbar .av img { width: 70%; }
.topbar h2 { margin: 0; font-size: 24px; font-weight: 600; }
.topbar p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 6px 13px 6px 8px; font-weight: 600; font-size: 17px; box-shadow: var(--shadow-sm); }
.pill img { width: 26px; height: 26px; }

.hero {
  position: relative; display: grid; grid-template-columns: minmax(170px, 250px) 1fr; gap: clamp(18px, 3vw, 38px); align-items: center;
  padding: clamp(20px, 3vw, 34px); border-radius: 32px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #ff9d6c 0%, #ff7a45 40%, #f2563a 100%);
  box-shadow: 0 30px 60px -30px rgba(242, 86, 58, .7);
}
.hero::before { content: ""; position: absolute; inset: 0; --dot: rgba(255, 255, 255, .13); --size: 22px; background-image: radial-gradient(var(--dot) 9%, #0000 10%), radial-gradient(var(--dot) 9%, #0000 10%); background-position: 0 0, 11px 11px; background-size: 22px 22px; }
.hero > * { position: relative; }
.cover3d { perspective: 900px; }
.cover3d img {
  display: block; width: 100%; border-radius: 6px 14px 14px 6px; transform: rotateY(-14deg) rotateX(4deg);
  box-shadow: -2px 0 0 rgba(0, 0, 0, .18), 18px 24px 40px -12px rgba(60, 10, 0, .55); transition: transform .6s var(--spring);
}
.cover3d:hover img { transform: rotateY(-4deg) rotateX(2deg) scale(1.03); }
.hero .kicker { display: inline-flex; gap: 6px; align-items: center; background: rgba(255, 255, 255, .2); border-radius: 99px; padding: 4px 12px; font-size: 14px; font-weight: 500; }
.hero h1 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; margin: 12px 0 4px; font-weight: 600; letter-spacing: -.5px; }
.hero .zh { font-size: 18px; opacity: .9; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.hero .meta span { background: rgba(255, 255, 255, .18); border-radius: 10px; padding: 4px 10px; font-size: 14px; }
.progress { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #fff6c9, #ffd452); box-shadow: 0 0 12px rgba(255, 220, 80, .7); transition: width .8s var(--ease); }
.hero .ptxt { font-size: 14px; margin: 8px 0 20px; opacity: .92; }
.hero > .stickers { position: absolute; inset: 0; pointer-events: none; }
.hero .stickers img { position: absolute; width: 70px; opacity: .95; animation: floaty 7s ease-in-out infinite; }
@media (max-width: 640px) { .hero { grid-template-columns: 1fr; text-align: left; } .hero .cover3d { width: 56%; margin: 0 auto; } }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-top: 22px; }
.card { background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.card h3 { margin: 0; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card .sub { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.card.click { cursor: pointer; transition: transform .35s var(--spring), box-shadow .35s; }
.card.click:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stack { position: relative; height: 120px; margin: 16px 0 6px; }
.stack .mini {
  position: absolute; top: 0; width: 112px; height: 112px; border-radius: 20px; background: #fff; border: 2px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: var(--shadow-sm);
  font-family: var(--font-read); font-size: 21px; font-weight: 700; transition: transform .4s var(--spring);
}
.stack .mini img { width: 44px; height: 44px; }
.card.click:hover .stack .mini:nth-child(1) { transform: rotate(-10deg) translateX(-8px); }
.card.click:hover .stack .mini:nth-child(3) { transform: rotate(10deg) translateX(8px); }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; margin: 16px 0 6px; }
.bars div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; font-size: 12px; color: var(--ink-3); }
.bars i { width: 100%; max-width: 30px; border-radius: 9px 9px 5px 5px; background: linear-gradient(180deg, #b8a6ff, #7c5cff); transform-origin: bottom; animation: grow .9s var(--spring) both; }
.bars .today i { background: linear-gradient(180deg, #ffd27a, #ff8a3d); }
.bars .today { color: var(--ink); font-weight: 600; }
@keyframes grow { from { transform: scaleY(0); } }

.section-h { display: flex; align-items: baseline; justify-content: space-between; margin: 32px 0 14px; }
.section-h h2 { margin: 0; font-size: 24px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.section-h a { color: var(--ink-2); font-size: 15px; cursor: pointer; text-decoration: none; }
.hscroll { display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 18px; margin: 0 -4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex: none; width: 150px; }

.series-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.series {
  position: relative; border-radius: 26px; padding: 20px 20px 52px; min-height: 160px; color: #fff; cursor: pointer; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .35s var(--spring); border: 0; text-align: left;
}
.series:hover { transform: translateY(-4px) rotate(-.6deg); }
.series:active { transform: scale(.97); }
.series .big { position: absolute; right: -10px; bottom: -14px; width: 116px; transform: rotate(-8deg); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .25)); }
.series b { font-size: 26px; font-weight: 600; display: block; }
.series small { display: block; opacity: .9; font-size: 14px; max-width: 68%; }
.series small.note { opacity: .75; font-size: 13px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.series .st { position: absolute; left: 20px; bottom: 16px; background: rgba(255, 255, 255, .24); border-radius: 99px; padding: 3px 11px; font-size: 13px; font-weight: 500; }
.series.todo { filter: saturate(.35); }

/* ------------------------------------------------------------------ 书卡 */
.bookcard { border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; transition: transform .35s var(--spring); }
.bookcard:hover { transform: translateY(-5px); }
.bookcard:active { transform: scale(.96); }
.bookcard .cv { position: relative; aspect-ratio: 1180 / 1620; border-radius: 8px 16px 16px 8px; overflow: hidden; box-shadow: -2px 0 0 rgba(0, 0, 0, .08) inset, 0 16px 28px -16px rgba(43, 36, 82, .5); background: #eee; }
.bookcard .cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bookcard .cv .cvbg { position: absolute; inset: -8%; width: 116%; height: 116%; filter: blur(14px) brightness(.92) saturate(1.2); }
.bookcard .cv .cvimg { position: relative; object-fit: contain; }
.bookcard .cv::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 9px; background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .15), rgba(0, 0, 0, 0)); }
.bookcard .ribbon { position: absolute; left: 0; top: 12px; padding: 3px 10px 3px 12px; border-radius: 0 10px 10px 0; color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.bookcard .donebadge { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); color: #fff; font-weight: 700; }
.bookcard .new { position: absolute; right: 8px; top: 10px; background: var(--berry); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; letter-spacing: .5px; }
.bookcard .prog { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .7); overflow: hidden; }
.bookcard .prog i { display: block; height: 100%; background: var(--sun); }
.bookcard .lock { position: absolute; inset: 0; background: rgba(43, 36, 82, .34); display: grid; place-items: center; }
.bookcard .lock span { background: rgba(255, 255, 255, .92); color: var(--ink); border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.bookcard .t { font-family: var(--font-read); font-weight: 700; font-size: 16px; line-height: 1.2; margin-top: 10px; }
.bookcard .m { display: flex; gap: 6px; align-items: center; margin-top: 5px; font-size: 12px; color: var(--ink-2); }
.cov { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 99px; background: var(--mint-l); color: var(--mint-d); font-weight: 600; }
.cov.mid { background: var(--sun-l); color: #9a6a00; }
.cov.low { background: #ffe3e8; color: var(--berry-d); }
.gencover {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px; color: #fff; overflow: hidden;
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 255, 255, .28) 0 18%, transparent 19%),
    radial-gradient(circle at 12% 88%, rgba(255, 255, 255, .16) 0 26%, transparent 27%),
    linear-gradient(160deg, color-mix(in srgb, var(--sc) 78%, white) 0%, var(--sc) 55%, color-mix(in srgb, var(--sc) 80%, black) 100%);
}
.gencover .lli { font-size: 10px; letter-spacing: .8px; font-weight: 600; opacity: .9; text-transform: uppercase; }
.gencover .lv {
  width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-top: 6px;
  background: #fff; color: var(--sc); font-size: 30px; font-weight: 700; box-shadow: 0 6px 0 rgba(0, 0, 0, .12);
}
.gencover .tt { font-family: var(--font-read); font-weight: 700; font-size: 19px; line-height: 1.15; margin-top: auto; text-shadow: 0 2px 0 rgba(0, 0, 0, .12); position: relative; z-index: 1; }
.bookcard .cv .gencover .owl { position: absolute; right: -8px; top: 38%; width: 42%; height: auto; opacity: .9; transform: rotate(-10deg); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .2)); }
.bookcard .dl { position: absolute; right: 8px; top: 8px; background: rgba(255, 255, 255, .92); color: var(--ink); border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 600; }

/* ------------------------------------------------------------------ 书架 */
.shelf-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.shelf-head h1 { margin: 0; font-size: 32px; font-weight: 600; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button { border: 0; cursor: pointer; border-radius: 16px; padding: 9px 16px; font-size: 16px; font-weight: 500; background: #fff; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 6px; transition: .25s; }
.tabs button img { width: 24px; height: 24px; }
.tabs button.on { color: #fff; transform: translateY(-2px); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 2px solid transparent; cursor: pointer; border-radius: 14px; padding: 6px 13px; font-size: 15px; font-weight: 600;
  background: #fff; color: var(--ink-2); box-shadow: 0 3px 0 rgba(43, 36, 82, .08); transition: .2s; display: flex; align-items: center; gap: 6px;
}
.chip:active { transform: translateY(2px); box-shadow: none; }
.chip img { width: 22px; height: 22px; }
.chip.on { color: #fff; background: var(--cc, var(--ink)); box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.chip .n { font-size: 12px; opacity: .7; font-weight: 500; }
/* 这一级全部读完：按钮里一个绿色小勾 */
.chip .ck { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #22c55e; color: #fff; font-size: 12px; font-weight: 900; margin-left: 2px; box-shadow: 0 0 0 2px #fff; }
.tag.lvall { background: #dcfce7; color: #15803d; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.tag.lvall .emoji { width: 20px; height: 20px; }
.tag.lvprog { background: #eef2ff; color: #4f46e5; font-weight: 700; }
.sysgroup { display: flex; align-items: center; gap: 6px; flex: none; padding-right: 8px; margin-right: 2px; border-right: 2px dashed var(--line); }
.sysgroup:last-child { border-right: 0; }
.sysgroup em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--sc); writing-mode: vertical-rl; letter-spacing: 1px; }
.bookgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 20px; margin-top: 8px; }
.levelbar { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 20px; padding: 14px 18px; box-shadow: var(--shadow-sm); margin: 6px 0 20px; flex-wrap: wrap; }
.levelbar .lvbig { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 700; flex: none; }

/* ------------------------------------------------------------------ 书详情 */
.detail { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(22px, 4vw, 54px); align-items: start; margin-top: 10px; }
@media (max-width: 720px) { .detail { grid-template-columns: 1fr; } .detail .cover3d { width: 62%; margin: 0 auto; } }
.detail h1 { font-family: var(--font-read); font-size: clamp(34px, 5vw, 52px); margin: 10px 0 2px; line-height: 1.05; }
.detail .zh { font-size: 19px; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 22px 0; }
.fact { background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow-sm); }
.fact b { display: block; font-size: 24px; font-weight: 600; }
.fact small { color: var(--ink-2); font-size: 13px; }
.kw { display: flex; flex-wrap: wrap; gap: 10px; }
.kw button { border: 0; cursor: pointer; font-family: var(--font-read); font-weight: 700; font-size: 22px; padding: 8px 16px; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 #eadfce; transition: .15s; }
.kw button:active { transform: translateY(3px); box-shadow: 0 1px 0 #eadfce; }
.ring { --p: 90; --c: var(--mint); width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; flex: none; background: conic-gradient(var(--c) calc(var(--p) * 1%), #ece6f3 0); }
.ring span { width: 66px; height: 66px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 700; font-size: 20px; }
.guide { margin-top: 18px; background: var(--sky-l); border-radius: 18px; padding: 14px 16px; }
.guide summary { cursor: pointer; font-weight: 600; color: var(--sky-d); }
.guide p { margin: 8px 0 0; line-height: 1.6; }
.backbtn { width: 48px; height: 48px; }
.backbtn .top { font-size: 20px; }

/* ------------------------------------------------------------------ 阅读器 */
.reader { position: fixed; inset: 0; display: flex; flex-direction: column; background: radial-gradient(120% 100% at 50% 0%, #f7efe2 0%, #eadcc6 100%); overflow: hidden; transition: background .6s; }
.reader.night { background: radial-gradient(120% 100% at 50% 0%, #2a2540 0%, #15121f 100%); }
.reader.night .spread { filter: brightness(.82) sepia(.22); }
.r-top, .r-dock { position: relative; z-index: 20; }
.r-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 6px; }
.r-top .ttl { flex: 1; text-align: center; min-width: 0; }
.r-top .ttl b { font-family: var(--font-read); font-size: 19px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-top .ttl small { color: var(--ink-2); font-size: 13px; }
.reader.night .r-top, .reader.night .r-dock { color: #eee8ff; }
.reader.night .r-top .ttl small { color: #b6addb; }
.iconbtn { width: 48px; height: 48px; border-radius: 16px; border: 0; background: rgba(255, 255, 255, .8); box-shadow: var(--shadow-sm); cursor: pointer; display: grid; place-items: center; font-size: 22px; flex: none; transition: .2s; }
.iconbtn:active { transform: scale(.92); }
.iconbtn img { width: 28px; height: 28px; }
.reader.night .iconbtn { background: rgba(255, 255, 255, .12); color: #fff; }
.vocab-pill { position: relative; display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px 0 8px; border-radius: 16px; background: rgba(255, 255, 255, .8); box-shadow: var(--shadow-sm); font-weight: 600; font-size: 18px; border: 0; cursor: pointer; }
.vocab-pill img { width: 32px; height: 32px; }
.vocab-pill.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.25); } }
.reader.night .vocab-pill { background: rgba(255, 255, 255, .12); color: #fff; }

.r-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.r-stage .navbtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 15; transition: opacity .4s; }
.r-stage .navbtn.prev { left: 14px; }
.r-stage .navbtn.next { right: 14px; }
.spread-holder { position: relative; perspective: 1800px; }
.spread { position: absolute; inset: 0; display: flex; justify-content: center; filter: drop-shadow(0 26px 30px rgba(60, 40, 10, .32)); transition: filter .6s; }
.pg { position: relative; background: #fff; overflow: hidden; user-select: none; -webkit-user-select: none; }
.pg img.pic { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.pg.left { border-radius: 10px 2px 2px 10px; }
.pg.right { border-radius: 2px 10px 10px 2px; }
.pg.solo { border-radius: 10px; }
.pg.left::after, .pg.right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none; }
.pg.left::after { right: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .16)); }
.pg.right::after { left: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)); }
.pg .num { position: absolute; bottom: 1.6%; font-size: 11px; color: #9c8f7c; }
.hot { position: absolute; border-radius: 8px; cursor: pointer; transition: background .2s, box-shadow .2s; z-index: 3; }
.hot:hover { background: rgba(255, 197, 61, .16); }
.hot.said { background: linear-gradient(transparent 58%, rgba(255, 197, 61, .78) 58%); }
.hot.on { background: rgba(255, 122, 69, .16); box-shadow: 0 0 0 3px var(--brand), 0 6px 16px rgba(255, 122, 69, .35); animation: tokpop .4s var(--spring); }
@keyframes tokpop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.sentglow { position: absolute; border-radius: 12px; background: rgba(255, 237, 160, .38); box-shadow: 0 0 0 2px rgba(255, 197, 61, .35); z-index: 2; pointer-events: none; animation: fadein .25s both; }
.sentglow.sel { background: rgba(124, 92, 255, .12); box-shadow: 0 0 0 2px rgba(124, 92, 255, .45); }
/* 密排页点中某句时，这句下面弹出的小工具条 */
.sentbar {
  position: absolute; z-index: 6; display: flex; gap: 4px; padding: 4px; border-radius: 15px;
  background: rgba(255, 255, 255, .98); box-shadow: 0 10px 26px -8px rgba(43, 36, 82, .5);
  border: 2px solid var(--grape-l); animation: noticeIn .22s var(--spring) both; white-space: nowrap;
}
.sentbar button {
  display: flex; align-items: center; gap: 5px; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ink); padding: 6px 10px; border-radius: 11px;
}
.sentbar button img { width: 20px; height: 20px; }
.sentbar button.tr { color: var(--grape-d); }
.sentbar button:hover { background: var(--grape-l); }
.sentbar button.on { background: var(--grape); color: #fff; }
.sentbar .none { padding: 6px 10px; font-size: 13px; color: var(--ink-3); }
.reader.night .sentbar { background: #2c2740; border-color: #4a3f7a; }
.reader.night .sentbar button { color: #f1ecff; }
.reader.night .sentbar button.tr { color: #cbb8ff; }
@keyframes fadein { from { opacity: 0; } }
.sbtn {
  position: absolute; z-index: 4; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  transform: translate(0, -50%); background: #fff; box-shadow: 0 3px 0 #e6d8bf, 0 6px 12px rgba(0, 0, 0, .15);
  display: grid; place-items: center; transition: transform .2s var(--spring), opacity .3s;
}
.sbtn img { width: 64%; height: 64%; }
.sbtn:hover { transform: translate(0, -50%) scale(1.12); }
.sbtn.playing { background: var(--sun); animation: wobble 1s ease-in-out infinite; }
@keyframes wobble { 50% { transform: translate(0, -50%) scale(1.12); } }

.turn-next-enter-active, .turn-next-leave-active, .turn-prev-enter-active, .turn-prev-leave-active { transition: transform .5s var(--ease), opacity .45s; }
.turn-next-enter-from { transform: translateX(10%) rotateY(-10deg); opacity: 0; }
.turn-next-leave-to { transform: translateX(-10%) rotateY(10deg); opacity: 0; }
.turn-prev-enter-from { transform: translateX(-10%) rotateY(10deg); opacity: 0; }
.turn-prev-leave-to { transform: translateX(10%) rotateY(-10deg); opacity: 0; }

/* 底栏：听我读 + 读这页（小号），速度在设置里 */
.r-dock { padding: 4px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.r-dock .inner { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.r-dock .listenbtn { justify-self: end; }
.r-dock .bigplay { width: 54px; height: 50px; margin-bottom: 3px; outline-width: 6px; }
.r-dock .bigplay svg { width: 24px; height: 24px; }
.listenbtn { display: flex; align-items: center; gap: 6px; height: 40px; border: 0; cursor: pointer; border-radius: 14px; padding: 0 12px 0 7px; background: rgba(255, 255, 255, .85); box-shadow: var(--shadow-sm); font-weight: 600; font-size: 14px; }
.listenbtn img { width: 26px; height: 26px; }
.listenbtn .eq { width: 26px; justify-content: center; }
.listenbtn.on { background: var(--grape); color: #fff; }
.reader.night .listenbtn:not(.on) { background: rgba(255, 255, 255, .12); color: #fff; }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 16px; }
.eq i { width: 3px; background: #fff; border-radius: 2px; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .2s; }
.eq i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.settings-pop { position: absolute; right: 16px; top: calc(66px + env(safe-area-inset-top, 0px)); z-index: 40; width: 290px; background: #fff; color: var(--ink); border-radius: 22px; padding: 8px 16px; box-shadow: var(--shadow-lg); animation: noticeIn .4s var(--spring) both; }
.settings-pop .it { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.settings-pop .it:last-child { border-bottom: 0; }
.settings-pop .it div { flex: 1; }
.settings-pop .it small { display: block; color: var(--ink-2); font-size: 12px; }
.settings-pop .it.spd { flex-wrap: wrap; gap: 6px; }
.settings-pop .it.spd .seg { flex: none; }
.hint-bubble { position: absolute; z-index: 30; left: 50%; bottom: 22px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); background: #fff; border-radius: 16px; padding: 10px 16px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; line-height: 1.5; text-align: center; animation: noticeIn .6s var(--spring) both; }
.hint-bubble img { width: 30px; animation: tap 1.2s ease-in-out infinite; }
.hint-bubble img.inl { width: 20px; height: 20px; margin: 0 2px; vertical-align: -4px; animation: none; }
@keyframes tap { 50% { transform: translateY(-5px) rotate(-8deg); } }

/* 词卡（底部抽屉） */
.sheet-mask { position: fixed; inset: 0; z-index: 60; background: rgba(20, 14, 40, .28); animation: fadein .25s both; }
.sheet {
  position: fixed; z-index: 61; left: 50%; bottom: 0; width: min(760px, 100%); transform: translateX(-50%);
  background: #fff; border-radius: 30px 30px 0 0; padding: 12px clamp(18px, 3vw, 30px) calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -20px 50px -20px rgba(43, 36, 82, .5); animation: sheetUp .5s var(--spring) both; touch-action: none;
}
@keyframes sheetUp { from { transform: translate(-50%, 100%); } }
.sheet .grab { width: 54px; height: 6px; border-radius: 9px; background: #e7e0ef; margin: 0 auto 12px; }
.sheet-x { position: absolute; right: 14px; top: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: #f3eefb; color: var(--grape-d); display: grid; place-items: center; }
.sheet-x:active { transform: scale(.92); }
.numbox { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.numin { font: inherit; font-size: 17px; font-weight: 700; width: 78px; text-align: center; padding: 8px 6px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.numin:focus { outline: none; border-color: var(--grape); }
.sheet .body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .sheet .body { grid-template-columns: 1fr; gap: 12px; } }
.wordbig { white-space: nowrap; font-family: var(--font-read); font-size: var(--fit, clamp(46px, 8vw, 68px)); font-weight: 700; line-height: 1; letter-spacing: 1px; }
.wordbig .ch { display: inline-block; transition: transform .3s var(--spring); }
.wordbig .ch.c { color: var(--c-cons); }
.wordbig .ch.v { color: var(--c-vowel); }
.wordbig .ch.t { color: var(--c-team); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 7px; text-decoration-color: rgba(192, 38, 211, .3); }
.wordbig .ch.s { color: #cfc6de; margin: 0 1px; }
.wordbig.plain { color: var(--ink); }
.wordbig .ch.pop { animation: chpop .45s var(--spring); }
@keyframes chpop { 40% { transform: translateY(-10px) scale(1.15); } }
.ipa { display: flex; align-items: center; gap: 10px; margin: 12px 0 14px; flex-wrap: wrap; color: var(--ink-2); font-size: 19px; }
.ipa .pos { background: var(--grape-l); color: var(--grape-d); border-radius: 8px; padding: 2px 8px; font-size: 13px; font-weight: 600; }
.sayrow { display: flex; gap: 12px; flex-wrap: wrap; }
.legend { display: flex; gap: 10px; font-size: 12px; color: var(--ink-3); margin-top: 12px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 3px; vertical-align: -1px; }
.meaning { background: var(--sun-l); border-radius: 20px; padding: 14px 16px; }
.meaning .zh { font-size: 27px; font-weight: 600; line-height: 1.25; }
.meaning .en { font-family: var(--font-read); color: var(--ink-2); margin-top: 6px; font-size: 16px; }
.insent { margin-top: 12px; border: 2px dashed var(--line); border-radius: 18px; padding: 12px 14px; }
.insent .lbl { font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; }
.insent .s { font-family: var(--font-read); font-size: 22px; margin-top: 4px; display: flex; gap: 10px; align-items: center; }
.insent .s mark { background: linear-gradient(transparent 55%, rgba(255, 197, 61, .8) 55%); color: inherit; padding: 0 2px; }
.insent .tr { margin-top: 6px; color: var(--ink-2); filter: blur(5px); cursor: pointer; transition: filter .3s; user-select: none; }
.insent .tr.show { filter: none; }
.sheet .acts { display: flex; gap: 14px; margin-top: 18px; }
.sheet .acts .push { flex: 1; }
.sheet .acts .push .p-front { width: 100%; }
/* 精读做一半点关闭的提醒（还差几句、做完才有金币） */
.sheet.deep-quit { width: min(520px, 100%); text-align: center; padding-top: 22px; }
.deep-quit .emoji.big { width: 64px; height: 64px; display: block; margin: 0 auto 6px; animation: chpop .8s ease .3s both; }
.deep-quit h3 { margin: 4px 0 8px; font-size: 22px; color: var(--ink); }
.deep-quit h3 b { color: var(--grape-d); font-size: 28px; }
.deep-quit p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.deep-quit p b { color: #e08a00; }
.sight { display: inline-flex; align-items: center; gap: 4px; background: var(--sky-l); color: var(--sky-d); border-radius: 8px; padding: 2px 8px; font-size: 13px; font-weight: 600; }

/* ------------------------------------------------------------------ 读完 */
.finish { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 34px 18px 130px; text-align: center; }
.trophy { width: 150px; animation: trophy 1.2s var(--spring) both, floaty 5s 1.2s ease-in-out infinite; filter: drop-shadow(0 20px 20px rgba(217, 154, 18, .35)); }
@keyframes trophy { from { transform: scale(.2) rotate(-30deg); opacity: 0; } }
.finish h1 { font-size: clamp(38px, 6vw, 56px); margin: 10px 0 0; font-weight: 600; }
.finish .bk { font-family: var(--font-read); font-size: 22px; color: var(--ink-2); }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: min(760px, 100%); margin: 26px 0 8px; }
.stat { background: #fff; border-radius: 22px; padding: 16px 12px; box-shadow: var(--shadow-sm); animation: noticeIn .6s var(--spring) both; }
.stat img { width: 40px; }
.stat b { display: block; font-size: 28px; font-weight: 600; margin-top: 4px; }
.stat small { color: var(--ink-2); font-size: 13px; }
.wordlist { width: min(760px, 100%); background: #fff; border-radius: 26px; box-shadow: var(--shadow); padding: 8px 20px; text-align: left; margin-top: 18px; }
.wordlist .wl-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 6px; }
.wordlist .wl-h b { font-size: 19px; }
.wrow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.wrow .w { font-family: var(--font-read); font-weight: 700; font-size: 25px; min-width: 110px; }
.wrow .z { flex: 1; color: var(--ink-2); }
.wrow .src { font-size: 12px; color: var(--ink-3); }
.spk { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--sky-l); cursor: pointer; display: grid; place-items: center; flex: none; transition: .2s; }
.spk:active { transform: scale(.9); }
.spk img { width: 26px; height: 26px; }
.finish .btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }

/* ------------------------------------------------------------------ 复习 */
.review { max-width: 760px; margin: 0 auto; padding: 18px 18px 130px; }
.rv-head { display: flex; align-items: center; gap: 14px; }
.rv-head .progress { flex: 1; background: #ece4f5; height: 14px; }
.rv-head .progress i { background: linear-gradient(90deg, #8f73ff, #3d8bff); box-shadow: none; }
.flip { perspective: 1600px; margin-top: 22px; }
.flip .inner { position: relative; transition: transform .7s var(--spring); transform-style: preserve-3d; min-height: 520px; }
.flip.back .inner { transform: rotateY(180deg); }
.flip.tall .inner { min-height: 610px; }   /* 答题模式背面多了判卷结果 / 学习卡按钮 */
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; border-radius: 30px; box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; }
.face.b { transform: rotateY(180deg); }
.ctx { position: relative; border-radius: 18px; overflow: hidden; background: #f4efe6; height: 280px; }
.ctx img { position: absolute; width: 100%; left: 0; }
.ctx .mk { position: absolute; border-radius: 6px; box-shadow: 0 0 0 3px var(--brand), 0 0 0 9999px rgba(255, 255, 255, .0); background: rgba(255, 197, 61, .35); }
.ctx .src { position: absolute; left: 10px; bottom: 10px; background: rgba(255, 255, 255, .92); border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.q { text-align: center; margin-top: 18px; }
.q .s { font-family: var(--font-read); font-size: 30px; display: inline-flex; gap: 12px; align-items: center; }
.q .s mark { background: linear-gradient(transparent 52%, rgba(255, 197, 61, .85) 52%); color: inherit; padding: 0 3px; }
.q p { color: var(--ink-2); margin: 10px 0 0; }
.face .grow { flex: 1; }
.quiz-in { width: 100%; box-sizing: border-box; font: inherit; font-size: 24px; text-align: center; padding: 14px 16px; border-radius: 20px;
  border: 3px solid var(--line, #e6e1f5); background: #fff; color: var(--ink); outline: none; margin-bottom: 12px; }
.quiz-in:focus { border-color: #b39cf5; box-shadow: 0 0 0 4px rgba(179, 156, 245, .18); }
.quiz-in:disabled { background: #f6f4fb; }
.quiz-btns { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.verdict { display: flex; gap: 12px; align-items: center; border-radius: 20px; padding: 12px 16px; margin: 10px 0 12px; background: var(--sky-l, #e3f2ff); }
.verdict img { width: 44px; height: 44px; flex: none; }
.verdict b { display: block; font-size: 18px; }
.verdict small { display: block; color: var(--ink-2); margin-top: 3px; font-size: 13px; }
.verdict.again { background: var(--berry-l, #ffe3ea); }
.verdict.hard { background: var(--sun-l, #fff4d6); }
.verdict.easy { background: var(--mint-l, #dff7ec); }
.rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.rate .push .p-front { flex-direction: column; gap: 2px; padding: .55em .3em; font-size: 15px; }
.rate .push img { width: 34px; height: 34px; }
.rate .push small { font-size: 11px; opacity: .85; font-weight: 500; }
.back-top { display: flex; gap: 18px; align-items: center; }
.back-top .meaning { flex: 1; }

/* ------------------------------------------------------------------ 家长 */
.gate-lock { width: 90px; }
.gate { min-height: min(80vh, 560px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding-bottom: 96px; }
.holdbtn { -webkit-touch-callout: none; position: relative; width: 150px; height: 150px; border-radius: 50%; border: 0; cursor: pointer; background: conic-gradient(var(--grape) var(--p, 0%), #e8e1f3 0); display: grid; place-items: center; user-select: none; -webkit-user-select: none; touch-action: none; }
.holdbtn span { width: 124px; height: 124px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.holdbtn img { width: 60px; }
/* 老浏览器画不出 conic-gradient 时，下面这条进度条兜底 */
.holdbtn { margin-bottom: 16px; }
.holdbtn .bar { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); width: 150px; height: 8px; border-radius: 99px; background: #e8e1f3; overflow: hidden; }
.holdbtn .bar b { display: block; height: 100%; background: var(--grape); border-radius: 99px; transition: width .06s linear; }
/* 手机横屏：整块压紧，别被底部导航条压住 */
@media (orientation: landscape) and (max-height: 640px) {
  .gate { min-height: 0; padding: 6px 0 84px; gap: 6px; }
  .gate h1 { font-size: 19px; }
  .gate p { font-size: 13px; }
  .gate-lock { width: 40px; }
  .holdbtn { width: 88px; height: 88px; margin-top: 2px; }
  .holdbtn span { width: 72px; height: 72px; }
  .holdbtn img { width: 34px; }
  .holdbtn .bar { width: 104px; bottom: -13px; height: 6px; }
  .gate .push .p-front { font-size: .9rem; padding: .5em 1em; }
}
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.kpi { background: #fff; border-radius: 22px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.kpi small { color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.kpi small img { width: 22px; }
.kpi b { display: block; font-size: 32px; font-weight: 600; margin-top: 6px; }
.kpi .dl { font-size: 13px; font-weight: 600; }
.kpi .dl.up { color: var(--mint-d); }
.kpi .dl.down { color: var(--mint-d); }
.chart { width: 100%; height: auto; display: block; }
.grl { position: relative; display: flex; justify-content: space-between; margin: 26px 6px 8px; }
.grl::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 6px; border-radius: 9px; background: linear-gradient(90deg, #ffd6c4, #cfc1ff, #bfe6ff); }
.grl span { position: relative; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 700; color: var(--ink-3); box-shadow: var(--shadow-sm); font-size: 15px; }
.grl span.done { color: #fff; background: var(--grape); }
.grl span.cur { color: #fff; background: var(--brand); transform: scale(1.3); box-shadow: 0 0 0 6px rgba(255, 122, 69, .2); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl td, .tbl th { text-align: left; padding: 11px 6px; border-top: 1px solid var(--line); font-size: 15px; }
.tbl th { color: var(--ink-3); font-weight: 500; font-size: 13px; border-top: 0; }
.tbl .w { font-family: var(--font-read); font-weight: 700; font-size: 18px; }
.better { color: var(--mint-d); font-weight: 600; }
.setrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.setrow:first-of-type { border-top: 0; }
.setrow div { flex: 1; }
.setrow small { display: block; color: var(--ink-2); font-size: 13px; }
.empty { text-align: center; padding: 40px 10px; color: var(--ink-2); }
.empty img { width: 90px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.lvsel { font: inherit; font-size: 15px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); max-width: 190px; }

.levelbar .grow { flex: 1 1 220px; min-width: 0; }
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar .grow { flex: 1 1 60%; }
  .topbar h2 { font-size: 21px; }
  .topbar p { font-size: 12px; }
  .pill { font-size: 15px; padding: 4px 10px 4px 6px; }
  .pill img { width: 22px; height: 22px; }
  .shelf-head h1 { font-size: 26px; }
  .shelf-head .tabs { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start !important; padding-bottom: 6px; scrollbar-width: none; }
  .shelf-head .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; }
  .bookgrid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .gencover .lv { width: 44px; height: 44px; font-size: 22px; border-radius: 14px; }
  .gencover .tt { font-size: 16px; }
  .gencover .lli { visibility: hidden; }
  .seg span { padding: 6px 8px; font-size: 13px; }
  .r-stage .navbtn { width: 48px; height: 48px; }
  .r-top { gap: 8px; }
  .r-top .vocab-pill { height: 44px; padding: 0 10px 0 6px; font-size: 15px; gap: 4px; }
  .r-top .vocab-pill img { width: 24px; height: 24px; }
  .r-top .iconbtn { width: 44px; height: 44px; }
  .hero h1 { font-size: 30px; }
}
.bookcard .zh-t { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.wordbig .ch.x { color: #c9c0d8; }
.meaning .ctxzh { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.meaning .dsrc { margin-top: 8px; font-size: 12px; color: var(--ink-3); display: flex; gap: 8px; }
.b3500 { background: var(--mint-l); color: var(--mint-d); border-radius: 8px; padding: 1px 8px; font-weight: 600; }
.wrow.off { opacity: .55; }
.wrow .wmark { width: 2em; text-align: center; font-weight: 700; color: var(--mint-d); flex: none; }
.rv-plan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; background: #fff; border-radius: 18px; padding: 10px 14px; box-shadow: var(--shadow-sm); font-size: 15px; }
.rv-plan b { color: var(--grape-d); }
/* 生词本 */
.vb-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.vb-search { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 15px; padding: 9px 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.vb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
@media (max-width: 560px) { .vb-grid { grid-template-columns: 1fr; } }
.vcard { background: #fff; border-radius: 24px; padding: 16px 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; animation: noticeIn .45s var(--spring) both; }
.vc-top { display: flex; align-items: center; gap: 10px; }
.vc-top .seq { align-self: flex-start; background: var(--grape-l); color: var(--grape-d); border-radius: 10px; padding: 2px 8px; font-weight: 700; font-size: 13px; }
.vword { font-family: var(--font-read); font-size: 34px; font-weight: 700; line-height: 1.05; }
.vword .ch.c { color: var(--c-cons); } .vword .ch.v { color: var(--c-vowel); } .vword .ch.t { color: var(--c-team); } .vword .ch.x { color: #c9c0d8; }
.vmeta { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.vmeta .pos { background: var(--grape-l); color: var(--grape-d); border-radius: 8px; padding: 1px 7px; font-size: 12px; font-weight: 600; }
.vzh { font-size: 20px; font-weight: 600; }
.vsrc { display: flex; gap: 12px; background: var(--paper); border-radius: 16px; padding: 10px; }
.vsrc img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; box-shadow: var(--shadow-sm); }
.vbook { font-weight: 600; font-size: 15px; }
.vbook small { color: var(--ink-2); font-weight: 400; margin-left: 4px; }
.vsent { font-family: var(--font-read); font-size: 17px; margin-top: 6px; line-height: 1.4; }
.vsent mark { background: linear-gradient(transparent 55%, rgba(255, 197, 61, .85) 55%); color: inherit; padding: 0 2px; }
.spk.small { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; vertical-align: middle; }
.spk.small img { width: 20px; height: 20px; }
.spk.on { background: var(--sun-l); }
.vmore summary { cursor: pointer; color: var(--ink-2); font-size: 13px; }
.vmore .vsent { font-size: 14px; }
.vc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.vc-foot .chip { font-size: 13px; padding: 4px 10px; }
.vst { border-radius: 99px; padding: 2px 10px; font-weight: 600; font-size: 12px; }
.st-today { background: var(--brand-l); color: var(--brand-d); }
.st-new { background: var(--sky-l); color: var(--sky-d); }
.st-later { background: var(--mint-l); color: var(--mint-d); }
.card h3 .more { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.vc-foot .vbtns { display: flex; gap: 6px; flex: none; }

/* 复习排程（FSRS）同步状态 */
.card .sub.err, .setrow small.err { color: var(--berry-d); }
.vb-err { background: #ffe3ea; color: var(--berry-d); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.setrow a.more { color: var(--grape-d); font-size: 14px; white-space: nowrap; text-decoration: none; }

/* 整句翻译：句子后面的「译」、气泡、朗读字幕 */
.trbtn {
  position: absolute; transform: translate(0, -50%); z-index: 4;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--grape-d); font-weight: 700; font-size: 16px; line-height: 34px;
  box-shadow: 0 3px 0 #e6d8bf, 0 6px 12px rgba(0, 0, 0, .15); transition: transform .2s var(--spring), background .2s;
}
.trbtn:hover { transform: translate(0, -50%) scale(1.12); }
.trbtn.on { background: var(--grape); color: #fff; }
.trbubble {
  position: absolute; z-index: 6; padding: 10px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .97); color: var(--ink); font-size: 17px; line-height: 1.45; font-weight: 600;
  box-shadow: 0 10px 28px -8px rgba(43, 36, 82, .45); border: 2px solid var(--grape-l);
  animation: toastIn .25s ease;
}
.trcaption {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 7;
  max-width: min(760px, 86%); padding: 8px 18px; border-radius: 16px;
  background: rgba(43, 36, 82, .82); color: #fff; font-size: 17px; line-height: 1.45; text-align: center;
  pointer-events: none; backdrop-filter: blur(4px);
}
.fade-enter-active, .fade-leave-active { transition: opacity .25s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.reader.night .trbubble { background: #2c2740; color: #f1ecff; border-color: #4a3f7a; }
.reader.night .trbtn { background: #2c2740; color: #cbb8ff; }

/* 手机横屏（矮屏）：顶栏/底栏换成左右两条侧栏，书页吃满高度（app.js 里 land） */
.rail {
  position: absolute; top: 0; bottom: 0; z-index: 20; width: 56px; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 0 calc(8px + env(safe-area-inset-bottom, 0px));
  transition: opacity .4s;
}
.rail > * { pointer-events: auto; }
.rail .grow { flex: 1; pointer-events: none; }
.rail-l { left: calc(8px + env(safe-area-inset-left, 0px)); }
.rail-r { right: calc(8px + env(safe-area-inset-right, 0px)); }
.rail .fsbtn { color: var(--grape-d); }
.rail .listen-i.on { background: var(--grape); }
.rail .listen-i img { width: 30px; height: 30px; }
.rail .vocab-pill { width: 48px; padding: 0; flex-direction: column; justify-content: center; gap: 1px; }
.rail .vocab-pill img { width: 24px; height: 24px; }
.rail .vocab-pill small { font-size: 11px; line-height: 1; font-weight: 700; color: var(--ink-2); }
.reader.night .rail .vocab-pill small { color: #cfc8ee; }
.rail .vocab-pill i {
  position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--brand); color: #fff; font: 700 13px/22px var(--font-read); font-style: normal; box-shadow: 0 2px 6px rgba(255, 122, 69, .45);
}
.rail .plabel {
  position: absolute; top: calc(50% + 34px); left: 0; right: 0; text-align: center;
  font-weight: 700; font-size: 14px; line-height: 1.15; color: var(--ink); pointer-events: none;
}
.rail .plabel span { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.rail .bigplay { width: 54px; height: 50px; margin: 0 0 3px; outline-width: 6px; }
.rail .bigplay svg { width: 24px; height: 24px; }
.reader.land .r-stage { padding: 8px calc(72px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(72px + env(safe-area-inset-left, 0px)); }
.reader.land .r-stage .navbtn { width: 54px; height: 52px; }
.reader.land .r-stage .navbtn.prev { left: calc(9px + env(safe-area-inset-left, 0px)); }
.reader.land .r-stage .navbtn.next { right: calc(9px + env(safe-area-inset-right, 0px)); }
.reader.land .hint-bubble { bottom: 12px; padding: 6px 12px; font-size: 13px; }
.reader.land .hint-bubble img { width: 22px; }
.reader.land .trcaption { bottom: 12px; font-size: 15px; padding: 6px 14px; max-width: min(640px, calc(100% - 170px)); }
.reader.land .settings-pop {
  top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(72px + env(safe-area-inset-right, 0px));
  max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 14px;
}
.reader.land .settings-pop .it { padding: 7px 0; }
.reader.land .settings-pop .it small { display: none; }     /* 矮屏只留标题，一屏放下 */
.reader.night .rail .plabel { color: #eee8ff; }
.reader.night .rail .plabel span { color: #b6addb; }
.reader.night .rail .fsbtn { color: #fff; }
/* 横屏词卡：压紧一点；还放不下就在抽屉里滚动 */
.reader.land .sheet {
  width: min(820px, calc(100% - 16px)); max-height: calc(100% - 8px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 6px 22px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0;
}
.reader.land .sheet .grab { margin-bottom: 6px; }
.reader.land .sheet .body { gap: 16px; }
.reader.land .sheet .wordbig { font-size: calc(var(--fit, 56px) * .72); }
.reader.land .sheet .ipa { margin: 6px 0 8px; font-size: 16px; }
.reader.land .sheet .sayrow { gap: 8px; }
.reader.land .sheet .sayrow .push .p-front { font-size: .9rem; padding: .5em .85em; }
.reader.land .sheet .legend { margin-top: 8px; }
.reader.land .sheet .meaning { padding: 10px 14px; border-radius: 16px; }
.reader.land .sheet .meaning .zh { font-size: 22px; }
.reader.land .sheet .insent { margin-top: 8px; padding: 8px 12px; }
.reader.land .sheet .insent .s { font-size: 18px; }
.reader.land .sheet .acts { margin-top: 10px; }
.reader.land .sheet .acts .push .p-front { font-size: 1.02rem; padding: .6em 1.2em; }

/* 孩子管理（家长中心 + 谁来读书页） */
.kidrows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.kidrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: var(--paper-2, #fbf7ef); border: 2px solid transparent; }
.kidrow.on { border-color: var(--grape); background: #fff; }
.kidrow .av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; cursor: pointer; background: #f1ecff; }
.kidrow .av img { width: 32px; height: 32px; }
.kidrow .grow { flex: 1; min-width: 0; cursor: pointer; }
.kidrow b { display: block; font-size: 17px; }
.kidrow small { color: var(--ink-2); font-size: 13px; }

/* ------------------------------------------------------------------ 精读模式（platform docs/70 §13） */
.reader.deep { --dpw: clamp(330px, 34vw, 440px); }
.reader.deep.land { --dpw: clamp(260px, 40vw, 380px); }
.deep-panel {
  position: relative; z-index: 20; display: flex; flex-direction: column;
  width: min(880px, calc(100% - 20px)); height: clamp(236px, 40vh, 360px); margin: 0 auto calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-radius: 24px; box-shadow: 0 -2px 0 rgba(124, 92, 255, .08), var(--shadow); overflow: hidden;
}
.reader.deep.side .deep-panel { position: absolute; margin: 0; height: auto; width: var(--dpw);
  top: calc(64px + env(safe-area-inset-top, 0px)); right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.reader.deep.side:not(.land) .r-stage { padding: 12px calc(var(--dpw) + 102px) 16px 84px; }
.reader.deep.side:not(.land) .r-stage .navbtn.next { right: calc(var(--dpw) + 30px); }
.reader.deep.land .deep-panel { top: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); right: calc(72px + env(safe-area-inset-right, 0px)); border-radius: 20px; }
.reader.deep.land .r-stage { padding-right: calc(var(--dpw) + 146px + env(safe-area-inset-right, 0px)); }
.reader.deep.land .r-stage .navbtn.next { right: calc(var(--dpw) + 82px + env(safe-area-inset-right, 0px)); }
.deep-panel.nudge { animation: dpnudge .5s var(--ease); }
@keyframes dpnudge { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.r-stage .navbtn.locked { opacity: .45; }

.dp-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; border-bottom: 1px solid #f3eefb; }
.dp-head .grow { flex: 1; }
.dp-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--mint-l); color: var(--mint-d); font-weight: 700; font-size: 14px; border-radius: 99px; padding: 3px 10px 3px 6px; flex: none; }
.dp-tag img { width: 20px; height: 20px; }
.dp-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 6px; margin: -6px 0; }
.dp-chips::-webkit-scrollbar { display: none; }
.dp-chips button { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #e6e0f3; background: #fff; color: var(--ink-2); font-weight: 700; font-size: 14px; cursor: pointer; transition: .2s var(--spring); }
.dp-chips button.great { background: var(--mint); border-color: var(--mint); color: #fff; }
.dp-chips button.good { background: var(--sky); border-color: var(--sky); color: #fff; }
.dp-chips button.ok { background: var(--sun); border-color: var(--sun); color: #5b3f00; }
.dp-chips button.low { background: var(--berry); border-color: var(--berry); color: #fff; }
.dp-chips button.cur { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--grape); transform: scale(1.08); }
.dp-count { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.dp-count b { color: var(--grape-d); font-size: 15px; }
.dp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px 6px; overscroll-behavior: contain; }
.dp-en { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-read); font-size: 20px; line-height: 1.4; margin-bottom: 10px; }
.dp-en .spk { width: 36px; height: 36px; border-radius: 12px; margin-top: 1px; }
.dp-en .spk img { width: 22px; }
.dp-in { width: 100%; font: inherit; font-size: 18px; line-height: 1.5; padding: 10px 14px; border-radius: 16px; resize: none;
  border: 3px solid #e6e1f5; background: #fcfbff; color: var(--ink); outline: none; min-height: 76px; }
.dp-in:focus { border-color: #b39cf5; background: #fff; box-shadow: 0 0 0 4px rgba(179, 156, 245, .18); }
.dp-in:disabled { opacity: .7; }
.dp-foot { padding: 8px 14px 12px; display: flex; justify-content: flex-end; border-top: 1px solid #f3eefb; }
.dp-foot .push { min-width: 170px; }
.dp-msg { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 16px; color: var(--ink-2); text-align: center; }
.dp-msg img { width: 34px; }
.dp-dots { display: inline-flex; gap: 4px; margin-right: 6px; vertical-align: middle; }
.dp-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: dpdot 1s infinite ease-in-out; }
.dp-dots i:nth-child(2) { animation-delay: .15s; }
.dp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dpdot { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

.dp-res { animation: noticeIn .3s var(--spring) both; }
.dp-score { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dp-score p { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.45; }
.dp-ring { --p: 80; --c: var(--mint); width: 50px; height: 50px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), #ece6f3 0); animation: ringIn .6s var(--spring) both; }
.dp-ring span { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.dp-ring.big { width: 104px; height: 104px; }
.dp-ring.big span { width: 82px; height: 82px; font-size: 30px; line-height: 1; align-content: center; }
.dp-ring.big small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 500; margin-top: 2px; }
@keyframes ringIn { from { transform: scale(.4) rotate(-90deg); opacity: 0; } }
.dp-row { border-radius: 14px; padding: 6px 12px; margin-bottom: 6px; background: #f7f5fc; }
.dp-row small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.dp-row p { margin: 1px 0 0; font-size: 16px; line-height: 1.5; }
.dp-row p.empty { color: var(--ink-3); }
.dp-row.ref { background: var(--mint-l); }
.dp-row.ref small { color: var(--mint-d); }
.dp-errs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.dp-errs li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.45; background: #fff6f0; border-radius: 12px; padding: 7px 10px; }
.dp-errs .tp { flex: none; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; border-radius: 8px; padding: 2px 7px; margin-top: 1px; }
.dp-errs b { font-family: var(--font-read); }
.dp-errs s { color: var(--ink-3); }
.dp-errs em { font-style: normal; color: var(--mint-d); font-weight: 600; }
.dp-errs small { display: block; color: var(--ink-2); font-size: 13px; }
.dp-good { display: flex; gap: 8px; align-items: center; background: var(--sun-l); border-radius: 12px; padding: 7px 10px; font-size: 14px; }
.dp-good img { width: 24px; }
.sentglow.deepcur { background: rgba(34, 181, 115, .10); box-shadow: 0 0 0 3px rgba(34, 181, 115, .65); animation: deepglow 2.2s ease-in-out infinite; }
@keyframes deepglow { 50% { box-shadow: 0 0 0 5px rgba(34, 181, 115, .3); } }
.reader.night .deep-panel { background: #221d33; color: #eee8ff; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.reader.night .dp-head, .reader.night .dp-foot { border-color: #342c4d; }
.reader.night .dp-in { background: #1a1628; border-color: #3a3156; color: #fff; }
.reader.night .dp-row { background: #2c2640; }
.reader.night .dp-row.ref { background: #1d3a2e; }
.reader.night .dp-errs li { background: #3a2830; }
.reader.night .dp-good { background: #3b3320; }
.reader.night .dp-ring span { background: #221d33; }
.reader.night .dp-chips button:not(.great):not(.good):not(.ok):not(.low) { background: #2c2640; border-color: #3a3156; color: #cfc8ee; }
@media (max-width: 560px) {
  .dp-en { font-size: 18px; }
  .dp-foot .push { width: 100%; }
}
.reader.land .dp-head { padding: 8px 10px 6px; }
.reader.land .dp-body { padding: 8px 10px 4px; }
.reader.land .dp-en { font-size: 17px; margin-bottom: 6px; }
.reader.land .dp-in { font-size: 16px; min-height: 60px; }
.reader.land .dp-foot { padding: 6px 10px 8px; }
.reader.land .dp-foot .push { width: 100%; }

/* 书详情 · 精读说明 */
.deep-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; background: var(--mint-l); border-radius: 16px; padding: 10px 14px; font-size: 14px; color: var(--ink-2); max-width: 560px; }
.deep-tip img { width: 26px; flex: none; }
.deep-tip b { color: var(--mint-d); }
/* 读完页 · 精读成绩 */
.deep-sum { display: flex; gap: 18px; align-items: center; justify-content: center; margin: 14px auto 4px; background: #fff; border-radius: 24px; padding: 14px 20px; max-width: 560px; box-shadow: var(--shadow-sm); text-align: left; }
.deep-sum b { font-size: 18px; }
.deep-sum p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.deep-low { max-width: 640px; margin: 16px auto 0; background: #fff; border-radius: 24px; padding: 12px 18px; box-shadow: var(--shadow-sm); text-align: left; }
.deep-low .dl-row { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.deep-low .en { font-family: var(--font-read); font-size: 17px; }
.deep-low .zh { color: var(--mint-d); font-size: 15px; margin-top: 2px; }
.deep-low .mine { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
/* 分数徽章 */
.sc { flex: none; min-width: 42px; height: 30px; padding: 0 8px; border-radius: 10px; display: inline-grid; place-items: center; font-weight: 700; font-size: 15px; }
.sc.sm { min-width: 36px; height: 26px; font-size: 14px; }
.sc.great { background: var(--mint-l); color: var(--mint-d); }
.sc.good { background: var(--sky-l); color: var(--sky-d); }
.sc.ok { background: var(--sun-l); color: #8a6100; }
.sc.low { background: #ffe3ea; color: var(--berry-d); }

/* 家长 · 精读分析 */
.deep-link { display: flex; align-items: center; gap: 14px; }
.deep-link > img { width: 48px; }
.deep-link b { font-size: 19px; display: block; }
.deep-link small { color: var(--ink-2); font-size: 14px; }
.deepstats .kpis { margin-bottom: 4px; }
.tbars { display: grid; gap: 9px; margin-top: 14px; }
.tbar { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: 10px; font-size: 14px; }
.tbar .nm { color: var(--ink-2); text-align: right; }
.tbar i { height: 14px; border-radius: 99px; background: #f3eefb; overflow: hidden; }
.tbar b { display: block; height: 100%; border-radius: 99px; background: var(--grape); animation: grow2 .8s var(--ease) both; transform-origin: left; }
@keyframes grow2 { from { transform: scaleX(0); } }
.tbar .n { font-weight: 700; }
.tbar .n small { color: var(--ink-3); font-weight: 500; margin-left: 5px; font-size: 12px; }
.tbar b.t-word { background: var(--brand); } .tbar b.t-phrase { background: var(--sun); } .tbar b.t-structure { background: var(--grape); }
.tbar b.t-tense { background: var(--sky); } .tbar b.t-number { background: var(--mint); } .tbar b.t-pronoun { background: var(--berry); }
.tbar b.t-negation { background: #c026d3; } .tbar b.t-missing { background: #ff9f43; } .tbar b.t-extra { background: #a1887f; }
.tbar b.t-unrelated { background: #9aa0b4; } .tbar b.t-blank { background: #cbc5de; } .tbar b.t-other { background: #b8b2cf; }
.ai-card .ai-text { white-space: pre-wrap; line-height: 1.75; font-size: 15px; background: var(--grape-l); border-radius: 16px; padding: 14px 16px; margin: 12px 0; }
.ai-card .err, .deepstats .err { color: var(--berry-d); }
.att { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.att:first-of-type { border-top: 0; }
.att-b { flex: 1; min-width: 0; }
.att .en { font-family: var(--font-read); font-size: 17px; margin-bottom: 4px; }
.att .kv { display: flex; gap: 8px; font-size: 15px; line-height: 1.5; }
.att .kv small { flex: none; color: var(--ink-3); font-size: 12px; margin-top: 3px; width: 28px; }
.att .kv .empty { color: var(--ink-3); }
.att .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.echip { display: inline-flex; align-items: center; gap: 5px; background: #fff6f0; border-radius: 10px; padding: 2px 8px 2px 3px; font-size: 13px; }
.echip i { font-style: normal; background: var(--brand); color: #fff; border-radius: 7px; padding: 1px 6px; font-size: 12px; font-weight: 700; }
.att .fb { color: var(--ink-2); font-size: 13px; margin-top: 6px; }
.att .meta { color: var(--ink-3); font-size: 12px; margin-top: 4px; }
.dbook { border-top: 1px solid var(--line); }
.dbook:first-of-type { border-top: 0; margin-top: 8px; }
.dbook-h { width: 100%; display: flex; gap: 12px; align-items: center; background: none; border: 0; padding: 12px 2px; cursor: pointer; text-align: left; }
.dbook-h .grow { flex: 1; min-width: 0; }
.dbook-h b { display: block; font-size: 16px; }
.dbook-h small { color: var(--ink-3); font-size: 13px; }
.dbook-h svg { color: var(--ink-3); transition: transform .25s; }
.dbook-b { padding: 0 0 8px 54px; }
@media (max-width: 560px) { .dbook-b { padding-left: 0; } .tbar { grid-template-columns: 76px 1fr 56px; } }

.deepstats .tbl .nw { white-space: nowrap; }

/* ------------------------------------------------------------------ 帮我挑书（platform docs/77） */
.pick-entry { display: flex; align-items: center; gap: 16px; margin: 18px 0; background: linear-gradient(135deg, #e6fbf1, #fff 70%); }
.pick-entry .big { width: 64px; height: 64px; flex: none; animation: floaty 5s ease-in-out infinite; }
.pick-entry h3 { margin: 0 0 4px; }
.pick-entry .sub b { color: var(--mint-d); font-size: 20px; }
.shelf-pick { flex: none; }
.err-line { background: #fff0f3; color: var(--berry-d); border-radius: 12px; padding: 8px 12px; font-size: 14px; margin: 8px 0; }
.detail .intro { margin: 4px 0 14px; line-height: 1.7; color: var(--ink-2); }
.detail .intro .tag { background: var(--mint-l); color: var(--mint-d); margin-right: 4px; }

.pick-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pick-head h1 { margin: 0; font-size: 26px; display: flex; align-items: center; gap: 8px; }
.pick-head h1 .emoji { width: 34px; height: 34px; }
.pick-head .sync { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; }
.zone-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.zone-tabs button { --zc: var(--mint); flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 18px;
  border: 2px solid transparent; background: var(--card); box-shadow: var(--shadow-sm); font: inherit; font-size: 16px; color: var(--ink); cursor: pointer; transition: transform .2s var(--spring); }
.zone-tabs button img { width: 28px; height: 28px; }
.zone-tabs button i { font-style: normal; font-weight: 700; color: var(--zc); background: color-mix(in srgb, var(--zc) 12%, #fff); border-radius: 999px; padding: 1px 9px; font-size: 14px; }
.zone-tabs button.on { border-color: var(--zc); background: color-mix(in srgb, var(--zc) 10%, #fff); transform: translateY(-2px); }
.zone-desc { font-size: 14px; margin: 2px 4px 10px; }
.pick-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.pick-filters select, .pick-filters .q { font: inherit; font-size: 15px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); min-height: 42px; }
.pick-filters .q { flex: 1 1 140px; min-width: 120px; }
.pick-filters .unread { display: flex; align-items: center; gap: 6px; font-size: 15px; padding: 0 6px; min-height: 42px; }
.pick-filters .unread input { width: 18px; height: 18px; accent-color: var(--mint); }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 16px; }
.pick-card { display: flex; gap: 16px; background: var(--card); border-radius: 22px; padding: 16px; box-shadow: var(--shadow-sm); animation: pickIn .35s var(--ease) both; }
.pick-card.read { opacity: .78; }
.pc-cover { flex: none; width: 116px; align-self: flex-start; border: 0; padding: 0; background: none; cursor: pointer; }
.pc-cover img { width: 100%; border-radius: 12px; box-shadow: 0 8px 18px -8px rgba(43, 36, 82, .45); display: block; }
.pc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-top { display: flex; gap: 10px; align-items: flex-start; }
.pc-top .t { font-size: 19px; cursor: pointer; }
.pc-top .tz { color: var(--ink-2); font-size: 15px; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pc-tags .tag { font-size: 12px; padding: 2px 8px; }
.pc-tags .tag.cat { background: var(--mint-l); color: var(--mint-d); }
.pc-tags .tag.done { background: var(--sky-l); color: var(--sky-d); }
.pc-ring { --p: 90; --c: var(--mint); width: 62px; height: 62px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), #ece6f3 0); }
.pc-ring span { width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center; align-content: center; font-weight: 700; font-size: 15px; line-height: 1; }
.pc-ring small { font-size: 10px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.pc-intro { margin: 0; color: var(--ink-2); line-height: 1.6; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.pc-intro.open { -webkit-line-clamp: unset; }
.pc-new { font-size: 15px; }
.nw-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.nw { display: inline-flex; align-items: stretch; border-radius: 12px; overflow: hidden; background: var(--sun-l); box-shadow: inset 0 0 0 1.5px #f5dd9a; }
.nw .w { border: 0; background: none; font: inherit; font-family: var(--font-read); font-size: 16px; color: var(--ink); padding: 5px 4px 5px 10px; cursor: pointer; display: flex; align-items: baseline; gap: 5px; }
.nw span.w { cursor: default; padding-right: 8px; }
.nw .w small { font-family: var(--font-ui); font-size: 12px; color: var(--ink-2); max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw .ok { border: 0; background: rgba(34, 181, 115, .14); color: var(--mint-d); font-weight: 700; font-size: 15px; min-width: 36px; cursor: pointer; }
.nw .ok:active { background: var(--mint); color: #fff; }
.nw .ok.undo { background: #ffe3ea; color: var(--berry-d); font-size: 13px; padding: 0 10px; }
.pc-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pick-more { text-align: center; padding: 18px 0 6px; grid-column: 1 / -1; }
.pick-note { font-size: 13px; margin: 18px 4px 90px; line-height: 1.6; }
.feel { margin-top: 16px; }
.feel button { font: inherit; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; margin: 0 5px; padding: 8px 16px; border-radius: 16px; border: 2px solid var(--line); background: #fff; cursor: pointer; }
.feel button img { width: 28px; height: 28px; }
.feel button:active { transform: scale(.95); }
.rc-card h3 { display: flex; align-items: center; gap: 8px; }
.rc-card h3 .emoji { width: 28px; height: 28px; }
.rc-card h3 .more { margin-left: auto; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--sky-d); }
.rc-grid { display: grid; gap: 8px; margin-top: 12px; }
.rc-grid > div { --zc: var(--mint); border-left: 5px solid var(--zc); background: var(--paper); border-radius: 10px; padding: 8px 12px; font-size: 15px; line-height: 2; }
.rc-grid b { color: var(--zc); margin-right: 10px; }
.rc-grid input { width: 64px; font: inherit; padding: 2px 6px; border-radius: 8px; border: 1.5px solid var(--line); text-align: center; }
.rc-sub { margin-top: 16px; font-size: 14px; }
@media (max-width: 560px) {
  .pick-list { grid-template-columns: 1fr; }
  .pick-card { padding: 12px; gap: 12px; }
  .pc-cover { width: 86px; }
  .pick-head h1 { font-size: 21px; }
  .pick-head .src { display: none; }
  .pick-head .sync .faint { display: none; }
  .pick-filters select { flex: 1 1 40%; }
  .pc-top .t { font-size: 17px; }
}
@keyframes pickIn { from { opacity: 0; transform: translateY(10px); } }
/* 家长中心：孩子那一行展开的换头像表；添加新孩子的小标题（和上面的换头像分开，别让家长以为下面那排是改现有孩子的） */
.kidrow { flex-wrap: wrap; }
.avpick.kid-av { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; margin-top: 4px; border-top: 1px dashed #e4dcf3; }
.avpick.kid-av button { width: 46px; height: 46px; border-radius: 50%; border: 2px solid transparent; background: #f5f1ff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.avpick.kid-av button.on { border-color: var(--grape); background: #fff; box-shadow: 0 4px 12px -4px rgba(124, 92, 255, .5); }
.avpick.kid-av img { width: 32px; height: 32px; }

.kidrow .kact { display: flex; gap: 8px; flex: none; }
@media (max-width: 560px) { .kidrow .kact { flex-basis: 100%; padding-left: 58px; } }
.deep-ok { display: inline-block; padding: 1px 8px; border-radius: 8px; background: #e3f7ec; color: #1a8a55; font-weight: 700; font-size: 13px; }
/* 门户的照片头像（qiqi / xixi 那种，kidAv 给的是 COS portal-design/v1/img/）：铺满圆圈，表情头像照旧留边 */
img[src*="/portal-design/v1/img/"] { border-radius: 50%; object-fit: cover; }
.av > img[src*="/portal-design/v1/img/"] { width: 100%; height: 100%; }