
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;
  background:var(--page-bg);color:var(--fg);
  font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.app{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;min-height:0;
  background-color:var(--bg);background-image:var(--skin-texture,none)}
body[data-decor~="paper"] .app{background-image:
  repeating-linear-gradient(92deg,rgba(120,110,85,.055) 0 1px,transparent 1px 4px),
  repeating-linear-gradient(3deg,rgba(120,110,85,.042) 0 1px,transparent 1px 7px),
  radial-gradient(140% 104% at 50% 50%,transparent 54%,rgba(60,55,40,.05) 100%)}
#ink{position:fixed;inset:0;z-index:1;width:100%;height:100%;display:block;pointer-events:none}

/* 顶栏：头像 + 名称 + 设置入口（44×44 触控） */
.hd{position:relative;z-index:3;flex:0 0 auto;display:flex;align-items:center;gap:11px;
  /* 2026-09-29 owner 交办「适应灵动岛／所有模式」：**四个方向都要留**。
     之前只做了上（灵动岛）与下（底部横条）；而**横屏时刘海／灵动岛在侧边**，
     只留上下的话正文会被压到传感器下面去。 */
  padding:12px calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left));
  padding-top:calc(12px + env(safe-area-inset-top));
  background:var(--hd-bg);border-bottom:1px solid var(--line)}
.hd .ava{width:var(--tap);height:var(--tap);flex:0 0 var(--tap);border-radius:var(--r-6);overflow:hidden;display:grid;place-items:center;
  font-size:var(--fs-body);font-weight:600;background:var(--ava-bg);color:var(--ava-fg);border:1px solid var(--line)}
