/* ==========================================================================
   雨桐·爱字帖 · 手机站（m.aizitie.cn）
   风格：儿童卡通 · 柔和粉紫 · 大圆角卡片
   与视觉稿 v1 一致（大李已确认）
   ========================================================================== */

:root{
  --bg:      #F6F4FC;
  --card:    #FFFFFF;
  --ink:     #38345C;
  --ink2:    #8884A9;
  --ink3:    #B2AECC;
  --line:    #F0EDFA;
  --pri-1:   #A9A2F5;
  --pri-2:   #8FC8F5;
  --pink:    #D4578C;
  --pink-s:  #FDE9F2;
  --blue:    #4A8FD8;
  --blue-s:  #E6F0FD;
  --amber:   #C99A3C;
  --amber-s: #FFF4DC;
  --green:   #4CA97C;
  --green-s: #E4F6EC;
  --r:       20px;
  --sh:      0 3px 14px rgba(122,112,180,.09);
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-poem: "Kaiti SC", "KaiTi", "STKaiti", "Songti SC", serif;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html, body{ height:100%; }

body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  font-size:0.938rem;
  -webkit-font-smoothing:antialiased;
}

a{ text-decoration:none; color:inherit; }
button{ font-family:var(--font-sans); }

/* ============================ 应用外壳 ============================ */
.app{
  display:flex;
  height:100vh;
  height:-webkit-fill-available;   /* 旧 iOS Safari：100vh 会把折叠的地址栏高度算进去导致整页偏高、底部被裁 */
  height:100dvh;                   /* 现代 iOS Safari(15.4+) 用动态视口高度，最精确 */
  overflow:hidden;
}