body[data-decor~="paper"] .hd .ava{border-radius:0;border-color:var(--brand);font-family:var(--serif)}
.who{flex:1;min-width:0}
.who h1{margin:0;font-size:var(--fs-title);font-weight:600;line-height:1.3;color:var(--hd-fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-decor~="paper"] .who h1{font-family:var(--serif);font-weight:500;letter-spacing:.1em}
.who .st{display:flex;align-items:center;gap:6px;font-size:var(--fs-cap);color:var(--hd-dim);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:6px;height:6px;border-radius:50%;background:var(--brand-2);flex:0 0 6px}

/* 图标按钮：≥44×44 */
.ic{width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;margin-right:-8px;
  background:none;border:0;border-radius:var(--r-10);color:var(--hd-dim);cursor:pointer;padding:0;
  font:inherit}   /* 同上：禁掉 UA 的 13.3333px */
.ic:hover{color:var(--hd-fg)}
/* ⚠️ 2026-09-24 补（核实一处矛盾时量出来的真缺口）：**对话页的返回键不是 .nav .back，而是这个 .ic**
   （对话页有自己的页头 .hd，chatPage 自己写的），所以上一轮给 .nav .back 加的按下反馈**没覆盖到它**：
   实测按住时 bg/transform/opacity 与未按下**完全一致**（「:active」确实是 true，只是没有规则去用它）。
   对照方量到"返回键按住毫无变化"是对的 —— 他量的正是对话页；我量到 .nav .back 有变化也是对的。
   两个键现在都补上，口径一致：**瞬时、无过渡**（反馈的意义就是在 0ms 内告诉手指"我收到了"）。 */
.ic:active{background:var(--bg-active);transform:translateY(1px)}
.hd button.ava:active{filter:brightness(1.06);transform:translateY(1px)}
a:focus-visible,button:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hd a:focus-visible,.hd button:focus-visible{outline-color:var(--focus-hd,var(--focus))}

/* 消息流：内部滚动，底栏因此恒贴底 */
.stream{flex:1;scroll-padding-bottom:14px;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overflow-anchor:none;scroll-behavior:auto;
/* ⚠️ 这里**故意不要** scroll-behavior:smooth（2026-09-26 owner ② 实测，别再好心加回去）：
   带 smooth 时给 scrollTop 赋值会变成一段动画：
   · 进对话不是“立刻贴底”，而是从顶部**滚下去** —— 实测 0ms gap=0（三条还没撑满）、
     200ms gap=1721px、600ms gap=412px、一路 36 次 scroll 事件仍在滑；
   · 上翻补历史那句“高度差补偿”同样被动画化 ⇒ 正在读的那一行被顶走（看着就是“跳”）。
   即时落位才满足“第一屏立刻停在底部／上翻不跳”；将来要动效必须逐处显式打开。 */
  display:flex;flex-direction:column;gap:12px;padding:18px 16px 22px}
/* 2026-09-17 第61轮 UX：给消息加【行宽上限】——原来只有 88%，在宽屏上会拉出近千像素的长行，
   中文长回复最难读的就是这个；用 min() 保持手机端行为不变，只收窄宽屏。行高 1.7→1.75 略松一点。
   2026-09-23 界面标尺：手机端同步由 88% 收到 76%（留出对话流的呼吸感），圆角 14→16。 */
.msg{max-width:min(76%,var(--msg-w));padding:10px 14px;border-radius:var(--r-16);white-space:pre-wrap;word-break:break-word;
  font-size:var(--fs-body);line-height:1.75}
.me{align-self:flex-end;background:var(--me-bg);color:var(--me-fg);
  border-radius:var(--r-16) 16px 4px 16px}
.him{align-self:flex-start;background:var(--him-bg);color:var(--him-fg);border:1px solid var(--line);
  border-radius:var(--r-4) 16px 16px 16px}
body[data-decor~="paper"] .msg{font-family:var(--serif);font-size:var(--fs-body);border-radius:var(--r-3)}
.err{align-self:center;max-width:88%;background:var(--btn-bg);color:var(--btn-fg);font-size:var(--fs-sub);padding:9px 13px;border-radius:var(--r-10)}
.empty{margin:auto;text-align:center;padding:26px 18px;color:var(--empty-fg);background:var(--empty-bg);
  border:1px solid var(--line);border-radius:var(--r-14);font-size:var(--fs-sub);max-width:420px}
.empty b{color:var(--fg)}
/* "最早的消息就到这里了"（owner 2026-09-26：确实到底时给个很轻的提示，别夸张） */
.topend{font-size:var(--fs-cap);color:var(--hd-dim);text-align:center;padding:6px 0 0;letter-spacing:.02em}
.typing{font-size:var(--fs-title);font-weight:600;color:var(--hd-fg);line-height:1.3;display:flex;align-items:center;gap:2px}
.typing[hidden]{display:none}
.typing .td{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.25;margin-top:4px;
  animation:cgTyping 1.2s infinite}
.typing .td:nth-child(2){animation-delay:.2s}
.typing .td:nth-child(3){animation-delay:.4s}
@keyframes cgTyping{0%,60%,100%{opacity:.25}30%{opacity:1}}
/* 减少动效：三点保持静态可见（读得懂"在打字"），不做任何位移/缩放 */
@media (prefers-reduced-motion:reduce){.typing .td{animation:none;opacity:.6}}
.hint{flex:0 0 auto;display:none;padding:6px 16px 0;color:var(--dim);font-size:var(--fs-cap)}
.hint.on{display:block}
.flash{flex:0 0 auto;margin:12px 16px 0;background:var(--btn-bg);color:var(--btn-fg);padding:10px 12px;
  border-radius:var(--r-10);font-size:var(--fs-sub)}

/* 今天先聊到这儿：输入框旁边的说明（人话，不是技术提示） */
.locked{flex:0 0 auto;margin:10px 16px 0;padding:10px 12px;border-radius:var(--r-10);background:var(--btn-bg);
  color:var(--btn-fg);font-size:var(--fs-sub);line-height:1.6}
.bar textarea[disabled]{opacity:.85;cursor:default}
.bar button[disabled]{opacity:.45;cursor:default}
/* 2026-09-17 第65轮 UX：导师常给"三件事"这类清单，让它在消息里真正读得出来 */
.msg ul,.msg ol{margin:.55em 0;padding-left:1.4em}
.msg li{margin:.38em 0}                       /* 条目之间留缝，三件事不再挤成一坨 */
.msg li::marker{color:var(--brand-ink,var(--brand));font-weight:700}   /* 金色序号＝"这些是要做的" */
.msg li>p{margin:.15em 0}                     /* 条目内部的段落不要再撑开 */
.quota{flex:0 0 auto;padding:6px 16px 0;color:var(--dim);font-size:var(--fs-cap)}
.quota b{color:var(--brand-ink-hd,var(--brand))}
/* 2026-09-18 owner 要求：主页面清爽 —— 三个协议链接 + 我的入口收进【侧边栏】，点头像打开 */
.hd button.ava{padding:0;cursor:pointer}
.hd button.ava:hover{filter:brightness(1.12)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(84vw,320px);z-index:20;background:var(--panel);
  border-left:1px solid var(--line);transform:translateX(103%);visibility:hidden;transition:transform .2s ease,visibility .2s ease;overflow-y:auto;
  padding:14px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:-12px 0 30px rgba(0,0,0,.28)}
body.nav-open .drawer{transform:none;visibility:visible}
body.nav-open{overflow:hidden}
.navmask{position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.45)}
.navmask[hidden]{display:none}
.dhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dhd b{color:var(--brand-ink,var(--brand));letter-spacing:.08em}
.dclose{min-height:32px;width:32px;border-radius:var(--r-8);border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer}
.dsec{margin:14px 0 6px;color:var(--dim);font-size:var(--fs-cap);letter-spacing:.12em}
.drawer a{display:block;padding:11px 10px;border-radius:var(--r-10);color:var(--fg);text-decoration:none;min-height:44px}
.drawer a:active,.drawer a:focus-visible{background:rgba(201,162,39,.08)}
.dicp{margin-top:14px;color:var(--dim);font-size:var(--fs-cap)}
/* 2026-09-17 第65轮 UX：输入为空时发送键"看起来就点不动"。
   纯 CSS（textarea 与 button 同级 + textarea 本身 required）；不改任何 JS 或发送逻辑。 */
#say:placeholder-shown ~ button[type="submit"]{opacity:.5;pointer-events:none}
/* 2026-09-17 第62轮 UX：输入与按钮的手感（都是可验证的客观项，不涉及配色偏好） */
.bar button:active{transform:translateY(1px)}                     /* 按下有轻微位移＝"真的点到了" */
.bar button:disabled{transform:none}
::placeholder{color:var(--dim);opacity:1}                         /* Firefox 默认半透明占位字，读不清 */
.bar textarea{resize:none;line-height:1.55}                       /* 不被拖拽变形；多行时行距更顺 */
.bar textarea:focus{border-color:var(--focus)}                    /* 聚焦时边框也给信号（不只靠外圈） */
li::marker{font-weight:700}                                       /* "三件事"这类清单的序号更醒目 */

/* ── 老师名片（2026-09-27 · owner 交办）：底部弹层，不跳页 ──
   结构：遮罩 + 卡片（头像/名字/定位 → 介绍 → 企业微信二维码 → 常用入口）。
   尺寸与间距一律用令牌（样式标尺不许出现写死的字号/圆角）。 */
.tsmask{position:fixed;inset:0;z-index:24;background:rgba(0,0,0,.42)}
.tsmask[hidden]{display:none}
.tsheet{position:fixed;left:0;right:0;bottom:0;z-index:25;max-height:84vh;overflow-y:auto;
  background:var(--panel);border-top-left-radius:var(--r-card);border-top-right-radius:var(--r-card);
  box-shadow:0 -14px 34px rgba(0,0,0,.22);padding:var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-right)) calc(var(--sp-5) + env(safe-area-inset-bottom)) calc(var(--sp-4) + env(safe-area-inset-left))}
.tsheet[hidden]{display:none}
.tshead{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.tava{width:52px;height:52px;flex:0 0 52px;border-radius:var(--r-8);overflow:hidden;display:grid;place-items:center;
  background:var(--ava-bg);border:1px solid var(--ava-line);color:var(--ava-fg);font-size:var(--fs-title);font-weight:600}
.tswho{min-width:0;display:flex;flex-direction:column;gap:2px}
.tswho b{font-size:var(--fs-title);color:var(--fg)}
.tswho em{font-style:normal;color:var(--dim);font-size:var(--fs-sub)}
.tsclose{margin-left:auto;width:var(--tap);height:var(--tap);min-width:var(--tap);border-radius:var(--r-el);
  border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;font:inherit}
.tsintro{font-size:var(--fs-sub);line-height:1.85;color:var(--dim)}
.tsintro p{margin:0 0 var(--sp-2)}
.tsqr{margin:var(--sp-4) 0 0;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-14);
  background:var(--in-bg);text-align:center}
.tsqtitle{font-size:var(--fs-sub);color:var(--fg);margin-bottom:var(--sp-3)}
.tsqr img{display:block;margin:0 auto;border-radius:var(--r-8);background:#fff}
.tsqph{font-size:var(--fs-sub);color:var(--dim);line-height:1.9;padding:var(--sp-3) 0}
.tsqph span{font-size:var(--fs-cap);color:var(--hd-dim)}
.tslink{margin-top:var(--sp-4)}

/* 老师头像：有图用图、没图用首字（2026-09-27 owner 要"方形圆角、像微信"）。
   圆角由父元素给，图片铺满并裁切；换头像只需把图片放进 public/ 并在
   content/teacher-profiles.json 里写 avatar 字段，**不用改代码**。 */
.hd .ava img,.row .ava-s img,.tava img{width:100%;height:100%;object-fit:cover;display:block}

/* ── 「这一段的位置」卡（2026-09-27 · owner：放进成长界面）────────────────────────
   设计要点（都在判据里守着）：① 默认**收起**（要看的才点开）② 六格梯子只亮一格
   ③ 每一句"为什么"后面都能看到**他自己的原话** ④ 卡片里**不许**出现星号/数字等级/排名/购买入口
   ⑤ 没有结构化记录时显示"还没开始记录"，绝不编。 */
.poscard{margin-bottom:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);overflow:hidden}
.poscard>summary{list-style:none;cursor:pointer;padding:var(--sp-4);display:flex;align-items:baseline;gap:var(--sp-2);
  min-height:var(--tap);font-size:var(--fs-body);font-weight:600}
.poscard>summary::-webkit-details-marker{display:none}
.poscard>summary::after{content:'›';margin-left:auto;color:var(--dim);transform:rotate(90deg);transition:transform .2s ease}
.poscard[open]>summary::after{transform:rotate(-90deg)}
.poscard .posbody{padding:0 var(--sp-4) var(--sp-4)}
/* 折叠必须**真的**收起：<details> 的收起由浏览器 UA 样式负责，但实测在无头 Chromium 里
   用 getBoundingClientRect 量到的子元素高度仍是展开值（量法不可靠，也不排除个别引擎不生效）。
   这里显式写一条，让"默认收起"这件事**在任何引擎里都成立、也能被判据量出来**。 */
.poscard:not([open]) .posbody{display:none}
.posname{font-size:var(--fs-22);font-weight:600;letter-spacing:.04em;margin:0 0 var(--sp-1)}
.posname em{font-style:normal;color:var(--brand-ink,var(--brand))}
.possub{color:var(--dim);font-size:var(--fs-cap);line-height:1.7}
/* 六格梯子：**每格都能点**（点进去看那一阶的解释），当前那一阶用颜色 + 圆点标出来。
   标记只用"颜色 + 圆点 + 现在两个字"，**不用星号、不用数字、不用"已解锁/未解锁"**（游戏化会给压力）。 */
.posladder{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-1);margin:var(--sp-3) 0 var(--sp-1)}
.posladder a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:var(--tap);text-align:center;font-size:var(--fs-cap);color:var(--dim);
  text-decoration:none;border-radius:var(--r-6);background:var(--bg-active)}