/* ---------------- 左侧竖向导航（13 个模块） ---------------- */
.rail{
  width:108px; flex:0 0 108px;
  background:#FFF;
  border-right:1px solid var(--line);
  /* 顶部也纳入安全区，避免第一格图标被刘海/灵动岛的状态栏遮住 */
  padding:calc(10px + env(safe-area-inset-top)) 7px calc(10px + env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ width:0; }
.rail-list{ display:flex; flex-direction:column; gap:2px; }
.rail-item{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 2px; border-radius:14px;
  color:var(--ink2); transition:.18s;
}
.rail-item .ri{ font-size:1.625rem; line-height:1.15; }
.rail-item .rn{ font-size:1rem; letter-spacing:.3px; font-weight:700; }
.rail-item.is-on{
  background:linear-gradient(150deg,#ADA6F6,#93CBF6);
  color:#FFF;
  box-shadow:0 4px 12px rgba(150,140,235,.35);
}

/* ---------------- 主区域 ---------------- */
.main{
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  background:var(--bg);
  position:relative;
}

/* 顶部栏 */
.topbar{
  /* 关键：用 min-height 而非固定 height。box-sizing:border-box 下若写死 height:54px，
     顶部安全区 padding(刘海/灵动岛可达47-59px)会把内容区压到仅几像素，导致
     顶栏昵称/按钮挤作一团——iPhone Safari 排版乱的元凶之一。
     min-height 让总高成为「安全区 + 内容」之和，内容永远完整可见。 */
  min-height:54px; flex:none;
  display:flex; align-items:center; gap:8px;
  padding:env(safe-area-inset-top) 12px 0;
  background:#FFF; border-bottom:1px solid var(--line);
}
.who{ display:flex; align-items:center; gap:6px; min-width:0; flex:1; }
.who-av{ font-size:1.062rem; }
.who-nm{
  font-size:0.875rem; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tools{ display:flex; align-items:center; gap:7px; }
.tb{
  width:33px; height:33px; border-radius:50%; border:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.938rem; cursor:pointer; background:transparent;
}
.tb-sound{ background:#FFE9F2; }
.tb-star{ background:#FFF3D6; gap:1px; width:auto; padding:0 9px; border-radius:17px; }
.ts-ico{ font-size:0.812rem; color:#F5B93C; }
.ts-num{ font-size:0.812rem; font-weight:600; color:#C99A3C; }
.tb-me{ background:#E3EEFD; }

/* 滚动内容 */
.scroll{
  flex:1; padding:12px 12px calc(76px + env(safe-area-inset-bottom));
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* ============================ 通用卡片 ============================ */
.card{
  background:var(--card); border-radius:var(--r);
  padding:14px; margin-bottom:12px; box-shadow:var(--sh);
}
.sect{
  display:flex; align-items:center; gap:6px;
  font-size:0.938rem; font-weight:600; color:var(--ink);
}
.sect-i{ font-size:1rem; }
.sect-r{
  margin-left:auto; font-style:normal;
  font-size:0.719rem; font-weight:400; color:var(--ink2);
}
.sect-r-blue{ color:var(--blue); font-weight:600; }

/* ---------------- 首页 · 成长阶段 ---------------- */
.stage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.stage{
  display:block; text-decoration:none;
  border-radius:16px; padding:11px 8px; text-align:center;
  background:linear-gradient(155deg,var(--g1),var(--g2));
  color:#3B3560;
}
.stage .st-e{ display:block; font-size:1.375rem; line-height:1.2; }
.stage b{ display:block; font-size:0.875rem; font-weight:700; margin-top:2px; }
.stage i{ display:block; font-size:0.656rem; font-style:normal; opacity:.72; margin-top:1px; }
.stage-note{ font-size:0.719rem; color:var(--ink2); line-height:1.65; margin-top:11px; }
.stage-note b{ color:var(--pri-1); }

/* ---------------- 标签 ---------------- */
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.chips:first-of-type{ margin-top:12px; }
.chip{ font-size:0.688rem; padding:6px 11px; border-radius:20px; white-space:nowrap; }
.chip-b{ background:var(--blue-s);  color:var(--blue); }
.chip-p{ background:var(--pink-s);  color:var(--pink); }
.chip-y{ background:var(--amber-s); color:var(--amber); }
.chip-g{ background:var(--green-s); color:var(--green); }

/* ---------------- 今日计划 ---------------- */
/* 本周打卡：7 天等分一行，窄屏也不会换行 */
.week-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:12px; }
.week-row .chip{ text-align:center; padding:9px 0; }

.bar{ height:6px; border-radius:4px; background:#F1EFF9; overflow:hidden; margin-top:11px; }
.bar i{ display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,#ADA6F6,#93CBF6); transition:width .35s; }

.plan{ list-style:none; margin-top:4px; }
.plan li{ display:flex; align-items:center; gap:10px; padding:9px 0; }
.plan li + li{ border-top:1px solid var(--line); }
.pl-ring{
  width:20px; height:20px; flex:0 0 20px; border-radius:50%;
  border:2px solid #E2DEF2; transition:.2s; cursor:pointer;
}
.pl-ring.is-done{
  border-color:transparent;
  background:linear-gradient(150deg,#ADA6F6,#93CBF6);
  position:relative;
}
.pl-ring.is-done::after{
  content:"✓"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.688rem; color:#FFF; font-weight:700;
}
.pl-i{ font-size:1.062rem; width:24px; text-align:center; flex:0 0 24px; }
.pl-t{ display:flex; flex-direction:column; min-width:0; }
.pl-t b{ font-size:0.812rem; font-weight:600; color:var(--ink); }
.pl-t i{
  font-size:0.688rem; font-style:normal; color:var(--ink3); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------------- 古诗 ---------------- */
.segs{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.seg{
  font-size:0.75rem; padding:6px 15px; border-radius:18px;
  background:#F3F1FB; color:var(--ink2); cursor:pointer;
}
.seg.is-on{
  background:linear-gradient(135deg,#ADA6F6,#93CBF6);
  color:#FFF; box-shadow:0 3px 10px rgba(150,140,235,.3);
}
.weekhot{
  display:flex; align-items:center; gap:10px;
  background:#FDF7E9; border-radius:14px; padding:10px; margin-top:11px;
}
.wh-i{ font-size:1.125rem; }
.wh-t{ display:flex; flex-direction:column; min-width:0; }
.wh-t b{ font-size:0.781rem; font-weight:600; color:#8A6A2C; }
.wh-t i{ font-size:0.688rem; font-style:normal; color:#B09257; margin-top:1px; }
.wh-go{
  margin-left:auto; flex:0 0 auto;
  background:linear-gradient(135deg,#FFC2DA,#F79CBE); color:#FFF;
  font-size:0.688rem; padding:6px 12px; border-radius:14px;
}

.poem{
  background:#FFF; border-radius:var(--r); padding:14px;
  margin-bottom:12px; box-shadow:var(--sh);
}
.poem-hd{ display:flex; align-items:center; }
.poem-hd b{ font-size:1.062rem; font-weight:700; color:var(--ink); }
.lv{ margin-left:auto; font-style:normal; font-size:0.656rem; padding:3px 10px; border-radius:12px; }
.lv-1{ background:#FFE4EF; color:var(--pink); }
.lv-2{ background:#E4EEFF; color:var(--blue); }
.poem-meta{ font-size:0.719rem; color:var(--ink3); margin:4px 0 9px; }
.poem-body{
  font-family:var(--font-poem);
  font-size:1.031rem; line-height:1.95; color:#2E2A52; letter-spacing:1.5px;
}
.poem-ft{ display:flex; gap:7px; margin-top:11px; }
.mini{ font-size:0.688rem; padding:5px 11px; border-radius:12px; background:#F5F3FC; color:var(--ink2); cursor:pointer; }
.mini-play{ background:var(--pink-s); color:var(--pink); }

/* ---------------- 识字 ---------------- */
.today{
  display:flex; align-items:center; gap:10px;
  background:#FDF7E9; border-radius:14px; padding:10px; margin-top:12px;
}
.td-i{ font-size:1.062rem; }
.td-t{ display:flex; flex-direction:column; min-width:0; flex:1; }
.td-t b{ font-size:0.781rem; font-weight:600; color:#8A6A2C; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.td-t i{ font-size:0.656rem; font-style:normal; color:#B09257; margin-top:1px; }
.td-badge{
  margin-left:auto; flex:0 0 auto; font-style:normal; white-space:nowrap;
  background:#FFE4EF; color:var(--pink);
  font-size:0.688rem; padding:5px 10px; border-radius:12px;
}
.tip-box{
  font-size:0.688rem; color:var(--ink2); line-height:1.7;
  background:#FAF9FE; border:1px dashed #DCD7F2;
  border-radius:12px; padding:10px; margin-top:11px;
}
.zi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.zi{
  position:relative; background:#FFF; border-radius:var(--r);
  padding:26px 11px 14px; text-align:center;
  border:2px solid #FCE3ED; box-shadow:var(--sh);
}
.zi-tag{
  position:absolute; top:10px; left:10px;
  background:#FFE4EF; color:var(--pink);
  font-size:0.625rem; padding:3px 9px; border-radius:10px;
}
.zi-face{ display:block; font-size:2rem; line-height:40px; height:40px; }
.zi-char{
  font-size:3.25rem; font-weight:700; line-height:1.15;
  background:linear-gradient(160deg,#8E82E8,#B98FE0);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.zi-py{ font-size:0.812rem; color:var(--ink2); margin-top:1px; }
.zi-play{
  width:100%; margin:10px 0 2px; padding:8px;
  border:0; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg,#ADA6F6,#93CBF6);
  color:#FFF; font-size:0.75rem; font-family:var(--font-sans);
  box-shadow:0 3px 10px rgba(150,140,235,.3);
}
.zi-sub{ font-size:0.656rem; color:var(--ink3); margin-top:10px; }
.zi-words{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:6px; }
.zi-words span{ font-size:0.688rem; padding:5px 10px; border-radius:12px; background:var(--pink-s); color:var(--pink); }
.zi-note{ font-size:0.688rem; color:var(--ink); margin-top:5px; }

/* ---------------- 字母 / 单词 ---------------- */
.abc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.abc{
  background:#FFF; border-radius:var(--r); padding:15px 10px 13px;
  text-align:center; box-shadow:var(--sh);
}
.ab-big{ font-size:1.812rem; font-weight:700; color:#7B6FD0; line-height:1.2; }
.ab-ipa{ font-size:0.719rem; color:var(--ink3); margin-top:2px; }
.ab-w{ font-size:0.844rem; color:var(--blue); margin-top:3px; }
.ab-pic{ font-size:1.812rem; line-height:1.2; margin-top:5px; }

/* ---------------- 算术乐园 ---------------- */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.stat{
  background:#FFF; border-radius:16px; padding:13px 10px;
  text-align:center; box-shadow:var(--sh);
}
.stat b{ display:block; font-size:1.562rem; font-weight:700; color:#8A7EE8; line-height:1.15; }
.stat i{ display:block; font-size:0.688rem; font-style:normal; color:var(--ink3); margin-top:4px; }
.quiz{ background:#FFF; border-radius:var(--r); padding:20px 14px 14px; box-shadow:var(--sh); }
.quiz-q{
  text-align:center; font-size:2.188rem; font-weight:700;
  color:#6E63C8; letter-spacing:2px; line-height:1.2;
}
.quiz-q em{ font-style:normal; color:#BDB4ED; }
.opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.opt{
  display:flex; align-items:center; justify-content:center; height:58px;
  border-radius:16px; font-size:1.438rem; font-weight:700; color:#6E63C8;
  background:linear-gradient(150deg,#EFEDFB,#E3EEFB);
  cursor:pointer; transition:.16s;
}
.opt.is-ok{ background:linear-gradient(150deg,#B6E7C9,#8FD9AE); color:#1F6B3A; }
.opt.is-no{ background:linear-gradient(150deg,#F7C6D6,#F0A7C0); color:#A32A5B; }
.quiz-btns{ display:flex; gap:10px; margin-top:16px; }
.qbtn{
  flex:1; height:44px; border:0; border-radius:16px; cursor:pointer;
  font-size:0.875rem; font-family:var(--font-sans);
  background:#F4F2FC; color:var(--ink2);
}
.qbtn-p{
  background:linear-gradient(135deg,#ADA6F6,#93CBF6); color:#FFF;
  box-shadow:0 3px 12px rgba(150,140,235,.32);
}

/* ---------------- 通用列表 / 空态 ---------------- */
.list{ list-style:none; }
.list li{ display:flex; align-items:center; gap:10px; padding:11px 0; }
.list li + li{ border-top:1px solid var(--line); }
.li-i{ font-size:1.125rem; width:26px; text-align:center; flex:0 0 26px; }
.li-t{ display:flex; flex-direction:column; min-width:0; flex:1; }
.li-t b{ font-size:0.844rem; font-weight:600; color:var(--ink); }
.li-t i{ font-size:0.688rem; font-style:normal; color:var(--ink3); margin-top:1px; }
.li-go{ color:var(--ink3); font-size:0.938rem; }
.li-cnt{ font-size:0.719rem; color:var(--ink2); background:#F5F3FC; padding:3px 10px; border-radius:12px; }

.empty{
  text-align:center; padding:26px 14px; color:var(--ink2); font-size:0.781rem;
}
.empty .em-i{ display:block; font-size:2.125rem; margin-bottom:8px; }

/* ---------------- 设置页 ---------------- */
.set-row{ display:flex; align-items:center; gap:10px; padding:12px 0; }
.set-row + .set-row{ border-top:1px solid var(--line); }
.set-row b{ font-size:0.844rem; font-weight:600; }
.set-row i{ font-size:0.688rem; font-style:normal; color:var(--ink3); display:block; margin-top:2px; }
.set-row .sr-v{ margin-left:auto; font-size:0.75rem; color:var(--ink2); }
.switch{
  margin-left:auto; width:44px; height:25px; border-radius:14px;
  background:#E4E0F2; position:relative; flex:0 0 44px; cursor:pointer; transition:.2s;
}
.switch::after{
  content:""; position:absolute; top:3px; left:3px;
  width:19px; height:19px; border-radius:50%; background:#FFF;
  box-shadow:0 1px 3px rgba(0,0,0,.16); transition:.2s;
}
.switch.is-on{ background:linear-gradient(135deg,#ADA6F6,#93CBF6); }
.switch.is-on::after{ left:22px; }
.btn-line{
  display:block; width:100%; height:44px; margin-top:12px;
  border:1.5px solid #E4E0F2; border-radius:16px; background:#FFF;
  font-size:0.875rem; color:var(--ink2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.btn-line.danger{ color:#C43D6B; border-color:#F6D7E3; }

/* ---------------- 悬浮宠物 ---------------- */
.pet-fab{
  position:absolute; right:14px; bottom:calc(20px + env(safe-area-inset-bottom));
  width:48px; height:48px; border-radius:50%;
  background:#FFF; box-shadow:0 4px 16px rgba(122,112,180,.18);
  display:flex; align-items:center; justify-content:center;
  font-size:1.562rem; cursor:pointer;
}

/* ---------------- toast ---------------- */
.toast{
  position:fixed; left:50%; bottom:84px; transform:translate(-50%,14px);
  background:rgba(56,52,92,.9); color:#FFF;
  font-size:0.781rem; padding:9px 18px; border-radius:20px;
  opacity:0; pointer-events:none; transition:.24s; z-index:99;
  max-width:80vw; text-align:center;
}
.toast.is-show{ opacity:1; transform:translate(-50%,0); }

/* ---------------- 弹出卡（字卡 / 词语卡 / 单词卡） ---------------- */
.mcard-mask{
  position:fixed; inset:0; z-index:88;
  background:rgba(44,40,80,.42);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:.22s;
}
.mcard-mask.is-show{ opacity:1; pointer-events:auto; }
.mcard{
  width:100%; max-width:430px;
  background:#FFF; border-radius:22px 22px 0 0;
  padding:28px 22px calc(28px + env(safe-area-inset-bottom));
  position:relative; text-align:center;
  transform:translateY(46px); transition:.26s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 -8px 30px rgba(60,50,120,.18);
}
.mcard-mask.is-show .mcard{ transform:translateY(0); }
.mc-x{
  position:absolute; top:10px; right:12px;
  width:34px; height:34px; border:0; border-radius:50%;
  background:#F3F1FA; color:var(--ink2); font-size:0.938rem; cursor:pointer;
}
.mc-zbox{ width:150px; height:150px; margin:2px auto 6px; }
.mc-zbox svg{ width:100%; height:100%; }
.mc-py{ font-size:1.062rem; color:var(--blue); font-weight:600; letter-spacing:1px; margin-top:2px; }
.mc-stroke{
  display:inline-block; font-style:normal; font-size:0.719rem; color:var(--ink3);
  background:#F3F1FA; border-radius:10px; padding:2px 10px; margin-top:7px;
}
.mc-w{ display:block; font-size:1.875rem; font-weight:700; color:var(--ink); line-height:1.25; }
.mc-ipa{ display:block; font-size:0.938rem; color:var(--ink3); margin-top:5px; }
.mc-syl{
  display:inline-block; font-size:0.781rem; color:#7B6FD0; background:#F1EEFC;
  border-radius:10px; padding:2px 10px; margin-top:9px;
}
.mc-cn{ display:block; font-size:1.031rem; color:var(--ink2); margin-top:10px; }
.mc-prow{ display:flex; justify-content:center; gap:12px; margin-top:16px; }
.mc-play{
  border:0; cursor:pointer;
  background:linear-gradient(150deg,#ADA6F6,#93CBF6); color:#FFF;
  font-size:0.938rem; font-weight:600; padding:11px 26px; border-radius:24px;
  box-shadow:0 6px 16px rgba(150,140,235,.35);
}
.mc-play:active{ transform:scale(.96); }
.mc-play-uk{ background:linear-gradient(150deg,#93CBD8,#6FB7C9); box-shadow:0 6px 16px rgba(111,183,201,.35); }
.mc-play-uk:active{ transform:scale(.96); }
.mc-snd{
  font-style:normal; font-size:0.625rem; font-weight:700; color:#8E82E8;
  background:#EFEBFC; border-radius:6px; padding:1px 6px; margin-left:7px;
  display:inline-block; vertical-align:middle; cursor:pointer; user-select:none;
}
.mc-snd.uk{ color:#2E7D94; background:#E4F2F6; }
.mc-snd:active{ opacity:.6; }
.mc-tip{ display:block; font-size:0.656rem; color:var(--ink3); margin-top:9px; }

/* ---------------- 数独 ---------------- */
.sudoku{
  display:grid; gap:0; margin:12px auto 10px; max-width:340px;
  border:2px solid #8E82E8; border-radius:10px; overflow:hidden;
  background:#8E82E8;
}
.suc{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:#FFF; font-size:1.062rem; font-weight:600; color:var(--ink);
  border-right:1px solid #E6E2F5; border-bottom:1px solid #E6E2F5;
  cursor:pointer; user-select:none;
}
.suc.b-r{ border-right:2px solid #8E82E8; }
.suc.b-b{ border-bottom:2px solid #8E82E8; }
.suc.is-given{ color:#6B6490; background:#F6F4FC; }
.suc.is-sel{ background:#E7E2FB; box-shadow:inset 0 0 0 2px #8E82E8; }
.su-pad{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:4px; }
.su-key{
  width:42px; height:42px; border-radius:12px; background:#FFF;
  box-shadow:var(--sh); display:flex; align-items:center; justify-content:center;
  font-size:1.125rem; font-weight:700; color:#7B6FD0; cursor:pointer;
}
.su-key:active{ background:#EFEBFC; }
.su-msg{ text-align:center; font-size:0.812rem; color:var(--ink2); margin-top:10px; }
.su-msg.is-ok{ color:#2E9E6B; font-weight:600; }
.su-msg.is-no{ color:#C43D6B; }

/* ---------------- 弹卡：对齐软件端的分区 ---------------- */
/* 字卡笔画动画（对齐软件端笔顺演示窗） */
.mc-zbox.is-anim .hzs{ opacity:0; }
.mc-zbox.is-anim .hzs.on{ opacity:1; animation:hzdraw .4s ease-out; }
@keyframes hzdraw{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
.mc-ctrl{ display:flex; justify-content:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.mc-cb{
  border:0; cursor:pointer; font-size:0.781rem; color:#4B4580;
  background:#F3F1FA; border-radius:14px; padding:7px 12px;
}
.mc-cb:active{ background:#E7E2FB; }
.mc-cb-p{ background:linear-gradient(150deg,#ADA6F6,#93CBF6); color:#FFF; }
.mc-st-tip{ font-size:0.719rem; color:var(--ink3); margin-top:7px; }

.mc-sub{ font-size:0.844rem; color:var(--ink2); margin-top:2px; }
.mc-sub b{ font-size:0.938rem; color:var(--ink); }
.mc-pys{ color:var(--blue); font-weight:600; letter-spacing:.5px; }
.mc-poly{
  display:block; font-size:0.719rem; color:#B4701A;
  background:#FFF6E8; border-radius:10px; padding:5px 10px; margin-top:8px;
}
.mc-sec{ text-align:left; margin-top:14px; }
.mc-sec h5{
  font-size:0.719rem; font-weight:700; color:var(--ink3); letter-spacing:.5px;
  margin-bottom:6px; padding-left:8px; border-left:3px solid var(--line2, #DDD8F0);
}
.mc-words{ display:flex; flex-wrap:wrap; gap:8px; }
.mc-wchip{
  background:#F5F3FC; border-radius:12px; padding:6px 12px;
  display:inline-flex; align-items:baseline; gap:5px; cursor:pointer;
}
.mc-wchip b{ font-size:0.938rem; color:var(--ink); font-weight:600; }
.mc-wchip i{ font-style:normal; font-size:0.719rem; color:var(--blue); }
.mc-unit{ font-size:0.719rem; color:var(--ink3); margin-top:3px; }
.mc-ipa-row{ display:flex; justify-content:center; gap:14px; margin-top:9px; }
.mc-ipa{ font-size:0.875rem; color:var(--ink2); display:inline-flex; align-items:center; gap:5px; }
.mc-tag{
  font-style:normal; font-size:0.656rem; color:#FFF; background:#8E82E8;
  border-radius:6px; padding:1px 5px;
}
.mc-tag.us{ background:#7FB6F0; }
.mc-phon{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.mc-pchunk{ display:inline-flex; flex-direction:column; align-items:center; background:#F5F3FC; border-radius:10px; padding:4px 8px; }
.mc-pchunk b{ font-size:0.875rem; color:#7B6FD0; font-weight:700; }
.mc-pchunk i{ font-style:normal; font-size:0.625rem; color:var(--ink3); }
.mc-pdot{ color:var(--ink3); font-size:0.75rem; }
.mc-irr{
  display:block; font-size:0.781rem; color:#B4701A; background:#FFF6E8;
  border-radius:10px; padding:6px 10px;
}
.mc-tr{ margin:0; padding-left:18px; }
.mc-tr li{ font-size:0.875rem; color:var(--ink); line-height:1.6; }
.mc-us, .mc-sns{ list-style:none; margin:0; padding:0; }
.mc-us li{ padding:5px 0; border-bottom:1px dashed #EFECF9; }
.mc-us li:last-child, .mc-sns li:last-child{ border-bottom:0; }
.mc-us b, .mc-sns b{ display:block; font-size:0.844rem; color:var(--ink); font-weight:600; }
.mc-us span, .mc-sns span{ display:block; font-size:0.75rem; color:var(--ink3); margin-top:1px; }
.mc-sns li{ padding:7px 10px; background:#FAF9FE; border-radius:12px; margin-bottom:6px; cursor:pointer; }
.mc-sns li:active{ background:#F1EEFC; }

/* ============================ 登录页 ============================ */
.login-body{
  overflow-y:auto;
  background:linear-gradient(170deg,#EFECFB 0%,#F6F4FC 42%,#EEF5FD 100%);
}
.login-wrap{
  min-height:100vh; min-height:-webkit-fill-available; min-height:100dvh;
  max-width:400px; margin:0 auto;
  /* 底部留白要够：env(safe-area-inset-bottom) 只算屏幕底部安全区，
     不含 iOS Safari 的底部工具栏(约44-50px)。多留 64px，邮箱折叠条和底部提示
     滚动到底后仍能完整显示在工具栏之上，不会被盖住/截断。 */
  padding:48px 22px calc(64px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  /* 不要在这里用 justify-content:center —— iOS Safari 在内容超高（微信卡片+展开邮箱）时，
     会把 login-head 向上挤出可视区、且无法滚回顶部（经典裁顶 bug），画面会“乱”。
     垂直居中挪到 .login-inner 上用 margin:auto 实现：内容少时居中，超高时可正常滚到顶。 */
}
.login-inner{ width:100%; margin:auto 0; }
.login-head{ text-align:center; margin-bottom:22px; }
.lg-mark{
  width:62px; height:62px; margin:0 auto 14px;
  border-radius:22px;
  background:linear-gradient(140deg,#8E82E8,#7FB6F0);
  color:#FFF; font-size:1.938rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(142,130,232,.34);
  font-family:var(--font-poem);
}
.login-head h1{ font-size:1.312rem; font-weight:700; color:var(--ink); letter-spacing:1px; }
.login-head p{ font-size:0.75rem; color:var(--ink2); margin-top:6px; }

.login-alert{
  background:#FDECEF; color:#C43D6B; border:1px solid #F7D6DF;
  font-size:0.781rem; padding:10px 13px; border-radius:14px; margin-bottom:12px;
}
.login-card{
  background:#FFF; border-radius:22px; padding:20px 18px;
  box-shadow:0 6px 26px rgba(122,112,180,.13);
}
.lg-field{ display:block; margin-bottom:14px; }
.lg-field span{
  display:block; font-size:0.75rem; font-weight:600; color:var(--ink2); margin-bottom:6px;
}
.lg-field input{
  width:100%; height:46px; border-radius:14px;
  border:1.5px solid #EDEAF8; background:#FAF9FE;
  padding:0 14px; font-size:1rem; color:var(--ink);
  /* font-size≥16px：否则 iOS Safari 聚焦输入框时会自动放大整个页面(item 变乱) */
  font-family:var(--font-sans); outline:none; transition:.18s;
}
.lg-field input:focus{ border-color:#B8B0F2; background:#FFF; box-shadow:0 0 0 3px rgba(169,162,245,.14); }
.lg-submit{
  width:100%; height:48px; margin-top:6px; border:0; border-radius:16px;
  background:linear-gradient(135deg,#8E82E8,#7FB6F0); color:#FFF;
  font-size:0.969rem; font-weight:700; letter-spacing:3px; cursor:pointer;
  box-shadow:0 5px 16px rgba(142,130,232,.32);
}
.lg-submit:active{ transform:translateY(1px); }
.login-foot{
  text-align:center; margin-top:18px; font-size:0.781rem; color:var(--ink2);
}
.login-foot a{ color:#7B6FD0; }
.login-foot .dot{ margin:0 8px; color:var(--ink3); }
.login-tip{
  margin-top:22px; text-align:center;
  font-size:0.688rem; color:var(--ink3); line-height:1.7;
}
.login-tip b{ color:var(--ink2); }

/* ==================== 登录页 · 微信口令优先卡片 ==================== */
.wx-card{
  background:#FFF; border-radius:22px; padding:20px 18px 15px; margin-bottom:14px;
  box-shadow:0 6px 26px rgba(122,112,180,.13);
  border:1.5px solid #E7F5EE;
}
.wx-grid{ display:flex; gap:14px; align-items:flex-start; }
.wx-qr{ flex:0 0 132px; text-align:center; }
.wx-qr img{
  width:132px; height:132px; border-radius:16px;
  border:1.5px solid #EDEAF8; background:#FFF; padding:8px; object-fit:contain;
  display:block; margin:0 auto;
}
.wx-qr-tip{ font-size:0.688rem; line-height:1.6; color:var(--ink2); margin-top:8px; }
.wx-qr-name{ font-size:0.688rem; color:var(--ink3); margin-top:2px; }
.wx-qr-fallback{
  display:inline-block; margin-top:8px; font-size:0.688rem; color:#0E9F4E;
  text-decoration:underline; text-underline-offset:2px;
}
.wx-side{ flex:1; min-width:0; align-self:center; }
.wx-title{ font-size:0.938rem; font-weight:700; color:var(--ink); margin-bottom:10px; }
.wx-code{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:linear-gradient(140deg,#EAF9F1,#EFF6FF);
  border:1.5px solid #CDEFDE; border-radius:14px; padding:10px 12px;
}
.wx-code b{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.875rem; letter-spacing:.14em; color:#0E9F4E;
  font-weight:700; user-select:all; -webkit-user-select:all; line-height:1.1;
}
.wx-copy{
  flex:none; border:1px solid #CDEFDE; background:#FFF; color:#0E9F4E;
  font-size:0.781rem; font-weight:600; border-radius:999px; padding:6px 12px; cursor:pointer;
}
.wx-copy:active{ background:#EAF9F1; }
.wx-left{ font-size:0.688rem; color:var(--ink2); margin-top:8px; line-height:1.6; }
.wx-left b{ font-variant-numeric:tabular-nums; min-width:1.4em; display:inline-block; text-align:center; color:#0E9F4E; font-weight:700; }
.wx-state{
  margin-top:10px; font-size:0.781rem; color:var(--ink2);
  display:flex; align-items:center; gap:6px;
}
.wxdot{ width:8px; height:8px; border-radius:50%; background:#F0B429; animation:wxdotp 1.1s infinite; flex:none; }
@keyframes wxdotp{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
.wx-steps{ list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px dashed #E8E4F6; }
.wx-steps li{
  position:relative; padding:0 0 8px 26px; font-size:0.781rem; color:var(--ink2);
  line-height:1.6; counter-increment:wxsteps; margin:0;
}
.wx-steps{ counter-reset:wxsteps; }
.wx-steps li::before{
  content:counter(wxsteps); position:absolute; left:0; top:1px;
  width:18px; height:18px; border-radius:50%; background:linear-gradient(140deg,#07C160,#3EC9A0);
  color:#FFF; font-size:0.688rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.wx-ops{
  margin-top:4px; text-align:center; font-size:0.781rem; color:#0E9F4E;
}
.wx-ops a{ color:#0E9F4E; }
.wx-ops .sep{ margin:0 10px; color:var(--ink3); opacity:.5; }

/* 非口令微信模式（官网扫码/网页授权）的入口按钮 */
.wx-go-site{
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:48px; margin-bottom:14px; border-radius:16px;
  background:linear-gradient(135deg,#07C160,#2BBE8E); color:#FFF;
  font-size:0.938rem; font-weight:700; box-shadow:0 5px 16px rgba(7,193,96,.3);
}

/* ==================== 登录页 · 邮箱折叠（微信优先时次要入口） ==================== */
.mail-fold{ margin-bottom:6px; }
.mail-fold summary{
  list-style:none; cursor:pointer; text-align:center;
  font-size:0.812rem; color:var(--ink2); padding:12px 0;
  -webkit-tap-highlight-color:transparent;
}
.mail-fold summary::-webkit-details-marker{ display:none; }
.mail-fold summary::after{ content:'▾'; margin-left:6px; color:var(--ink3); font-size:0.688rem; }
.mail-fold[open] summary::after{ content:'▴'; }
.mail-fold[open] summary{ color:#0E9F4E; }
.mail-fold .login-card{ margin-top:4px; }
.mail-fold .login-foot{ margin-top:16px; }

/* ============================ 小屏适配 ============================ */
@media (max-width:379px){
  .rail{ width:64px; flex:0 0 64px; padding:8px 5px calc(8px + env(safe-area-inset-bottom)); }
  .rail-item{ padding:6px 1px; border-radius:12px; }
  .rail-item .ri{ font-size:1.062rem; }
  .rail-item .rn{ font-size:0.562rem; }
  .scroll{ padding:10px 10px calc(74px + env(safe-area-inset-bottom)); }
  .zi-char{ font-size:2.875rem; }
}

/* ==========================================================================
   古诗词 · 库选择 / 列表 / 详情 / 搜索（v2.9.11 数据接入）
   ========================================================================== */

/* ---------------- 搜索框 ---------------- */
.searchbar{ display:flex; gap:8px; margin-top:11px; }
.searchbar input{
  flex:1; min-width:0; height:40px; border-radius:14px;
  border:1.5px solid #EDEAF8; background:#FAF9FE;
  padding:0 14px; font-size:0.844rem; color:var(--ink);
  font-family:var(--font-sans); outline:none;
}
.searchbar input:focus{ border-color:#B8B0F2; background:#FFF; }
.searchbar button{
  flex:0 0 auto; height:40px; padding:0 16px; border:0; border-radius:14px;
  background:linear-gradient(135deg,#ADA6F6,#93CBF6); color:#FFF;
  font-size:0.812rem; font-weight:600; cursor:pointer;
  box-shadow:0 3px 10px rgba(150,140,235,.28);
}

/* ---------------- 本周提示条 ---------------- */
.wk{
  display:flex; align-items:center; gap:10px;
  background:#F3F0FD; border-radius:14px; padding:10px; margin-top:11px;
}
.wk-i{ font-size:1.125rem; }
.wk-t{ display:flex; flex-direction:column; min-width:0; }
.wk-t b{ font-size:0.781rem; font-weight:600; color:#6C5FC7; }
.wk-t i{ font-size:0.656rem; font-style:normal; color:#8A84B8; margin-top:1px; }

/* ---------------- 诗库卡片 ---------------- */
.lib-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.lib{
  display:flex; flex-direction:column; align-items:flex-start;
  border-radius:16px; padding:12px;
  background:linear-gradient(155deg,#FFF, var(--lc, #E8E5F8) 220%);
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 2px 10px rgba(122,112,180,.08);
}
.lib-i{ font-size:1.312rem; line-height:1.2; }
.lib b{ font-size:0.844rem; font-weight:700; color:var(--ink); margin-top:4px; }
.lib i{ font-size:0.656rem; font-style:normal; color:var(--ink3); margin-top:2px; line-height:1.5; }
.lib-n{
  margin-top:8px; font-size:0.656rem;
  background:rgba(255,255,255,.78); color:var(--ink2);
  padding:3px 9px; border-radius:10px;
}
.li-link{ display:flex; align-items:center; gap:10px; width:100%; }

/* ---------------- 折叠分组 ---------------- */
.grp{
  background:#FFF; border-radius:var(--r); box-shadow:var(--sh);
  margin-bottom:10px; overflow:hidden;
}
.grp-sum{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:13px 14px; list-style:none; font-size:0.844rem;
}
.grp-sum::-webkit-details-marker{ display:none; }
.grp-sum::after{
  content:"›"; margin-left:6px; color:var(--ink3);
  font-size:1rem; transition:.2s; transform:rotate(90deg);
}
.grp[open] .grp-sum::after{ transform:rotate(-90deg); }
.grp-nm{ font-weight:600; color:var(--ink); }
.grp-cnt{
  margin-left:auto; font-size:0.688rem; color:var(--ink2);
  background:#F5F3FC; padding:3px 10px; border-radius:12px;
}
.grp-body{ padding:0 14px 12px; border-top:1px solid var(--line); }

/* ---------------- 列表项（诗） ---------------- */
.pit{ display:flex; align-items:center; gap:8px; padding:10px 0; }
.pit + .pit{ border-top:1px solid var(--line); }
.pit-main{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; text-decoration:none; }
.pit-t{ display:flex; flex-direction:column; min-width:0; flex:0 0 auto; max-width:44%; }
.pit-t b{ font-size:0.844rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pit-t i{ font-size:0.656rem; font-style:normal; color:var(--ink3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pit-b{
  flex:1; min-width:0; text-align:right;
  font-family:var(--font-poem); font-size:0.719rem; color:#9A94C4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pit-go{ flex:0 0 auto; color:var(--ink3); font-size:0.875rem; }

/* ---------------- 内联全文（日积月累 / 背诵默写） ---------------- */
.inline-poem{ padding:11px 0; }
.inline-poem + .inline-poem{ border-top:1px solid var(--line); }
.ip-hd{ display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.ip-hd b{ font-size:0.812rem; font-weight:600; color:var(--ink); }
.ip-hd i{ font-size:0.656rem; font-style:normal; color:var(--ink3); }

/* ---------------- 详情 ---------------- */
.pd-hd{ text-align:center; }
.pd-title{ font-family:var(--font-poem); font-size:1.5rem; font-weight:700; color:var(--ink); letter-spacing:2px; }
.pd-meta{ font-size:0.75rem; color:var(--ink3); margin-top:5px; }
.pd-tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:9px; }

.pd-tools{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:14px 0 4px; }
.pd-fav{ display:flex; justify-content:center; margin-top:10px; }
a.mini{ display:inline-block; text-decoration:none; }
.mini.is-on{ background:#EDE9FE; color:#6C5FC7; font-weight:600; }
.mini.is-dis{ opacity:.42; cursor:default; }

.pd-body{
  margin-top:14px; padding-top:13px; border-top:1px dashed #EDEAF8;
}
.pd-line{
  display:flex; flex-wrap:wrap; justify-content:center;
  margin-bottom:9px;
}
.pd-line-sm{ margin-bottom:6px; }
.pd-line-sm .pyz{ width:1.062rem; }
.pd-line-sm .pyz b{ font-size:1.062rem; }
.pd-line-sm .pyz i{ font-size:0.594rem; }

/* 纯文本一句一行（首页今日古诗） */
.pd-line-plain{ margin-bottom:2px; }
.pd-line-plain:last-child{ margin-bottom:0; }
.pl-c{ font-family:var(--font-poem); letter-spacing:1px; }

/* 古诗「一字一列」栅格：
   - 每个 .pyz 占固定一字宽（按汉字字号 em），整首诗的字全部落在同一套竖列上；
   - 拼音长短不同，只影响其在自己列内的居中位置，不再把汉字顶偏移；
   - 无拼音的字（标点/生僻字）用同宽空列占位，保证列对齐不跳位。
     标题 (.pd-title) 不含在这些列里，不受影响。 */
.pyz{
  display:inline-flex; flex-direction:column;
  width:1.375rem;               /* 与 .pyz b 的 font-size 相等 = 一个字宽 */
  align-items:center;           /* 字与拼音都按列中心对齐 */
  margin:0;
}
.pyz i{
  font-size:0.656rem; font-style:normal; color:var(--ink3);
  line-height:1.3; min-height:14px; white-space:nowrap;
  font-family:var(--font-sans); letter-spacing:0;
}
.pyz b{
  font-family:var(--font-poem);
  font-size:1.375rem; font-weight:400; line-height:1.3;
  color:#2E2A52; letter-spacing:0;
}
.pyz-none{ visibility:hidden; }   /* 无拼音的字：占同宽列，拼音区留白 */
.pd-line{ gap:.35rem; }            /* 统一按字宽等分列距 */
.pd-line-sm{ gap:.3rem; }
.pd-body.no-py .pyz i{ visibility:hidden; }
.pd-body.no-py{ padding-top:6px; }

.pd-note{
  font-size:0.781rem; color:#4A4570; line-height:1.95; margin-top:9px;
}

.pd-nav{ display:flex; gap:9px; margin-bottom:12px; }
.pd-nav .qbtn{ display:flex; align-items:center; justify-content:center; text-decoration:none; height:42px; }
.pd-nav .qbtn.is-dis{ opacity:.45; }

/* ---------------- 搜索命中 ---------------- */
.hit-list{ margin-top:4px; }
.hit{ display:flex; align-items:center; gap:8px; padding:10px 0; }
.hit + .hit{ border-top:1px solid var(--line); }
.hit-main{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; text-decoration:none; }
.hit-t{ display:flex; flex-direction:column; min-width:0; flex:1; }
.hit-t b{ font-size:0.844rem; font-weight:600; color:var(--ink); }
.hit-t i{ font-size:0.656rem; font-style:normal; color:var(--ink3); margin-top:1px; }
.hit-src{ flex:0 0 auto; font-size:0.625rem; color:var(--ink2); background:#F5F3FC; padding:3px 8px; border-radius:10px; }
.hit-dup{ flex:0 0 auto; font-size:0.625rem; color:var(--pink); background:var(--pink-s); padding:3px 8px; border-radius:10px; }

.foot-note{ text-align:center; font-size:0.688rem; color:var(--ink3); padding:6px 0 2px; line-height:1.7; }

/* ==========================================================================
   识字写字 · 田字格认读卡（v2.9.11 数据接入）
   ========================================================================== */

/* 小标签（课次切换 / 册次 / 题型）—— 自动换行，不横向裁切 */
.hs-chips{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;
}
.hchip{
  flex:0 0 auto; font-size:0.719rem; padding:6px 12px; border-radius:12px;
  background:#F3F1FB; color:var(--ink2); white-space:nowrap;
}
.hchip.is-on{
  background:linear-gradient(135deg,#ADA6F6,#93CBF6); color:#FFF;
  box-shadow:0 3px 10px rgba(150,140,235,.28);
}

/* 田字格卡片网格 */
.zi-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px; }
.zic{
  position:relative; background:#FFF; border-radius:16px;
  padding:7px 7px 6px; text-align:center;
  border:1.5px solid #F2EFFC; box-shadow:0 2px 8px rgba(122,112,180,.07);
  cursor:pointer; transition:.15s;
}
.zic:active{ transform:scale(.97); }
.zic-tag{
  position:absolute; top:5px; left:5px; z-index:2;
  background:var(--blue-s); color:var(--blue);
  font-size:0.562rem; padding:2px 6px; border-radius:8px;
}
.zic-fav{ position:absolute; top:2px; right:2px; z-index:3; }
.zic-fav .favb{ width:24px; height:24px; font-size:0.812rem; }
.zic-box{ display:block; width:100%; }
.zic-box svg{ display:block; width:100%; height:auto; }
.zic-py{ font-size:0.719rem; color:var(--ink2); margin-top:4px; line-height:1.3; }
.zic-stroke{ font-style:normal; font-size:0.594rem; color:var(--ink3); margin-left:3px; }

/* 词语表 */
.word-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.word{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  background:#FAF9FE; border:1.5px solid #F1EEFB;
  border-radius:12px; padding:7px 24px 7px 13px; cursor:pointer;
}
.word-fav{ position:absolute; top:1px; right:1px; }
.word-fav .favb{ width:22px; height:22px; font-size:0.75rem; }
.word-c{ font-family:var(--font-poem); font-size:0.938rem; color:var(--ink); letter-spacing:1px; }
.word-p{ font-size:0.594rem; color:var(--ink3); margin-top:2px; letter-spacing:.4px; }

/* ==========================================================================
   算术乐园 · 竖式与选项（v1.0.0 接真实题型生成器）
   ========================================================================== */
.quiz-q .vert{
  display:inline-block; text-align:right;
  font-family:ui-monospace,Menlo,Consolas,"Courier New",monospace;
  font-size:1.438rem; letter-spacing:0;
}
.vrow{ display:flex; gap:8px; line-height:1.5; }
.vop{ width:26px; flex:0 0 26px; text-align:center; color:#8B7FE0; }
.vnum{ flex:1; text-align:right; letter-spacing:2px; color:#6E63C8; font-weight:700; }
.vline{ height:2.5px; background:#CFC9EE; border-radius:2px; margin:6px 0 6px 34px; }
.vblank{ color:#C6BEF0; }
.cq-tip{ font-size:0.875rem; color:var(--ink2); font-weight:400; letter-spacing:0; }
.opt-reveal{ grid-column:1 / -1; font-size:1.062rem; }

/* ==========================================================================
   英语单词 / 音素 / 奥数 / 首页今日推荐（v1.0.0）
   ========================================================================== */

/* ---------------- 单词表 ---------------- */
.wlist{ margin-top:6px; }
.witem{
  display:flex; align-items:center; gap:9px; padding:9px 0; cursor:pointer;
}
.witem + .witem{ border-top:1px solid var(--line); }
.w-en{ display:flex; align-items:baseline; gap:6px; flex:0 1 auto; min-width:0; overflow:hidden; }
.w-en b{ font-size:0.906rem; font-weight:700; color:#5B54A8; white-space:nowrap; }
.w-en i{ font-size:0.656rem; font-style:normal; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w-syl{
  flex:0 0 auto;
  font-size:0.625rem; color:var(--blue); background:var(--blue-s);
  padding:3px 8px; border-radius:9px; white-space:nowrap;
}
/* 中文释义：靠右、过长自动折行，不再被裁掉 */
.w-cn{
  margin-left:auto; flex:0 1 auto; min-width:0; max-width:62%;
  text-align:right; font-size:0.75rem; color:var(--ink2); line-height:1.45;
}

/* ---------------- 音素格 ---------------- */
.ph-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.ph{
  background:#FAF9FE; border:1.5px solid #F1EEFB; border-radius:15px;
  padding:10px 11px; cursor:pointer;
}
.ph-ipa{ display:block; font-size:1.188rem; font-weight:700; color:#6E63C8; letter-spacing:.5px; }
.ph-trig{ display:block; font-size:0.781rem; color:#5B54A8; margin-top:2px; }
.ph-zh{ display:inline-block; font-size:0.625rem; color:var(--pink); background:var(--pink-s); padding:2px 7px; border-radius:8px; margin-top:5px; }
.ph-ex{ display:block; font-size:0.656rem; color:var(--ink3); margin-top:5px; line-height:1.5; }

/* ---------------- 奥数题型 ---------------- */
.oly{ padding:11px 0; }
.oly + .oly{ border-top:1px solid var(--line); }
.oly-hd{ display:flex; align-items:center; gap:8px; }
.oly-hd b{ font-size:0.844rem; font-weight:600; color:var(--ink); }
.oly-mod{
  margin-left:auto; font-style:normal; font-size:0.625rem;
  color:var(--blue); background:var(--blue-s); padding:3px 9px; border-radius:9px;
}
.oly-tip{ font-size:0.719rem; color:var(--ink2); line-height:1.7; margin-top:5px; }

/* 题型名可点 → 现场出题 */
.oly-nm{
  flex:1 1 auto; min-width:0; text-decoration:none;
  font-size:0.844rem; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.oly-nm:active{ opacity:.6; }
.oly-fav{ flex:0 0 auto; }
.oly-fav .favb{ width:26px; height:26px; font-size:0.875rem; }

/* 出题卡 */
.oly-stem{
  margin-top:12px; padding:14px 15px; border-radius:14px;
  background:#F8F7FE; border:1px solid #EFECFA;
  font-size:0.938rem; font-weight:500; color:#48427A;
  line-height:1.85; letter-spacing:.3px; white-space:pre-line;
}
.oly-fig{ margin-top:12px; text-align:center; }
.oly-fig svg{ max-width:100%; height:auto; }
.oly-ans{
  margin-top:12px; padding:12px 14px; border-radius:14px;
  background:var(--green-s); color:#276B4C;
  font-size:0.875rem; line-height:1.8;
}
.oly-ans b{ display:block; font-size:0.75rem; color:#4C8A6C; margin-bottom:4px; }
.oly-hint{ font-size:0.719rem; color:var(--ink3); text-align:center; margin-top:9px; }

/* 链接式标签（年级筛选） */
a.chip{ display:inline-block; text-decoration:none; }
a.chip.is-on{ background:linear-gradient(135deg,#ADA6F6,#93CBF6); color:#FFF; }

/* 英语单词行里的收藏按钮 */
.w-fav{ flex:0 0 auto; }
.w-fav .favb{ width:24px; height:24px; font-size:0.812rem; }

/* ---------------- 首页 · 今日古诗 ---------------- */
.hot-poem{ display:block; margin-top:11px; }
.hp-hd{ display:flex; align-items:baseline; gap:8px; }
.hp-hd b{ font-family:var(--font-poem); font-size:1.125rem; font-weight:700; color:var(--ink); letter-spacing:1px; }
.hp-hd i{ font-size:0.688rem; font-style:normal; color:var(--ink3); }
.hp-body{
  margin-top:8px; padding:11px 13px; border-radius:14px;
  background:linear-gradient(155deg,#F7F5FE,#EEF4FE);
  font-family:var(--font-poem); font-size:0.938rem; line-height:1.9;
  color:#3A3570; letter-spacing:1px;
}
.hp-go{
  display:inline-block; margin-top:9px; font-size:0.719rem;
  background:linear-gradient(135deg,#ADA6F6,#93CBF6); color:#FFF;
  padding:6px 14px; border-radius:13px;
  box-shadow:0 3px 10px rgba(150,140,235,.28);
}

/* ============================ 收藏（★） ============================ */
.favb{
  flex:0 0 auto; width:30px; height:30px; border:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border-radius:50%;
  font-size:1.062rem; line-height:1; color:#CFCBDE;
  transition:transform .16s ease, color .16s ease;
}
.favb .fvb-s{ display:block; transform:translateY(-1px); }
.favb:active{ transform:scale(.84); }
.favb.is-on{ color:#F0B429; }
.favb.is-on .fvb-s{ text-shadow:0 1px 5px rgba(240,180,41,.45); }
.favb.is-on:active{ transform:scale(1.12); }

/* 带文字的宽版（详情页用） */
.favb-txt{
  width:auto; height:auto; padding:7px 14px; border-radius:16px;
  background:#F5F3FC; color:var(--ink2); font-size:0.781rem;
  display:inline-flex; align-items:center; gap:5px;
}
.favb-txt.is-on{ background:var(--amber-s); color:#B8871F; }
.favb-txt .fvb-t{ font-size:0.781rem; }

/* 五星条（知识库页里调星级） */
.favs{ display:inline-flex; gap:3px; }
.favs i{ font-style:normal; font-size:0.875rem; color:#D8D4E6; cursor:pointer; line-height:1; }
.favs i.on{ color:#F0B429; }

/* 知识库页 */
.fav-tabs{ display:flex; gap:7px; flex-wrap:wrap; margin-top:11px; }
.fav-tab{
  font-size:0.781rem; padding:7px 13px; border:0; border-radius:14px;
  background:#F3F1FB; color:var(--ink2); font-family:inherit;
  display:inline-block; text-decoration:none; line-height:1.25;
}
.fav-tab em{ font-style:normal; font-size:0.688rem; opacity:.7; margin-left:3px; }
.fav-tab.is-on{
  background:linear-gradient(135deg,#ADA6F6,#93CBF6); color:#FFF;
  box-shadow:0 3px 10px rgba(150,140,235,.28);
}
.fav-tab.is-on em{ opacity:.85; }

.fav-card{
  display:flex; align-items:flex-start; gap:9px;
  padding:11px 12px; border-radius:14px; background:#FFF;
  border:1px solid #F0EDF9; margin-top:8px;
}
.fav-ico{
  flex:0 0 34px; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.062rem; background:var(--blue-s); color:#6B62C4;
}
.fav-body{ min-width:0; flex:1 1 auto; }
.fav-t{
  font-size:0.906rem; font-weight:600; color:#3A3570;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
a.fav-t{ display:block; text-decoration:none; }
a.fav-t:active{ opacity:.65; }
.fav-s{
  font-size:0.719rem; color:var(--ink3); margin-top:3px; line-height:1.55;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.fav-side{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.fav-del{
  border:0; background:transparent; padding:2px 4px;
  font-size:0.688rem; color:#C6C2D6; font-family:inherit;
}
.fav-empty{
  text-align:center; padding:34px 16px; color:var(--ink3); font-size:0.812rem; line-height:1.8;
}
.fav-empty b{ display:block; font-size:1.875rem; margin-bottom:8px; }

/* 卡片主行里挂收藏按钮时的通用布局 */
.row-fav{ display:flex; align-items:center; gap:6px; }
.row-fav .row-main{ min-width:0; flex:1 1 auto; }

/* ==========================================================================
   习惯页 / 设置页控件
   （.plan/.pl-ring/.pl-i/.pl-t 复用「计划」页已有的样式，此处只补缺的）
   ========================================================================== */

/* ---- 最近一周：7 个圆片 ---- */
.drow{ display:flex; gap:7px; margin-top:12px; }
.dchip{
  flex:1 1 0; min-width:0;
  height:38px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.812rem; font-weight:600;
  background:#F4F2FB; color:#C3BEDC;
  border:1px solid #EDEAF8;
}
.dchip.is-on{
  background:linear-gradient(150deg,#FFE7B8,#FFD37A);
  color:#9A6B12; border-color:#F5DFAE;
  box-shadow:0 3px 9px rgba(230,175,60,.24);
}

/* ---- 徽章墙：两列小卡 ---- */
.badge-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:11px; }
.badge{
  background:#F8F7FD; border:1px solid #EFECF9; border-radius:15px;
  padding:11px 10px 10px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.badge.is-on{
  background:linear-gradient(160deg,#FFF8E6,#FFF1F7);
  border-color:#F7E2BC;
  box-shadow:0 3px 11px rgba(226,178,86,.16);
}
.bd-i{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.188rem; background:#EEECF7;
  filter:grayscale(1); opacity:.6;
}
.badge.is-on .bd-i{
  background:#FFF; filter:none; opacity:1;
  box-shadow:0 2px 7px rgba(226,178,86,.28);
}
.badge b{ font-size:0.781rem; font-weight:600; color:var(--ink); }
.badge.is-on b{ color:#8A6A2C; }
.badge i{ font-style:normal; font-size:0.625rem; color:var(--ink3); line-height:1.5; }
.bd-bar{
  width:100%; height:5px; border-radius:3px;
  background:#EDEAF6; overflow:hidden; margin-top:2px;
}
.bd-bar b{ display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,#B7AFF7,#8FC8F5); }
.badge.is-on .bd-bar b{ background:linear-gradient(90deg,#FFCE6A,#F7A94B); }
.bd-num{ font-size:0.594rem; color:var(--ink3); font-weight:600; }

/* ---- 习惯模板：两列按钮 ---- */
.tpl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:11px; }
.tpl{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:12px 8px 10px; border-radius:15px; cursor:pointer;
  background:#F8F7FD; border:1.5px solid #EFECF9;
  font-family:inherit; color:var(--ink);
}
.tpl .tp-i{ font-size:1.312rem; line-height:1.2; }
.tpl b{ font-size:0.781rem; font-weight:600; }
.tpl em{ font-style:normal; font-size:0.625rem; color:var(--ink3); }
.tpl:active{ transform:scale(.97); }
.tpl.is-on{
  background:#F1EEFE; border-color:#C9C2F5;
  box-shadow:0 3px 10px rgba(150,140,235,.16);
}
.tpl.is-on b{ color:#6559C8; }
.tpl.is-on em{ color:#7B70CE; }

/* ---- 设置页：字号三选一 ---- */
.seg-set{
  display:inline-flex; flex:0 0 auto; margin-left:auto;
  background:#F2F0FA; border-radius:12px; padding:3px; gap:2px;
}
.seg-set button{
  border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-size:0.781rem; color:var(--ink2); white-space:nowrap;
  padding:6px 11px; border-radius:9px; line-height:1.2;
}
.seg-set button.is-on{
  background:#FFF; color:#6559C8; font-weight:600;
  box-shadow:0 2px 6px rgba(122,112,180,.16);
}

/* ---- 设置页：字号偏好真的生效（全局 rem 缩放） ----
   全文 font-size 已统一为 rem，根字号一改，整站文本跟随缩放：
   标准 1.00x ｜ 大 1.10x ｜ 特大 1.22x */
html{ font-size:16px; }
html[data-fs="big"] { font-size:17.6px; }   /* 16px × 1.10 */
html[data-fs="huge"]{ font-size:19.52px; }  /* 16px × 1.22 */

/* ---- 设置页：尚未开放的功能（开关置灰，点了不动作） ---- */
.set-row.is-soon{ opacity:.62; }
.soon-tag{
  font-style:normal; font-size:0.594rem; font-weight:600;
  background:#EFECF9; color:#8B84B8;
  padding:2px 6px; border-radius:8px; margin-left:5px;
  vertical-align:1px;
}
.set-row.is-soon .switch{ pointer-events:none; }

/* ==========================================================================
   闯关页：一屏一题 + 顶部进度点
   ========================================================================== */
.gq-dots{ display:flex; gap:6px; justify-content:center; margin-bottom:14px; }
.gq-dot{
  width:9px; height:9px; border-radius:50%; background:#E4E0F2;
  transition:.2s;
}
.gq-dot.is-now{ background:linear-gradient(135deg,#ADA6F6,#93CBF6); transform:scale(1.35); }
.gq-dot.is-ok{ background:#6FD39B; }
.gq-dot.is-no{ background:#F2A0B4; }

.gq-q{ display:none; }
.gq-q.is-on{ display:block; animation:gqIn .2s ease-out; }
@keyframes gqIn{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }

.gq-ask{ font-size:0.781rem; color:var(--ink2); text-align:center; }
.gq-stem{ text-align:center; margin:15px 0 17px; color:var(--ink); line-height:1.35; }
.gq-py{ font-size:2.125rem; font-weight:700; color:#7B70CE; letter-spacing:1px; }
.gq-zi{ font-size:3.875rem; font-weight:600; font-family:var(--font-poem); line-height:1.15; }
.gq-en{ font-size:1.938rem; font-weight:700; color:var(--blue); word-break:break-word; }
.gq-calc{ font-size:1.938rem; font-weight:700; color:var(--amber); letter-spacing:2px; }
.gq-line{ font-family:var(--font-poem); font-size:1.438rem; line-height:1.75; letter-spacing:1px; }
.gq-blank{
  font-style:normal; display:inline-block; min-width:.95em;
  color:var(--pink); border-bottom:3px solid #F3BFD6;
}

.gq-opts{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.gq-opt{
  padding:14px 8px; border-radius:15px; cursor:pointer;
  border:1.5px solid #EFECF9; background:#F8F7FD;
  font-family:inherit; font-size:1rem; color:var(--ink);
  min-height:52px; display:flex; align-items:center; justify-content:center;
  line-height:1.25; word-break:break-word;
}
.gq-opts.is-big .gq-opt{ font-size:1.812rem; font-family:var(--font-poem); min-height:64px; }
.gq-opt:active{ transform:scale(.97); }
.gq-opt.is-ok{
  background:#E4F6EC; border-color:#9BD9B8; color:#2F7C55; font-weight:700;
}
.gq-opt.is-no{
  background:#FDE9F2; border-color:#F3BFD6; color:#B34D77;
}

.gq-score{ text-align:center; margin:6px 0 2px; }
.gq-score b{ font-size:2.625rem; color:#7B70CE; line-height:1; }
.gq-score i{ font-style:normal; font-size:0.812rem; color:var(--ink3); margin-left:5px; }
.gq-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.gq-acts .qbtn{ flex:1 1 auto; text-align:center; }






/* ====================== 朋友圈 / 好友 / 悄悄话 / 漂流瓶 ====================== */
.mom-card .sect-r{ color:var(--pink); font-weight:600; }

.m-tabbar{ display:flex; gap:4px; overflow-x:auto; padding:4px 0 10px; margin-bottom:6px; -webkit-overflow-scrolling:touch; }
.m-tabbar button{
  flex:0 0 auto; border:1px solid var(--line,#ECEAF6); background:#F7F6FD; color:var(--ink2);
  border-radius:999px; padding:7px 14px; font-size:0.844rem; font-weight:600; cursor:pointer; position:relative;
}
.m-tabbar button.is-on{ background:linear-gradient(135deg,#8E7BE0,#B98BD8); color:#fff; border-color:transparent; }
.m-sup{ position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; line-height:16px; padding:0 4px;
  background:var(--pink); color:#fff; border-radius:999px; font-size:0.625rem; font-weight:700; text-align:center; }

.m-pane{ display:none; }
.m-pane.is-on{ display:block; }

/* 头像 */
.av{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:#E7E3F6;
  display:flex; align-items:center; justify-content:center; color:#7B70CE; font-weight:700; font-size:1.062rem; }
.av img{ width:100%; height:100%; object-fit:cover; }
.av-txt{ background:linear-gradient(135deg,#C9BFF0,#E3B9D8); color:#fff; }

/* 好友动态 */
.fr-list{ list-style:none; margin:0; padding:0; }
.fr-item{ display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--line,#F0EEF8); }
.fr-item:last-child{ border-bottom:0; }
.fr-main{ flex:1 1 auto; min-width:0; }
.fr-main b{ display:block; font-size:0.938rem; color:var(--ink); }
.fr-main i{ font-style:normal; font-size:0.719rem; color:var(--ink3); }
.fr-pts{ text-align:right; flex:0 0 auto; }
.fr-pts b{ display:block; font-size:0.875rem; color:#7B70CE; font-weight:700; }
.fr-yday{ font-style:normal; font-size:0.688rem; color:var(--pink); }
.fr-whisper{ flex:0 0 auto; border:1px solid var(--pink); color:var(--pink); background:var(--pink-s);
  border-radius:999px; padding:6px 12px; font-size:0.781rem; font-weight:600; cursor:pointer; }
.fr-whisper:active{ transform:scale(.96); }

/* 排行榜 */
.rank-list{ list-style:none; margin:0; padding:0; counter-reset:rk; }
.rank-item{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line,#F0EEF8); }
.rank-item:last-child{ border-bottom:0; }
.rank-no{ width:26px; height:26px; flex:0 0 auto; border-radius:50%; background:#F0EEF8; color:var(--ink2);
  display:flex; align-items:center; justify-content:center; font-size:0.812rem; font-weight:700; }
.rank-no-1{ background:#FFE6A8; color:#B8860B; }
.rank-no-2{ background:#E9EEF5; color:#7C8AA0; }
.rank-no-3{ background:#FBE0CC; color:#C0793B; }
.rank-main{ flex:1 1 auto; min-width:0; }
.rank-main b{ display:block; font-size:0.906rem; color:var(--ink); }
.rank-main i{ font-style:normal; font-size:0.688rem; color:var(--ink3); }
.rank-star{ flex:0 0 auto; font-size:0.875rem; font-weight:700; color:#7B70CE; }
.rank-item.is-me{ background:linear-gradient(135deg,#F3EEFF,#FCEFFB); border-radius:12px; padding-left:8px; padding-right:8px; }
.rank-item.is-me .rank-main b::after{ content:"（我）"; color:var(--pink); font-size:0.688rem; font-weight:400; }

/* 新朋友 */
.req-list{ list-style:none; margin:10px 0 0; padding:0; }
.req-item{ display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line,#F0EEF8); }
.req-main{ flex:1 1 auto; min-width:0; }
.req-main b{ display:block; font-size:0.906rem; color:var(--ink); }
.req-main i{ font-style:normal; font-size:0.719rem; color:var(--ink3); }
.req-ok{ border:1px solid #59B98A; color:#2F7C55; background:#E4F6EC; border-radius:999px; padding:6px 13px; font-size:0.781rem; font-weight:600; cursor:pointer; }
.req-no{ border:1px solid #D9D5E6; color:var(--ink2); background:#F4F2FB; border-radius:999px; padding:6px 13px; font-size:0.781rem; cursor:pointer; }
.req-wait{ flex:0 0 auto; font-style:normal; font-size:0.75rem; color:#B0892F; background:#FBF1DA; border:1px solid #EBD9A8; border-radius:999px; padding:5px 11px; font-weight:600; }
.add-box{ margin-top:14px; }
.add-search{ display:flex; gap:8px; }
.add-search input{ flex:1 1 auto; border:1px solid var(--line,#E3E0F0); border-radius:10px; padding:10px 12px; font-size:0.875rem; }
.add-search button{ flex:0 0 auto; border:0; background:linear-gradient(135deg,#8E7BE0,#B98BD8); color:#fff;
  border-radius:10px; padding:0 18px; font-size:0.875rem; font-weight:600; cursor:pointer; }

/* 悄悄话收件箱 + 抽屉 */
.wh-list{ list-style:none; margin:8px 0 0; padding:0; }
.wh-item{ display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line,#F0EEF8); cursor:pointer; }
.wh-item.is-unread .wh-main b{ color:var(--pink); }
.wh-main{ flex:1 1 auto; min-width:0; }
.wh-main b{ display:block; font-size:0.906rem; color:var(--ink); }
.wh-main i{ font-style:normal; font-size:0.719rem; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:62vw; }
.wh-unread{ flex:0 0 auto; min-width:18px; height:18px; line-height:18px; padding:0 5px; background:var(--pink); color:#fff; border-radius:999px; font-size:0.688rem; font-weight:700; text-align:center; }
.wh-go{ flex:0 0 auto; color:var(--ink3); font-size:1.125rem; }

.wh-drawer{ position:fixed; inset:0; background:#fff; z-index:60; display:flex; flex-direction:column; }
.wh-drawer[hidden]{ display:none; }
.wh-drawer-h{ display:flex; align-items:center; gap:8px; padding:12px; border-bottom:1px solid var(--line,#F0EEF8); }
.wh-drawer-h button{ border:0; background:none; color:var(--blue); font-size:0.938rem; cursor:pointer; }
.wh-drawer-h b{ font-size:0.969rem; color:var(--ink); }
.wh-msgs{ flex:1 1 auto; overflow-y:auto; padding:14px; background:#FAF8FF; }
.wh-loading,.wh-msgs .empty{ color:var(--ink3); text-align:center; padding:18px; }
.wh-msg{ max-width:78%; margin:0 0 12px; padding:9px 13px; border-radius:14px; background:#fff; color:var(--ink); font-size:0.875rem; line-height:1.5; box-shadow:0 1px 3px rgba(80,70,140,.08); }
.wh-msg.is-mine{ margin-left:auto; background:linear-gradient(135deg,#8E7BE0,#B98BD8); color:#fff; }
.wh-msg p{ margin:0; word-break:break-word; }
.wh-input{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--line,#F0EEF8); }
.wh-input input{ flex:1 1 auto; border:1px solid var(--line,#E3E0F0); border-radius:999px; padding:10px 14px; font-size:0.875rem; }
.wh-input input:disabled{ background:#F2F0F8; color:var(--ink3); }
.wh-input button{ flex:0 0 auto; border:0; background:linear-gradient(135deg,#8E7BE0,#B98BD8); color:#fff; border-radius:999px; padding:0 18px; font-weight:600; cursor:pointer; }
.wh-input button:disabled{ opacity:.5; }

/* 漂流瓶 */
.sub-sect{ font-size:0.875rem; font-weight:700; color:var(--ink); margin:16px 0 6px; }
.bottle-throw{ display:flex; flex-direction:column; gap:8px; }
.bottle-throw textarea{ width:100%; min-height:84px; border:1px solid var(--line,#E3E0F0); border-radius:12px; padding:11px 12px; font-size:0.875rem; resize:vertical; box-sizing:border-box; }
.bottle-throw button{ align-self:flex-end; border:0; background:linear-gradient(135deg,#4A8FD8,#6FB4E0); color:#fff; border-radius:999px; padding:9px 20px; font-size:0.875rem; font-weight:600; cursor:pointer; }
.bottle-actions{ margin:12px 0; }
.bottle-actions button{ width:100%; border:1px dashed #9CC4E8; background:var(--blue-s); color:var(--blue); border-radius:12px; padding:12px; font-size:0.906rem; font-weight:600; cursor:pointer; }
#bottlePicked{ margin:10px 0; }
.picked{ background:linear-gradient(135deg,#EAF4FF,#F3ECFF); border:1px solid #D8E6F5; border-radius:14px; padding:14px; }
.pk-body{ margin:0 0 6px; font-size:0.938rem; color:var(--ink); line-height:1.6; }
.pk-from{ margin:0 0 12px; font-size:0.75rem; color:var(--ink2); }
.pk-acts{ display:flex; gap:8px; }
.pk-acts button{ flex:1 1 auto; border:1px solid var(--line,#E3E0F0); background:#fff; border-radius:10px; padding:10px; font-size:0.844rem; font-weight:600; cursor:pointer; }
#pkFriend{ border-color:#9BD9B8; color:#2F7C55; background:#E4F6EC; }
#pkDiscard{ border-color:#F3BFD6; color:#B34D77; background:var(--pink-s); }
.bottle-mine{ list-style:none; margin:6px 0 0; padding:0; }
.bottle-mine li{ display:flex; align-items:center; gap:8px; padding:9px 2px; border-bottom:1px solid var(--line,#F0EEF8); }
.bm-body{ flex:1 1 auto; min-width:0; font-size:0.844rem; color:var(--ink); }
.bm-st{ flex:0 0 auto; font-size:0.688rem; font-style:normal; padding:3px 9px; border-radius:999px; }
.bm-floating{ background:#E6F0FD; color:var(--blue); }
.bm-picked{ background:#E4F6EC; color:#2F7C55; }
.bm-discarded{ background:#F2F0F8; color:var(--ink3); }

/* 朋友圈增强：等级徽章 / 心情选择 / 过滤 / 暖心寄语 / 红点定位 */
.mom-card .m-tabbar button{ position:relative; }
.lv-badge{ display:inline-block; margin-left:6px; font-size:0.625rem; font-weight:700; color:#7B5AC9;
  background:#F0EBFF; border:1px solid #E0D6FB; border-radius:999px; padding:1px 7px; vertical-align:middle; }
.mood-pick{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:2px; }
.mp-i{ border:1px solid var(--line,#E3E0F0); background:#fff; color:var(--ink2); border-radius:999px;
  padding:5px 11px; font-size:0.75rem; cursor:pointer; }
.mp-i.is-on{ border-color:#8E7BE0; color:#fff; background:linear-gradient(135deg,#8E7BE0,#B98BD8); }
.mood-filter{ display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.bottle-actions .mf-i{ width:auto; flex:0 0 auto; border:1px solid var(--line,#E3E0F0); background:#fff; color:var(--ink2);
  border-radius:999px; padding:5px 12px; font-size:0.812rem; font-weight:400; cursor:pointer; }
.bottle-actions .mf-i.is-on{ border-color:var(--blue); color:var(--blue); background:var(--blue-s); font-weight:600; }
.bm-mood{ flex:0 0 auto; font-size:0.656rem; font-style:normal; padding:3px 8px; border-radius:999px;
  background:#EAF4FF; color:var(--blue); }
.pk-mood{ display:inline-block; font-size:0.75rem; font-style:normal; padding:3px 10px; border-radius:999px;
  background:#EAF4FF; color:var(--blue); margin-bottom:6px; }
.pk-quote{ margin:0 0 10px; font-size:0.781rem; color:#8A6A2C; background:#FFF7E6; border-left:3px solid #FFD27A;
  border-radius:8px; padding:7px 10px; line-height:1.5; }

/* ---------------- 宠物：挑选 / 锁定 / 满级换养 / 图鉴 ---------------- */
.pet-hero{ text-align:center; padding:20px 16px; }
.ph-emo{ font-size:2.125rem; letter-spacing:2px; line-height:1.3; }
.ph-t{ font-size:1.062rem; font-weight:700; margin-top:8px; }
.ph-s{ font-size:0.781rem; color:var(--ink2); margin-top:6px; line-height:1.6; }

.pp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.pp-card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:13px 9px 11px; border-radius:16px; cursor:pointer; text-align:center;
  border:2px solid var(--pcs); background:var(--pcs); color:var(--ink);
  transition:.16s;
}
.pp-card .pp-i{ font-size:2.125rem; line-height:1.1; }
.pp-card .pp-n{ font-size:0.906rem; font-weight:700; }
.pp-card .pp-t{ font-size:0.656rem; color:var(--pc); font-weight:600;
  background:#FFF; border-radius:999px; padding:1px 8px; }
.pp-card .pp-d{ font-size:0.688rem; font-style:normal; color:var(--ink2); line-height:1.5; margin-top:3px; }
.pp-card .pp-go{ margin-top:7px; font-size:0.781rem; font-weight:700; color:#FFF;
  background:var(--pc); border-radius:999px; padding:4px 16px; }
.pp-card:active{ transform:scale(.97); }
.pp-card.is-cur{ opacity:.55; }
.pp-card.is-cur .pp-go{ background:var(--ink3); }
.pp-card[disabled]{ cursor:default; }

/* ==========================================================================
   护眼定时休息弹窗（全屏遮罩，强制休息）
   ========================================================================== */
.eye-rest{
  --pc:#6A5AE0;
  position:fixed; left:0; top:0; right:0; bottom:0;
  background:rgba(25,18,48,.82);
  display:flex; align-items:center; justify-content:center;
  z-index:10000; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.eye-rest-inner{
  width:min(82vw, 320px); background:#FFF;
  border-radius:18px; padding:26px 22px 20px; text-align:center;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
}
.eye-rest-icon{
  width:64px; height:64px; margin:0 auto 8px; border-radius:50%;
  background:linear-gradient(135deg,#C9B3FF,#F0E6FF);
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem;
}
.eye-rest h3{ font-size:1.125rem; font-weight:700; color:#2E2A52; margin:6px 0 4px; }
.eye-rest p{ font-size:0.813rem; color:var(--ink2); line-height:1.6; margin:0 0 14px; }
.eye-rest-timer{ margin:4px auto 14px; }
.eye-rest-timer b{
  display:block; font-size:2.375rem; font-weight:700; color:var(--pc);
  font-variant-numeric:tabular-nums; line-height:1;
}
.eye-rest-timer i{
  display:block; margin-top:6px; font-style:normal; font-size:0.75rem; color:var(--ink3);
}
.eye-rest .btn-line{ width:100%; padding:11px 0; font-size:0.844rem; }
/* 5 张卡：第 5 张单独一行、但与上面同宽并居中，别撑成一整行 */
.pp-grid .pp-card:nth-child(5){ grid-column:1 / -1; width:calc(50% - 5px); justify-self:center; }

.pet-warn{ margin-top:12px; font-size:0.719rem; color:#9A6A1E; background:var(--amber-s);
  border-left:3px solid #F0C36A; border-radius:8px; padding:8px 10px; line-height:1.6; }
.pet-lock{ margin-top:12px; font-size:0.719rem; color:var(--ink2); background:var(--line);
  border-radius:8px; padding:8px 10px; line-height:1.5; }
.pet-max{ margin-top:13px; padding:11px 12px; border-radius:12px; background:var(--amber-s);
  border:1px dashed #F0C36A; }
.pet-max b{ display:block; font-size:0.844rem; color:#8A6A2C; }
.pet-max span{ display:block; font-size:0.719rem; color:#9A7A3C; margin-top:4px; line-height:1.5; }

.pet-dex{ display:flex; gap:8px; margin-top:12px; }
.pet-dex .dx{ flex:1 1 0; text-align:center; padding:9px 2px; border-radius:12px;
  background:var(--line); opacity:.62; }
.pet-dex .dx.is-got{ opacity:1; background:#EFF7FF; }
.pet-dex .dx.is-cur{ background:var(--amber-s); box-shadow:0 0 0 2px #F0C36A inset; }
.pet-dex .dx-i{ display:block; font-size:1.5rem; line-height:1.15; }
.pet-dex .dx b{ display:block; font-size:0.656rem; font-weight:600; margin-top:3px; }
.pet-dex .dx i{ display:block; font-size:0.594rem; font-style:normal; color:var(--ink3); margin-top:1px; }

/* ---------------- 宠物 v2：首页那一条 / 取名 / 我的宠物们 ---------------- */
.pet-strip{ padding:14px 14px 13px; }
.pet-strip.is-empty{ background:linear-gradient(160deg,#FFFDF7,#FFF6E8); }
.ps-row{ display:flex; align-items:center; gap:11px; }
.ps-i{ flex:0 0 auto; font-size:1.875rem; line-height:1.1; }
.ps-t{ flex:1 1 auto; min-width:0; }
.ps-t b{ display:block; font-size:0.875rem; font-weight:700; }
.ps-kind{ display:inline-block; font-style:normal; font-size:0.656rem; font-weight:600; color:var(--ink2);
  background:var(--line); border-radius:999px; padding:1px 8px; margin-left:6px; }
.ps-t i{ display:block; font-size:0.719rem; font-style:normal; color:var(--ink2); margin-top:4px; line-height:1.5; }
.ps-go{ flex:0 0 auto; font-size:0.781rem; font-weight:700; color:#FFF; border-radius:999px; padding:7px 14px;
  background:linear-gradient(135deg,#ADA6F6,#93CBF6); }
/* 还没领养：按钮单独占一行，文案不被挤成两行 */
.pet-strip.is-empty .ps-row{ flex-wrap:wrap; }
.pet-strip.is-empty .ps-t b{ font-size:0.844rem; }
.pet-strip.is-empty .ps-go{ flex:1 1 100%; text-align:center; padding:9px 14px; margin-top:2px; }
.ps-bar{ margin-top:11px; height:7px; border-radius:999px; background:var(--line); overflow:hidden; }
.ps-bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#B7AEF8,#8FD0F5); }
.ps-max{ display:block; margin-top:11px; font-size:0.719rem; color:#8A6A2C; background:var(--amber-s);
  border:1px dashed #F0C36A; border-radius:10px; padding:8px 10px; text-align:center; }
.ps-note{ margin-top:10px; font-size:0.719rem; color:var(--ink3); line-height:1.5; }

.pet-main{ text-align:center; padding:22px 14px; }
.pm-face{ line-height:1.1; }
.pm-name{ font-size:1.125rem; font-weight:700; margin-top:6px; }
.pm-sub{ font-size:0.719rem; color:var(--ink3); margin-top:3px; }
.pm-tools{ display:flex; justify-content:center; margin-top:12px; }
.qbtn-mini{ flex:0 0 auto; height:32px; padding:0 14px; font-size:0.75rem; border-radius:12px; }

.pet-rename, .pet-name-box{ margin-top:12px; background:#FAF9FE; border:1px dashed #DCD7F2;
  border-radius:12px; padding:11px; }
.pnb-lb{ display:block; font-size:0.719rem; color:var(--ink2); margin-bottom:8px; line-height:1.5; }
.pnb-lb i{ font-style:normal; color:var(--ink3); }
.pnb-row{ display:flex; gap:8px; }
.pet-name-in{ flex:1 1 auto; min-width:0; height:40px; padding:0 12px; font-size:0.875rem;
  font-family:var(--font-sans); color:var(--ink); background:#FFF; border:1px solid var(--line);
  border-radius:12px; outline:none; }
.pet-name-in:focus{ border-color:#B9B2F3; }
.pnb-go{ flex:0 0 auto; height:40px; padding:0 16px; font-size:0.812rem; border-radius:12px; }

.pet-list{ margin-top:12px; }
.pl-item{ display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:13px; background:#FAF9FE; }
.pl-item + .pl-item{ margin-top:8px; }
.pl-item.is-cur{ background:var(--amber-s); box-shadow:0 0 0 1px #F0C36A inset; }
.pl-i{ flex:0 0 auto; font-size:1.625rem; line-height:1.1; }
.pl-t{ flex:1 1 auto; min-width:0; }
.pl-t b{ display:block; font-size:0.875rem; font-weight:700; }
.pl-t i{ display:block; font-size:0.688rem; font-style:normal; color:var(--ink3); margin-top:2px; }
.pl-go{ flex:0 0 auto; height:30px; padding:0 13px; border:0; border-radius:999px; color:#FFF; font-size:0.75rem;
  font-family:var(--font-sans); background:linear-gradient(135deg,#ADA6F6,#93CBF6); }
.pl-go[disabled]{ opacity:.5; }
.pl-cur{ flex:0 0 auto; font-style:normal; font-size:0.719rem; font-weight:700; color:#8A6A2C; }

.pp-card.is-sel{ box-shadow:0 0 0 2px var(--pc) inset; }
.pp-card.is-sel .pp-go{ background:var(--pc); }

/* ---------------- 宠物 v3：写实立体形象图（白底图统一做成圆角小贴纸） ---------------- */
.pet-img{ display:block; object-fit:contain; background:#FFF; }
/* 侧栏当前宠物小头像 */
.rail-item .ri .rail-pet{ width:22px; height:22px; border-radius:7px; box-shadow:0 0 0 1px var(--line); }
/* 右下角悬浮球 */
.pet-fab img.fab-pet{ width:42px; height:42px; border-radius:50%; }
/* 首页宠物条 */
.ps-i .ps-img{ width:46px; height:46px; border-radius:13px; box-shadow:0 2px 8px rgba(122,112,180,.14); }
.sect-i .ps-sm{ width:19px; height:19px; border-radius:6px; vertical-align:-4px; box-shadow:0 0 0 1px var(--line); }
/* 宠物页主形象 */
.pm-face .pm-img{ border-radius:22px; box-shadow:0 6px 18px rgba(122,112,180,.16); }
/* 我的宠物们列表 */
.pl-i .pl-img{ width:40px; height:40px; border-radius:11px; }
/* 图鉴 */
.pet-dex .dx-i .dx-img{ width:46px; height:46px; border-radius:12px; margin:0 auto; }
.pet-dex .dx-i .dx-q{ display:block; font-size:1.5rem; line-height:46px; }
/* 领养 hero 一排出生小图 */
.ph-emo{ display:flex; justify-content:center; gap:6px; }
.ph-emo .ph-img{ width:44px; height:44px; border-radius:12px; box-shadow:0 2px 8px rgba(122,112,180,.12); }

/* ==========================================================================
   全局按压反馈：按下统一加深约 20%（filter:brightness 自动适配任意底色，
   靠后声明、优先级最高，替换每个组件独立的 :active/feedback 细节处生效）
   ========================================================================== */
.hchip:active, .su-key:active, .key:active, .opt:active, .seg:active,
.grp-sum:active, .zic:active, .word:active, .witem:active, .suc:active,
.pp-card:active, .pl-i:active, .pet-dex .dx-i:active, .rail-item:active,
.pl-ring:active, .ph-i:active, .day:active, .wday:active,
.mini:active, .mini-play:active, .zi-play:active,
.su-ope:active, .su-save:active,
.lbtn:active, .lgi:active, .btn-line:active, .card-btn:active,
button:active, a[href]:active, [role="button"]:active
{ filter: brightness(.8); -webkit-filter: brightness(.8); }

/* ==========================================================================
   日常英语 900 句（v0.7）：英中对照 + 美/英双音朗读
   ========================================================================== */
.sentlist{ margin-top:6px; }
.sent{
  display:flex; align-items:flex-start; gap:8px;
  padding:9px 2px;
}
.sent + .sent{ border-top:1px solid var(--line); }
.sent-n{
  flex:0 0 26px; font-size:0.656rem; font-weight:700; color:var(--ink3);
  text-align:right; padding-top:3px; font-variant-numeric:tabular-nums;
}
.sent-b{ flex:1 1 auto; min-width:0; }
.sent-en{
  display:block; font-size:0.969rem; font-weight:700; color:#3B3B58;
  line-height:1.35; word-break:break-word;
}
.sent-cn{ display:block; font-size:0.75rem; color:var(--ink3); margin-top:2px; }
.sent-snd{ flex:0 0 auto; display:flex; gap:5px; padding-top:2px; }
.d900-play{
  min-width:30px; height:26px; padding:0 7px;
  font-size:0.688rem; font-weight:700; color:#5B54A8;
  background:#F1EFFB; border:1px solid #DCD8F2; border-radius:8px;
}
.d900-play:active{ background:#E3DFF8; }