.posladder a .dot{width:6px;height:6px;border-radius:50%;background:transparent}
.posladder a.on{color:var(--brand-ink,var(--brand));font-weight:600;box-shadow:inset 0 0 0 1.5px var(--brand)}
.posladder a.on .dot{background:var(--brand-ink,var(--brand))}
.poshere{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-2);font-size:var(--fs-sub)}
.poshere i{width:8px;height:8px;border-radius:50%;background:var(--brand-ink,var(--brand));font-style:normal}
.posstep{border:1px solid var(--line);border-radius:var(--r-8);margin-top:var(--sp-2);background:var(--panel)}
.posstep>summary{list-style:none;cursor:pointer;min-height:var(--tap);padding:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sub);font-weight:600}
.posstep>summary::-webkit-details-marker{display:none}
.posstep>summary::after{content:'›';margin-left:auto;color:var(--dim);transform:rotate(90deg);transition:transform .2s ease}
.posstep[open]>summary::after{transform:rotate(-90deg)}
.posstep .stbody{padding:0 var(--sp-3) var(--sp-3);font-size:var(--fs-sub);line-height:1.7;color:var(--fg)}
.posstep .now{font-size:var(--fs-cap);font-weight:400;color:var(--brand-ink,var(--brand));border:1px solid currentColor;border-radius:var(--r-6);padding:0 6px}
.posstep .sect{margin-top:var(--sp-2)}
.posstep .sect b{display:block;color:var(--dim);font-size:var(--fs-cap);margin-bottom:2px}
.posstep:not([open]) .stbody{display:none}
.poscap{text-align:center;color:var(--dim);font-size:var(--fs-cap);margin-bottom:var(--sp-3)}
.posevi{border-radius:var(--r-8);background:var(--bg-active);padding:var(--sp-3);font-size:var(--fs-sub);line-height:1.7}
.posfour{margin:var(--sp-3) 0 0;display:grid;gap:var(--sp-2)}
.posfour div{font-size:var(--fs-sub);color:var(--fg);line-height:1.65}
.posfour b{color:var(--dim);font-weight:600;margin-right:var(--sp-2)}
.poscmp{margin-top:var(--sp-3);display:grid;gap:var(--sp-2)}
.poscmp div{border:1px solid var(--line);border-radius:var(--r-8);padding:var(--sp-3);font-size:var(--fs-sub);line-height:1.7}
.poscmp b{display:block;color:var(--dim);font-size:var(--fs-cap);margin-bottom:var(--sp-1)}
/* 这一周的功课（2026-09-27 · owner：成长页要有"带学员训练"的东西，习惯才是最有用的）——
   刻意**不做**打卡/连击/连续天数：那是压力，一断就放弃。只给"这一周的一件小事"和"最近几次做到没有"。 */
.work{margin-bottom:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);padding:var(--sp-4)}
.work h3{margin:0 0 var(--sp-2);font-size:var(--fs-body);font-weight:600}
.work .w1{font-size:var(--fs-sub);line-height:1.75}
.work .w2{margin-top:var(--sp-2);font-size:var(--fs-sub);line-height:1.7;color:var(--dim)}
.work .rc{margin-top:var(--sp-3);display:grid;gap:var(--sp-1)}
.work .rc div{font-size:var(--fs-sub);line-height:1.7}
.work .rc i{font-style:normal;display:inline-block;min-width:4.6em;color:var(--dim)}
.work .strip{margin-top:var(--sp-3);display:flex;gap:var(--sp-2);flex-wrap:wrap}
.work .strip span{font-size:var(--fs-cap);border:1px solid var(--line);border-radius:var(--r-6);padding:2px 8px;color:var(--dim)}
.posweek{margin-top:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-8);padding:var(--sp-3);font-size:var(--fs-sub);line-height:1.7}
.posweek b{display:block;color:var(--dim);font-size:var(--fs-cap);margin-bottom:var(--sp-1)}
.posrec{margin-top:var(--sp-2);color:var(--fg)}
.posrestore{margin-bottom:var(--sp-4);border:1px dashed var(--line);border-radius:var(--r-card);
  padding:var(--sp-3) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  color:var(--dim);font-size:var(--fs-sub)}
.posrestore form{margin:0}
.posacts{margin-top:var(--sp-3);display:flex;gap:var(--sp-2);flex-wrap:wrap}
.posacts form{margin:0}

/* ── 未读角标（2026-09-27 owner："像微信那样显示未读条数"）──────────────────────────
   规矩：① **只**表示"导师给你发了新消息"，不许拿它提示功课/续费（那是催促）
        ② 0 条不渲染；③ 必须带文字（aria-label），不靠颜色单独表意；④ 99+ 封顶，不撑破布局。 */
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-8);background:#FA5151;color:#fff;font-size:var(--fs-10);line-height:1;
  font-weight:600;flex:0 0 auto}
/* 未读角标的位置（2026-09-27 owner 指正"怎么标到中间了"）：
   · 联系人行：**贴右**（和微信一样在行的最右侧），不是紧跟名字后面；
   · 底部 Tab：贴在**图标右上角**（微信同款），不是飘在那一格中间。 */
.row .badge{margin-left:auto}
.row .badge + .chev{margin-left:var(--sp-2)}
.tabbar .txi{position:relative;display:block}
.tabbar .txi .badge{position:absolute;top:-6px;left:15px;margin:0;box-shadow:0 0 0 2px var(--panel)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 底栏：sticky 贴底 0px + 安全区 */
.bar{position:sticky;bottom:0;z-index:4;flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;
  padding:12px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background:var(--bar-bg);border-top:1px solid var(--line)}
.bar textarea{flex:1;min-height:40px;max-height:134px;resize:none;padding:8px 15px;border-radius:var(--r-12);
  border:1px solid var(--line);background:var(--in-bg);color:var(--fg);font-family:inherit;font-size:var(--fs-body);line-height:1.45}
.bar textarea::placeholder{color:var(--dim);opacity:1}
.bar button{flex:0 0 auto;width:var(--tap);height:var(--tap);min-width:var(--tap);min-height:var(--tap);display:grid;place-items:center;
  border:1px solid var(--btn-bg);border-radius:var(--r-12);background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;padding:0;
  font:inherit}   /* 同上：禁掉 UA 的 13.3333px */
/* 语音输入（2026-09-26 owner 要）：只在浏览器真支持时才显示（JS 去掉 hidden），
   静音态走 in-bg/dim 保持"轻"，录音中点亮 btn-bg/btn-fg 一眼看得出在录；尺寸用 --tap 令牌。 */
.bar button.mic{background:var(--in-bg);color:var(--dim);border-color:var(--line)}
.bar button.mic[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.bar button.mic[hidden]{display:none}

/* 2026-09-23：设置面板整块 CSS（.scrim / .panel 系列 / .sws / .tick / .btn2 / .note / .seasons / .season）
   随 #skinPanel 一起删除 —— 面板 markup 与 JS 都已移除，这些类在页面上已 0 次使用。
   ⚠️ 注释里千万别写「.panel*」这种「星号紧跟斜杠」的写法：那会在注释内部提前出现结束符，
     后面的内容变成语法垃圾，浏览器按错误恢复会**连同紧随其后的第一个 {} 块一起丢弃**
     —— 2026-09-23 实测：就因为这一处把紧随其后的 .auth{...} 整条吞掉，登录/注册页顶部留白消失。 */

/* 登录 / 注册页（固定皮肤，不做切换入口） */
.auth{flex:1;min-height:0;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 40px}
.auth .box{width:100%;max-width:420px}
.auth h1{font-size:var(--fs-22);margin:0 0 4px}
.auth .sub{color:var(--dim);font-size:var(--fs-sub);margin-bottom:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-4)}
label{display:block;font-size:var(--fs-sub);color:var(--dim);margin:12px 0 6px}
input[type=checkbox],input[type=radio]{width:auto;min-width:0;padding:0;border:0;background:none;flex:0 0 auto}   /* 2026-09-22 根因修复：全局 input{width:100%} 会把勾选框拉成整行大方框 */
input{width:100%;padding:12px;border-radius:var(--r-10);border:1px solid var(--line);background:var(--in-bg);
  color:var(--fg);font-size:var(--fs-body)}
button.primary{margin-top:18px;width:100%;padding:13px;border:0;border-radius:var(--r-10);background:var(--btn-bg);
  color:var(--btn-fg);font-size:var(--fs-body);cursor:pointer}
.tabs{display:flex;gap:8px;margin-bottom:8px}
.tabs a{flex:1;text-align:center;padding:11px;border-radius:var(--r-10);border:1px solid var(--line);
  color:var(--dim);text-decoration:none;font-size:var(--fs-sub)}
.tabs a.on{background:var(--bg);color:var(--fg);border-color:var(--brand)}

/* 注册页：同意条款（两个书名号各是一个链接）；登录页底部另给一条常驻入口 */
.consent{margin:14px 0 0;font-size:var(--fs-sub);line-height:1.7;color:var(--dim);text-align:center}
.consent a{color:var(--brand-ink,var(--brand));text-decoration:underline;text-underline-offset:2px}
.legalft{margin:14px 2px 0;font-size:var(--fs-sub);text-align:center;color:var(--dim)}
.legalft a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}

/* ══ 注册/登录页 v2（2026-09-19 第80轮 owner 要求：做高级一点 + 选择框美化 + 须知进弹窗）══
   作用域一律限定在 .auth 内：这是全局样式表，别的页面（如"我的开关"）也有 input/checkbox，
   不能被我改出连带影响。 */
.auth .brand{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 0 18px;text-align:center}
.auth .seal{width:54px;height:54px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:var(--fs-23);font-weight:600;
  color:var(--brand-ink,var(--brand));border:1px solid rgba(201,162,39,.45);
  background:radial-gradient(120% 120% at 30% 18%,rgba(201,162,39,.24),rgba(201,162,39,.05));
  box-shadow:0 8px 26px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07)}
.auth h1{font-size:var(--fs-22);letter-spacing:.08em;margin:10px 0 0}
.auth .sub{color:var(--dim);font-size:var(--fs-sub);line-height:1.7;margin:6px 0 0;max-width:34em}
.auth .card{background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0)),var(--panel);
  border:1px solid var(--line);border-radius:var(--r-16);padding:22px;box-shadow:0 20px 54px rgba(0,0,0,.4)}
.auth .tabs{gap:6px;padding:4px;border:1px solid var(--line);border-radius:var(--r-12);background:var(--bg);margin-bottom:16px}
.auth .tabs a{border:0;border-radius:var(--r-9);padding:10px;font-size:var(--fs-sub);transition:background .18s ease,color .18s ease}
.auth .tabs a.on{background:linear-gradient(180deg,rgba(201,162,39,.18),rgba(201,162,39,.06));color:var(--fg);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.4)}
.auth .fld{margin:14px 0 0}
.auth .fld>label,.auth .fld>.lbl{display:block;font-size:var(--fs-sub);letter-spacing:.08em;color:var(--dim);margin:0 0 7px}
.auth input[type=text],.auth input[type=password],.auth input:not([type]){width:100%;padding:13px 14px;border-radius:var(--r-12);
  border:1px solid var(--in-line);background:var(--in-bg);color:var(--fg);font-size:var(--fs-body);
  transition:border-color .18s ease,box-shadow .18s ease}
.auth input::placeholder{color:var(--dim);opacity:.65}
.auth input[type=text]:focus,.auth input[type=password]:focus,.auth input:not([type]):focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(201,162,39,.18)}
.auth input.code{font-size:var(--fs-22);letter-spacing:.42em;text-align:center;padding-left:calc(14px + .42em);
  font-variant-numeric:tabular-nums}
.auth .pw{position:relative}
.auth .pw input{padding-right:68px}
.auth .eye{position:absolute;right:7px;top:50%;transform:translateY(-50%);min-height:var(--tap);padding:0 11px;border:0;
  border-radius:var(--r-9);background:transparent;color:var(--dim);font-size:var(--fs-sub);cursor:pointer}
.auth .eye:hover{color:var(--brand-ink,var(--brand))}
.auth .tip{margin:8px 0 0;font-size:var(--fs-cap);line-height:1.7;color:var(--dim)}
.auth .tip.bad{color:#E8A98C}
.auth .tip.ok{color:var(--brand-2)}
.auth .tip b{color:var(--fg)}
.auth .wxrow{margin-top:var(--sp-3)}

/* ══ 聊天页 P1（2026-09-20）：时间分隔 + 长按动作条 + Toast + 气泡收角 ══ */
.tsep{text-align:center;font-size:var(--fs-cap);color:var(--dim);margin:var(--sp-3) 0 var(--sp-2)}
/* 2026-09-24 分隔感重做（老板真机反馈："聊天框是没有分割线的，看着就都堆在一起了"）。
   【先量再改】改前实测（390 宽、生产 CSS、合成对话）：
     · 容器的 flex gap = 12px，而消息的 margin-top 才是"额外"那一档：
       同侧连发 = 12+4  = **16px**；换人 = 12+12 = **24px**；**紧跟在 .tsep 之后 = 12+0 = 20px**。
     · **真 bug**：「.msg.him + .msg.me」 / 「.msg + .msg」 这类**相邻选择器**只要中间夹了一个
       「时间分隔那个 div」 就不再匹配 ⇒ 那条消息的 margin-top 直接变成 **0**
       （实测 #1、#5 就是 0px）。而时间分隔恰恰出现在"隔了一会儿又回来说话"的拐点上 —— 最该有呼吸感的地方最挤。
   【改法】照微信：**同侧收紧、换人明显留白、时间分隔上下都留白**，一律靠间距与对齐，**不画线**。
   同时把"换人"改成**显式类 .brk**（渲染时按上一条的 role 打），这样即使中间夹着 .tsep 也照样生效，
   不再依赖脆弱的相邻选择器；相邻选择器保留，是为了兼容老渲染路径。 */
.msg{margin-top:6px}                                       /* 兜底：任何情况下都有间距（不再出现 0px） */
.msg.me + .msg.me,.msg.him + .msg.him{margin-top:6px}     /* 同侧连续：收紧（合计 18px） */
/* 2026-09-29 owner 交办：导师的回复"一段一个气泡"。同一句里的几段要比"同侧连发"再紧一点
   （它们本来就是一口气说完的几句），但要看得出是分开的几条 —— 4px 是微信那种手感。 */
.msg.part{margin-top:4px}
/* 新到的那条**逐段冒出**：第一段立刻出现，后面每段延迟 0.22s（延迟由行内 style 给）。
   fill:both ⇒ 延迟期间保持"未出现"状态，所以看到的是"一句一句发出来"。
   全局的 prefers-reduced-motion 规则会把它关掉（这类动效一律尊重系统设置）。 */
@keyframes cgMsgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.msg.fresh{animation:cgMsgIn .32s var(--ease) both}
.msg.him + .msg.me,.msg.me + .msg.him{margin-top:var(--sp-4)} /* 换人：明显留白（合计 28px） */
.msg.brk{margin-top:var(--sp-4)}                          /* 换人的显式标记（中间有 .tsep 也生效） */
.tsep + .msg{margin-top:var(--sp-3)}                      /* 时间分隔之后：至少 24px，别再贴着 */
.faq-x{padding:var(--sp-3) 0;position:relative}
.faq-x::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.faq-x:last-child::after{content:none}
.faq-q{font-size:var(--fs-body);font-weight:600}
.faq-a{font-size:var(--fs-sub);color:var(--dim);line-height:1.8;margin-top:4px}
.btn-x.danger{background:var(--danger);color:#fff}
.btn-x.sm{min-height:var(--tap);padding:0 var(--sp-3);font-size:var(--fs-sub)}
.cgconfirm{position:fixed;left:0;right:0;bottom:0;z-index:65;background:var(--panel);border-top:1px solid var(--line);
  border-radius:var(--r-16) 16px 0 0;padding:var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-right)) calc(var(--sp-4) + env(safe-area-inset-bottom)) calc(var(--sp-4) + env(safe-area-inset-left));
  box-shadow:0 -12px 40px rgba(0,0,0,.28)}
.cgconfirm[hidden]{display:none}
.cgconfirm .cf-t{font-size:var(--fs-body);font-weight:600;margin-bottom:var(--sp-2)}
.cgconfirm .cf-b{font-size:var(--fs-sub);color:var(--dim);line-height:1.85}
.cgconfirm .cf-a{display:flex;gap:var(--sp-2);margin-top:var(--sp-4)}
.cgconfirm .cf-a button{flex:1;min-height:var(--tap);border-radius:var(--r-el);border:1px solid var(--line);
  background:transparent;color:var(--fg);font:inherit;font-size:var(--fs-sub);cursor:pointer}
.cgconfirm .cf-a button.danger{background:var(--danger);border-color:var(--danger);color:#fff}
/* 折叠（2026-09-20 · 老板要求"文字能少尽量少"）：解释性文字统一收进来，首屏只看结论 */
details.fold{margin:6px 0 0}
details.fold>summary{cursor:pointer;list-style:none;font-size:var(--fs-cap);color:var(--dim);
  display:inline-flex;align-items:center;gap:5px;min-height:var(--tap)}   /* 2026-09-23：原 26px ⇒ 独立热区只有 26 高，靠外层 label 兜着才没被抓；改成标尺 tap */
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"▸";font-size:var(--fs-10);transition:transform .16s ease}
details.fold[open]>summary::before{transform:rotate(90deg)}
details.fold>p,details.fold>div{margin:4px 0 0;font-size:var(--fs-cap);line-height:1.75;color:var(--dim)}
summary.faq-q{list-style:none;cursor:pointer}
summary.faq-q::-webkit-details-marker{display:none}
.cgsheet{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-12);
  box-shadow:0 12px 40px rgba(0,0,0,.28);overflow:hidden;min-width:150px}
.cgsheet button{display:block;width:100%;min-height:44px;padding:0 var(--sp-4);border:0;background:transparent;
  color:var(--fg);font:inherit;font-size:var(--fs-sub);text-align:left;cursor:pointer}
.cgsheet button:active{background:var(--me-bg)}
.cgtoast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;
  background:rgba(0,0,0,.78);color:#fff;font-size:var(--fs-sub);padding:9px 14px;border-radius:var(--r-el)}
/* 年龄段：原生下拉换成三格分段按钮（提交值仍是 name=ageband） */
.auth .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.auth .seg label{position:relative;margin:0;display:block}
.auth .seg input{position:absolute;opacity:0;width:1px;height:1px}
.auth .seg span{display:flex;align-items:center;justify-content:center;min-height:50px;padding:8px 6px;border-radius:var(--r-12);
  border:1px solid var(--line);background:var(--in-bg);color:var(--dim);font-size:var(--fs-sub);line-height:1.35;
  text-align:center;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease}
.auth .seg input:checked+span{border-color:var(--brand);color:var(--fg);
  background:linear-gradient(180deg,rgba(201,162,39,.18),rgba(201,162,39,.05));
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.35)}
.auth .seg input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
/* 自绘勾选框：金底白勾，触控目标 ≥44 */
.auth .chk{display:flex;gap:11px;align-items:flex-start;margin:14px 0 0;padding:2px 0;font-size:var(--fs-sub);line-height:1.75;
  color:var(--fg);cursor:pointer;min-height:44px}
.auth .chk input{position:absolute;opacity:0;width:1px;height:1px}
.auth .chk .box{flex:0 0 23px;width:23px;height:23px;margin-top:1px;border-radius:var(--r-7);border:1px solid var(--line);
  background:var(--in-bg);display:grid;place-items:center;transition:background .16s ease,border-color .16s ease}
.auth .chk .box::after{content:"";width:11px;height:6px;margin-top:-3px;border-left:2.2px solid var(--btn-fg);
  border-bottom:2.2px solid var(--btn-fg);transform:rotate(-45deg) scale(.4);opacity:0;transition:all .16s ease}
.auth .chk input:checked+.box{background:var(--btn-bg);border-color:var(--btn-bg)}
.auth .chk input:checked+.box::after{opacity:1;transform:rotate(-45deg) scale(1)}
.auth .chk input:focus-visible+.box{outline:3px solid var(--focus);outline-offset:2px}
.auth .chk.sub{color:var(--dim);font-size:var(--fs-sub)}
.auth .rule{height:1px;background:var(--line);margin:20px 0 0}
.auth .lnk{display:inline;min-height:auto;padding:0;margin:0 2px;border:0;background:none;color:var(--brand-ink,var(--brand));
  font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.auth button.primary{margin-top:18px;width:100%;min-height:50px;padding:14px;border:0;border-radius:var(--r-12);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0)),var(--btn-bg);color:var(--btn-fg);
  font-size:var(--fs-body);font-weight:600;letter-spacing:.04em;cursor:pointer;
  box-shadow:0 10px 26px rgba(201,162,39,.18);transition:filter .16s ease,transform .12s ease}
.auth button.primary:hover{filter:brightness(1.06)}
.auth button.primary:active{transform:translateY(1px)}
.auth .err{margin:14px 0 0;padding:11px 13px;border-radius:var(--r-11);font-size:var(--fs-sub);line-height:1.7;
  color:#F6DFD2;background:rgba(198,94,58,.16);border:1px solid rgba(198,94,58,.42)}
.auth .err[hidden]{display:none}
.auth .fine{margin:12px 0 0;font-size:var(--fs-cap);line-height:1.75;color:var(--dim);text-align:center}
/* 须知弹窗 */
.auth .dlg{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px}
.auth .dlg[hidden]{display:none}
.auth .dlgmask{position:fixed;inset:0;background:rgba(4,7,8,.68)}
.auth .dlgbox{position:relative;z-index:1;width:min(680px,100%);max-height:min(86vh,780px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-18);overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.6)}
.auth .dlghd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--hd-bg)}
.auth .dlghd b{font-size:var(--fs-sub);letter-spacing:.1em;color:var(--brand-ink,var(--brand))}
.auth .dlghd span{margin-left:auto;font-size:var(--fs-cap);color:var(--dim)}
.auth .dlgx{min-height:36px;min-width:36px;border-radius:var(--r-10);border:1px solid var(--line);background:transparent;
  color:var(--dim);cursor:pointer;font-size:var(--fs-sub)}
.auth .dlgx:hover{color:var(--fg)}
.auth .dlgbd{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 22px calc(22px + env(safe-area-inset-bottom))}
.auth .dlgft{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px;
  border-top:1px solid var(--line);background:var(--bar-bg)}
.auth .dlglnk{font-size:var(--fs-sub);color:var(--dim)}
.auth .dlglnk a{color:var(--brand-ink,var(--brand));text-decoration:none;margin-left:8px}
.auth .dlgbtn{display:flex;gap:8px;margin-left:auto}
.auth button.ghost{min-height:44px;padding:0 16px;border-radius:var(--r-11);border:1px solid var(--line);background:transparent;
  color:var(--dim);cursor:pointer;font-size:var(--fs-sub)}
.auth button.ghost:hover{color:var(--fg)}
.auth #agreeBtn{min-height:44px;padding:0 20px;border:0;border-radius:var(--r-11);background:var(--btn-bg);color:var(--btn-fg);
  font-weight:600;font-size:var(--fs-sub);cursor:pointer}
body.dlg-open{overflow:hidden}
/* 弹窗里的须知排版：内容原样来自 noticeBody，这里只调排版（行距/标题/列表/间距） */
.auth .dlgbd .app{display:block;padding:0;min-height:0}
.auth .dlgbd .doc,.auth .dlgbd .wrap{max-width:none;margin:0;padding:0}
.auth .dlgbd .nav{display:none}
.auth .dlgbd h1{font-size:var(--fs-h1);font-weight:600;letter-spacing:.08em;margin:0 0 6px;color:var(--fg)}
.auth .dlgbd h2{font-size:var(--fs-title);letter-spacing:.06em;margin:24px 0 8px;padding-left:11px;color:var(--brand-ink,var(--brand));
  border-left:3px solid var(--brand)}
.auth .dlgbd p,.auth .dlgbd li{font-size:var(--fs-sub);line-height:1.95;color:var(--fg)}
.auth .dlgbd ul{padding-left:20px;margin:8px 0}
.auth .dlgbd li{margin:.42em 0}
.auth .dlgbd li::marker{color:var(--brand-ink,var(--brand))}
.auth .dlgbd b{color:var(--brand-ink,var(--brand))}
.auth .dlgbd .meta{color:var(--dim);font-size:var(--fs-sub);margin:2px 0 14px}
.auth .dlgbd .flash{margin:0 0 14px}
@media (max-width:480px){.auth .seg{grid-template-columns:1fr;gap:6px}.auth .dlg{padding:10px}
  .auth .dlgbox{max-height:90vh;border-radius:var(--r-16)}.auth .dlgft{gap:8px}.auth .dlgbtn{width:100%}
  .auth button.ghost,.auth #agreeBtn{flex:1}}
@media (prefers-reduced-motion:reduce){.auth .seg span,.auth .chk .box,.auth .chk .box::after,
  .auth input,.auth button.primary{transition:none}}

/* 对话页：条款入口贴底常驻。刻意放在 .bar【之上】——
   底栏 .bar 必须是最后一个 flex 项，否则 mobile-check 的"底栏贴底 ≤1px"会假红。 */
.legalbar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:2px;
  padding:2px 16px 0;background:var(--bar-bg);color:var(--dim);font-size:var(--fs-cap)}
.legalbar a{color:var(--dim);text-decoration:underline;text-underline-offset:2px;
  padding:4px 8px;border-radius:var(--r-6)}
.legalbar a:focus-visible{outline:3px solid var(--focus);outline-offset:1px}

/* 合规披露页 /privacy 与 /terms：手机优先、零外链、匿名可看 */
.chk{display:flex;gap:11px;align-items:flex-start;margin:14px 0 0;padding:6px 0;font-size:var(--fs-sub);line-height:1.6;position:relative;min-height:44px;cursor:pointer}
.chk input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chk .box{flex:0 0 23px;width:23px;height:23px;margin-top:1px;border-radius:var(--r-7);border:1px solid var(--line);background:var(--in-bg);position:relative}
.chk .box::after{content:'';position:absolute;left:6px;top:6px;width:11px;height:6px;border-left:2.2px solid var(--btn-fg);border-bottom:2.2px solid var(--btn-fg);transform:rotate(-45deg) scale(.6);opacity:0;transition:opacity .12s,transform .12s}
.chk input:checked+.box{background:var(--btn-bg);border-color:var(--btn-bg)}
.chk input:checked+.box::after{opacity:1;transform:rotate(-45deg) scale(1)}
.chk input:focus-visible+.box{outline:3px solid var(--focus);outline-offset:2px}
.chk.sub{color:var(--dim);font-size:var(--fs-sub)}
.chk span{min-width:0}
.doc{flex:1;min-height:0;overflow-y:auto;padding:20px 16px calc(30px + env(safe-area-inset-bottom))}
.doc .wrap{width:100%;max-width:var(--read-w);margin:0 auto}   /* 640→--read-w(40em)：全站只留一个可读行宽（2026-09-27） */
.doc h1{font-size:var(--fs-h1);font-weight:600;line-height:1.4;margin:0 0 6px}
.doc .meta{color:var(--dim);font-size:var(--fs-cap);margin:0 0 14px}
.doc h2{font-size:var(--fs-title);line-height:1.5;margin:24px 0 6px;padding-left:9px;
  border-left:3px solid var(--brand);color:var(--fg)}
.doc p{margin:8px 0;font-size:var(--fs-sub);line-height:1.8;color:var(--fg)}
.doc ul,.doc ol{margin:6px 0;padding-left:20px}
.doc li{margin:6px 0;font-size:var(--fs-sub);line-height:1.75;color:var(--fg)}
.doc b{font-weight:600}
.doc .key{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-12);
  padding:12px 14px;margin:12px 0}
.doc .key p:first-child{margin-top:0}
.doc .key p:last-child{margin-bottom:0}
.doc a{color:var(--brand-ink,var(--brand))}
.doc .nav{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0;padding-top:14px;
  border-top:1px solid var(--line)}
.doc .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-10);color:var(--fg);text-decoration:none;font-size:var(--fs-sub)}
/* 行内链接的触控热区（2026-09-23）：判据要求全站 <44px 可点元素 = 0，而这些链接长在正文里，
   直接撑高会毁掉行距 —— 所以用「padding 撑高 + 负 margin 抵消」：视觉行高不变，border-box 到位 44px。 */
.doc .meta a[href],.page p a[href]{display:inline-block;min-height:var(--tap);padding:13px 0;margin:-13px 0}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
