/* 阅读进度条：用 transform: scaleX 而不是 width。
   动 width 每帧都会触发整页重排（layout），滚动时肉眼看不出来但手机上会掉帧；
   transform 只走合成层。曲线也从 linear 换成有加速度的 ease-out。 */
#progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  background:linear-gradient(90deg,var(--gold-2),var(--gold),#ffe6ad);
  box-shadow:0 0 12px rgba(242,193,90,.6);
  transition:transform .12s cubic-bezier(.22,1,.36,1);
}

/* 收藏本站（星形）。注意：浏览器不允许网页自己往书签栏加东西，
   所以这个按钮只负责「教客户按一下 Ctrl+D」，不能假装已经收藏成功 */
.bm-btn svg{display:block;transition:transform .2s var(--ease);}

.bm-btn:hover svg{transform:scale(1.1);}

.bm-btn.on{border-color:var(--gold-line);color:var(--gold);}

.bm-btn.on .bm-star{fill:var(--gold);stroke:var(--gold);}


.bm-tip{
  position:fixed;z-index:180;width:274px;max-width:calc(100vw - 28px);
  background:var(--solid);border:1px solid var(--line-2);border-radius:14px;
  padding:13px 14px 11px;box-shadow:0 22px 56px rgba(0,0,0,.3);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s var(--ease),transform .22s var(--ease);
}

html[data-theme="light"] .bm-tip{background:#fff;box-shadow:0 20px 50px rgba(40,30,10,.16);}

.bm-tip.on{opacity:1;transform:none;pointer-events:auto;}

.bm-tip b{display:block;font-size:13px;margin-bottom:6px;}

.bm-tip p{margin:0;font-size:12.2px;line-height:1.78;color:var(--text-2);}

.bm-tip kbd{
  display:inline-block;font-family:inherit;font-size:11.5px;font-weight:700;
  padding:1px 6px;margin:0 1px;border-radius:5px;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);
}

.bm-tip-act{display:flex;justify-content:flex-end;margin-top:10px;}

.bm-tip-act button{
  font-family:inherit;font-size:12px;font-weight:700;padding:6px 13px;border-radius:9px;
  background:var(--gold);color:var(--gold-ink);border:0;cursor:pointer;transition:.18s;
}

html[data-theme="light"] .bm-tip-act button{color:#fff;}

.bm-tip-act button:hover{filter:brightness(1.06);}

.bm-tip::before{
  content:'';position:absolute;top:-5.5px;right:var(--bm-arrow,40px);width:9px;height:9px;
  background:inherit;border-left:1px solid var(--line-2);border-top:1px solid var(--line-2);
  transform:rotate(45deg);
}

  .bm-tip{left:14px;right:14px;width:auto;}

  .bm-tip::before{display:none;}


/* 汉堡 */
.burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--panel);}

.burger i{width:15px;height:1.6px;background:var(--text-2);border-radius:2px;transition:.28s var(--ease);}

.burger.on i:nth-child(1){transform:translateY(5.6px) rotate(45deg);}

.burger.on i:nth-child(2){opacity:0;}

.burger.on i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg);}


.mpanel{
  position:fixed;top:70px;left:0;right:0;z-index:99;display:none;
  background:var(--nav-bg);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border-bottom:1px solid var(--line);padding:10px 0 22px;
}

.mpanel.on{display:block;animation:mpIn .3s var(--ease);}

.mpanel a{display:block;padding:13px 24px;font-size:15px;color:var(--text-2);border-bottom:1px solid var(--line);}

.mpanel a:last-child{border-bottom:none;}


/* ---- 图标（内联 SVG，跨平台一致） ---- */
.sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* 购买按钮下面的次要出口：想先白嫖的客户也有路走，不至于以为必须付钱才能用 */
.pcard .buy-alt{
  display:block;text-align:center;margin-top:11px;font-size:12px;color:var(--muted);
  border-bottom:0;transition:color .2s;
}

.pcard .buy-alt:hover{color:var(--gold);}

/* 2026-11-03 删掉一条裸的 `.burger{display:flex;}`：
   它原来应该在某个 @media 里，11-02 删「开通会员」弹窗时把外层的 @media 一起删了，
   只剩这一行留在全局作用域 —— 结果汉堡按钮在 1440 宽的大屏上也一直显示（首页改版时发现）。
   汉堡的显示/隐藏在 style-new.css 和 _cols.css 的媒体查询里各管各的断点，这里不再重复。 */

/* ---- 试用弹窗 ---- */
.trial-mask{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(8,12,18,.68);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .26s var(--ease);
}

.trial-mask.on{opacity:1;pointer-events:auto;}

.trial-box{
  width:min(580px,100%);max-height:min(88vh,780px);overflow:auto;position:relative;
  border-radius:18px;background:var(--panel);border:1px solid var(--line-2);
  box-shadow:0 44px 110px rgba(0,0,0,.42);
  transform:translateY(16px) scale(.984);transition:transform .3s var(--ease);
}

.trial-mask.on .trial-box{transform:none;}

.trial-hd{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line-2);}

.trial-hd h3{font-size:15.5px;margin:0;font-weight:750;letter-spacing:.01em;}

.trial-hd .tbadge{font-size:10px;font-weight:800;color:#04160f;background:linear-gradient(135deg,#3ddc97,#149a66);border-radius:999px;padding:3px 8px;}

.trial-x{margin-left:auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--line-2);background:transparent;color:var(--text-2);font-size:15px;line-height:1;cursor:pointer;transition:background .2s,color .2s;}

.trial-x:hover{background:var(--panel-2);color:var(--text);}

.trial-bd{padding:18px;}

.trial-load{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 0 22px;text-align:center;}

.tring{width:34px;height:34px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--gold);animation:tspin .9s linear infinite;}

.trial-load b{font-size:13.5px;font-weight:700;}

.trial-load span{font-size:12px;color:var(--text-2);line-height:1.6;max-width:360px;}

.trial-img{width:100%;max-height:min(54vh,430px);object-fit:contain;border-radius:12px;display:block;border:1px solid var(--line-2);background:var(--panel-2);}

.trial-txt{font-size:13.5px;line-height:1.85;white-space:pre-wrap;background:var(--panel-2);border:1px solid var(--line-2);border-radius:12px;padding:14px 15px;color:var(--text);}

.trial-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--text-2);}

.trial-meta i{font-style:normal;background:var(--panel-2);border:1px solid var(--line-2);border-radius:999px;padding:3px 9px;}

.trial-err{font-size:13px;line-height:1.8;color:var(--text);background:rgba(220,120,60,.08);border:1px solid rgba(220,120,60,.28);border-radius:12px;padding:14px 15px;}

.trial-ft{padding:0 18px 18px;display:flex;flex-direction:column;gap:9px;}

.trial-ft .btn{width:100%;justify-content:center;}


/* ---- 开通会员 / 联系客服 弹窗 ---- */
.buy-box{width:min(620px,100%);}

/* 三档（1 年 / 2 年 / 3 年）。原来是两列「年费 / 终身」，2026-10-30 改成三档固定期限，
   两列会让第三张单独掉到下一行，所以这里改成 3 列。 */
.buy-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:15px;}

.buy-plan{
  text-align:left;padding:11px 14px;border-radius:13px;cursor:pointer;font-family:inherit;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);
  transition:border-color .2s,background .2s,transform .25s var(--ease);
}

.buy-plan:hover{transform:translateY(-1px);border-color:var(--gold-line);}

.buy-plan b{display:block;font-size:21px;line-height:1.3;letter-spacing:-.01em;}

.buy-plan span{font-size:11.5px;color:var(--text-2);}

.buy-plan.on{border-color:var(--gold);background:var(--gold-soft);}

.buy-plan.on b{color:var(--gold);}

.buy-main{display:grid;grid-template-columns:212px 1fr;gap:16px;align-items:start;}

.buy-qr{width:100%;height:auto;border-radius:12px;border:1px solid var(--line-2);display:block;background:#fff;}

.buy-steps{list-style:none;margin:0;padding:0;counter-reset:s;}

.buy-steps li{position:relative;padding-left:26px;margin-bottom:12px;counter-increment:s;}

.buy-steps li:last-child{margin-bottom:0;}

.buy-steps li::before{
  content:counter(s);position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;
  background:var(--gold);color:var(--gold-ink);font-size:11px;font-weight:800;line-height:18px;text-align:center;
}

.buy-steps b{display:block;font-size:12.8px;margin-bottom:2px;font-weight:750;}

.buy-steps span{display:block;font-size:11.8px;line-height:1.72;color:var(--text-2);}

.buy-steps em{font-style:normal;color:var(--gold);font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums;}

.buy-note{
  margin:15px 0 0;padding:11px 13px;border-radius:12px;font-size:11.5px;line-height:1.78;
  color:var(--text-2);background:var(--panel-2);border:1px solid var(--line-2);
}

.buy-note b{color:var(--gold);}

.buy-note a{color:var(--gold);border-bottom:1px solid var(--gold-line);}

.buy-acts{display:flex;gap:9px;margin-top:15px;}

.buy-acts .btn{flex:1;justify-content:center;}

.kefu-box{width:min(430px,100%);}

.kefu-pic{width:100%;height:auto;max-width:322px;display:block;margin:0 auto;border-radius:14px;border:1px solid var(--line-2);background:#fff;}

.kefu-cap{text-align:center;font-size:12px;line-height:1.75;color:var(--text-2);margin:11px 0 0;}

/* 右下角浮动客服 */
.kfab{
  position:fixed;right:20px;bottom:22px;z-index:150;
  display:flex;align-items:center;gap:7px;padding:11px 15px;border-radius:999px;
  background:var(--gold);color:var(--gold-ink);border:0;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:750;box-shadow:0 14px 34px rgba(0,0,0,.26);
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),background .2s;
}

.kfab.on{opacity:1;pointer-events:auto;transform:none;}

.kfab:hover{background:var(--hl-1);}


/* ---- 悬浮 AI 客服窗 ---- */
.kchat{
  position:fixed;right:20px;bottom:84px;z-index:160;
  width:364px;max-width:calc(100vw - 32px);height:min(546px,calc(100vh - 132px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line-2);border-radius:18px;
  box-shadow:0 34px 84px rgba(0,0,0,.34);
  opacity:0;pointer-events:none;transform:translateY(12px) scale(.986);
  transition:opacity .24s var(--ease),transform .28s var(--ease);
}

/* 深色主题的 --panel 是半透明，聊天窗必须给实底，否则后面文字会透上来 */
html[data-theme="dark"] .kchat{background:#0e1217;}

.kchat.on{opacity:1;pointer-events:auto;transform:none;}

.kc-hd{
  flex:none;display:flex;align-items:center;gap:9px;padding:11px 12px;
  border-bottom:1px solid var(--line-2);background:var(--gold-soft);
}

.kc-avt{
  width:32px;height:32px;flex:none;border-radius:10px;background:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;
}

.kc-tt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.32;}

.kc-tt b{font-size:13.5px;font-weight:750;letter-spacing:.01em;}

.kc-tt i{font-style:normal;font-size:11px;color:var(--muted);}

.kc-x{
  flex:none;width:28px;height:28px;border-radius:8px;border:1px solid var(--line-2);
  background:transparent;color:var(--text-2);font-size:13px;line-height:1;cursor:pointer;transition:.2s;
}

.kc-x:hover{color:var(--text);background:var(--panel-2);}

.kc-bd{
  flex:1;min-height:0;overflow:auto;padding:13px 12px 6px;
  display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;
}

.kc-row{display:flex;flex-direction:column;gap:7px;max-width:100%;}

.kc-row.me{align-items:flex-end;}

.kc-bub{
  font-size:13px;line-height:1.72;white-space:pre-wrap;word-break:break-word;
  padding:9px 12px;border-radius:13px;background:var(--panel-2);border:1px solid var(--line-2);
  color:var(--text);max-width:88%;
}

.kc-row.me .kc-bub{background:var(--gold-soft);border-color:var(--gold-line);color:var(--text);}

/* 浅色主题下 --panel-2 是纯白，跟窗底同色，气泡会糊在一起，换个浅米色 */
html[data-theme="light"] .kc-bub{background:#f6f3ec;}

html[data-theme="light"] .kc-row.me .kc-bub{background:#fdf1d8;}

.kc-acts{display:flex;flex-wrap:wrap;gap:6px;}

.kc-act{
  font-family:inherit;font-size:11.8px;font-weight:600;line-height:1.4;
  padding:6px 11px;border-radius:999px;cursor:pointer;
  background:var(--gold);color:var(--gold-ink);border:1px solid transparent;transition:.18s;
}

/* 浅色主题的 --gold 是深金棕，配深褐字对比度不够，换白字才看得清 */
html[data-theme="light"] .kc-act{color:#fff;}

.kc-act:hover{filter:brightness(1.06);}

.kc-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}

.kc-quick button{
  font-family:inherit;font-size:11.8px;padding:6px 11px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);color:var(--text-2);transition:.18s;
}

.kc-quick button:hover{border-color:var(--gold-line);color:var(--gold);}

.kc-typing{display:inline-flex;gap:4px;align-items:center;padding:11px 13px;}

.kc-typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:kcblink 1.2s infinite;}

.kc-typing i:nth-child(2){animation-delay:.18s;}

.kc-typing i:nth-child(3){animation-delay:.36s;}

.kc-ft{
  flex:none;display:flex;gap:7px;align-items:flex-end;padding:9px 11px 6px;
  border-top:1px solid var(--line-2);
}

.kc-ft textarea{
  flex:1;min-width:0;resize:none;max-height:88px;font-family:inherit;
  font-size:13px;line-height:1.5;padding:9px 11px;border-radius:11px;
  background:var(--bg-soft);border:1px solid var(--line-2);color:var(--text);outline:0;
}

.kc-ft textarea:focus{border-color:var(--gold-line);}

.kc-send{
  flex:none;font-family:inherit;font-size:12.8px;font-weight:700;
  padding:9px 14px;border-radius:11px;border:0;cursor:pointer;
  background:var(--gold);color:var(--gold-ink);transition:.18s;
}

.kc-send:disabled{opacity:.55;cursor:default;}

.kc-note{
  flex:none;margin:0;padding:0 12px 9px;font-size:10.8px;line-height:1.5;color:var(--muted);
}

.kc-note button{
  font-family:inherit;font-size:10.8px;color:var(--gold);background:none;border:0;
  border-bottom:1px solid var(--gold-line);padding:0;cursor:pointer;
}

  .kchat{
    right:0;bottom:0;left:0;top:0;width:100%;height:100%;
    max-width:none;border-radius:0;border:0;
  }

  .kfab{right:14px;bottom:14px;padding:10px 14px;font-size:12.5px;}

  .buy-main{grid-template-columns:1fr;}

  .buy-qr{max-width:250px;margin:0 auto;}

  .buy-plans{gap:8px;}
  /* 注意：这一段外面没有 @media！文件里一条媒体查询都没有，
     所以这些「手机样式」其实一直在所有屏幕上生效。
     原来 `.buy-plans` 两列被这里的 1fr 盖成了竖排（只是两档时看不出问题），
     改成三档后竖排会把弹窗撑高、把协议勾选框挤出可视区 —— 所以这里不再写 1fr，
     真正的小屏竖排放到文件末尾的 @media 里（见 .buy-plans 窄屏那条）。 */

  .buy-plan b{font-size:19px;}

  .kfab{right:14px;bottom:14px;padding:10px 14px;font-size:12.5px;}

  /* 手机上内容要滚动，按钮吸底常驻，不然付完款还得往下翻才找得到「加企业微信」 */
  .buy-acts{
    position:sticky;bottom:0;z-index:2;margin-top:12px;padding:10px 0 2px;
    background:linear-gradient(180deg,rgba(255,255,255,0),var(--panel) 34%);
  }

  html[data-theme="dark"] .buy-acts{background:linear-gradient(180deg,rgba(10,13,17,0),rgba(10,13,17,.94) 36%);}

/* 键盘用户按 Tab 第一下就能跳过导航直达正文（无障碍要求，肉眼平时看不到） */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:400;
  padding:10px 16px;background:var(--gold);color:var(--gold-ink);
  border-radius:0 0 10px 0;font-size:14px;font-weight:700;
}

.skip-link:focus{left:0;outline:2px solid var(--gold-2);outline-offset:2px;}


/* 未提供下载的系统：灰掉但仍让人看见「有这么个版本」 */
.btn.is-soon{opacity:.5;pointer-events:none;filter:grayscale(.4);}


/* ---------- 顶部公告条（后台可开关、可改字） ---------- */
.site-notice{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:8px 44px;font-size:12.5px;font-weight:650;line-height:1.5;text-align:center;
  color:#3a2a05;background:linear-gradient(90deg,#f7d98a,#efc76d 45%,#f3d489);
  position:relative;
}

.site-notice[hidden]{display:none;}

.site-notice .sn-x{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:6px;border:0;background:rgba(58,42,5,.12);
  color:#3a2a05;font-size:12px;line-height:1;cursor:pointer;
}

.site-notice .sn-x:hover{background:rgba(58,42,5,.22);}


/* ---------- 注册弹窗 ---------- */
.auth-box{width:min(432px,100%);}

.auth-field{margin-bottom:13px;}

.auth-label{display:block;font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:6px;letter-spacing:.02em;}

.auth-input{
  width:100%;height:44px;padding:0 13px;border-radius:11px;box-sizing:border-box;
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);
  font-size:14.5px;letter-spacing:.04em;outline:none;transition:border-color .18s,box-shadow .18s;
}

.auth-input:focus{border-color:var(--gold-line);box-shadow:0 0 0 3px var(--gold-soft);}

.auth-input::placeholder{color:var(--muted);letter-spacing:0;font-size:13.5px;}

.auth-row{display:flex;gap:9px;align-items:stretch;}

.auth-row .auth-input{flex:1 1 auto;min-width:0;}

.auth-cap{
  flex:0 0 auto;height:44px;border-radius:11px;overflow:hidden;
  border:1px solid var(--line-2);background:#f5f2ec;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}

.auth-cap img{height:44px;width:auto;display:block;}

.auth-cap:hover{border-color:var(--gold-line);}

.auth-send{
  flex:0 0 auto;height:44px;padding:0 15px;border-radius:11px;border:1px solid var(--line-2);
  background:var(--panel-2);color:var(--text);font-size:13px;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:background .18s,border-color .18s,color .18s;
}

.auth-send:hover:not(:disabled){border-color:var(--gold-line);color:var(--gold);}

.auth-send:disabled{opacity:.5;cursor:not-allowed;}

.auth-agree{
  display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.68;
  color:var(--text-2);margin:15px 0 6px;cursor:pointer;
}

.auth-agree input{margin:2px 0 0;flex:0 0 auto;width:15px;height:15px;accent-color:var(--gold);cursor:pointer;}

.auth-agree a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;font-weight:600;}

.auth-tip{margin:11px 0 0;font-size:11.5px;line-height:1.7;color:var(--muted);text-align:center;}

.auth-tip b{color:var(--text-2);font-weight:700;}

.auth-err{
  font-size:12.5px;line-height:1.7;color:#8a3a12;background:rgba(220,120,60,.09);
  border:1px solid rgba(220,120,60,.3);border-radius:10px;padding:10px 12px;margin-bottom:13px;
}

html[data-theme="dark"] .auth-err{color:#f0b48a;}

.auth-note{
  font-size:12.5px;line-height:1.78;color:var(--text);margin-bottom:15px;
  background:var(--panel-2);border:1px solid var(--line-2);border-left:3px solid var(--gold);
  border-radius:10px;padding:11px 13px;
}

.auth-note b{color:var(--gold);}

.auth-ok{text-align:center;padding:10px 0 4px;}

.auth-ok .tick{
  width:54px;height:54px;border-radius:50%;margin:0 auto 15px;
  display:flex;align-items:center;justify-content:center;font-size:27px;color:#04160f;
  background:linear-gradient(135deg,#3ddc97,#149a66);box-shadow:0 8px 24px rgba(20,160,106,.32);
}

.auth-ok h4{margin:0 0 9px;font-size:17.5px;font-weight:750;letter-spacing:.01em;}

.auth-ok p{margin:0;font-size:12.5px;line-height:1.78;color:var(--text-2);}

.auth-ok .who{
  display:inline-block;margin:13px 0 0;font-size:15px;font-weight:750;letter-spacing:.09em;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;padding:7px 16px;
}

.auth-box .btn{width:100%;justify-content:center;}

  .auth-cap img{height:42px;}

  .auth-input,.auth-row .auth-input{height:46px;font-size:16px;}


.trial-ft p{margin:0;font-size:11.5px;color:var(--text-2);text-align:center;line-height:1.6;}

/* ---- 付款前协议的勾选框（2026-10-30）----
   老板要求：付款前必须手动勾选，禁止默认勾选。
   所以 HTML 里不能有 checked，JS 每次打开弹窗也要清回未勾选。
   这里的样式只负责「让人看得清、点得到、没勾时按钮明显不能点」。 */
.buy-agree{
  display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;padding:12px 14px;
  border-radius:12px;background:var(--panel-2);border:1px solid var(--line-2);
  font-size:13px;line-height:1.8;color:var(--text-2);cursor:pointer;
  transition:border-color .2s,background .2s;
}
.buy-agree:hover{border-color:var(--line-2);background:#fff;}
.buy-agree.ok{border-color:var(--brand-line);background:var(--brand-soft);}
.buy-agree input{
  margin:4px 0 0;width:16px;height:16px;flex:none;cursor:pointer;accent-color:var(--brand);
}
.buy-agree a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
.buy-agree b{color:var(--text);}

/* 没勾还硬点：抖一下比只弹一句提示更容易让人看懂是这里没做 */
.buy-agree.shake{animation:agreeShake .42s cubic-bezier(.36,.07,.19,.97);}
@keyframes agreeShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-6px)}
  30%{transform:translateX(6px)}
  45%{transform:translateX(-4px)}
  60%{transform:translateX(4px)}
  80%{transform:translateX(-2px)}
}
.buy-agree-tip{color:#dc2626;font-size:12.5px;margin:6px 0 0;line-height:1.6;}

/* 未勾选时「加企业微信」必须看得出来点不动 */
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;filter:saturate(.35);transform:none !important;box-shadow:none !important;
}

/* 小屏：三档竖排（这里才是真正的媒体查询；上面那批缩进规则没有 @media 包裹，
   别再往那边加需要「只在手机上生效」的东西） */
@media (max-width:560px){
  .buy-plans{grid-template-columns:1fr;gap:8px;}
  .buy-agree{font-size:12.5px;padding:10px 12px;}
}

/* ---------- 账号弹窗：登录 / 注册 页签（2026-11-01） ----------
   原来这里只有「注册」，软件那边又有自己的登录框，两套东西。现在合成一个：
   同一个手机号 + 密码，网站注册、软件登录，共用一个账号。 */
.auth-tabs{
  display:flex;gap:4px;padding:4px;margin-bottom:15px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:11px;
}
.auth-tab{
  flex:1 1 0;height:34px;border:0;border-radius:8px;background:transparent;
  color:var(--text-2);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s;font-family:inherit;
}
.auth-tab:hover{color:var(--brand);}
.auth-tab.on{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(16,24,40,.09);}

/* 文字型次级操作（忘了密码 / 退出登录）：别做成大按钮，占地方又容易误点 */
.auth-linkbtn{
  display:block;margin:11px auto 0;padding:2px 4px;border:0;background:none;
  color:var(--muted);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;font-family:inherit;
}
.auth-linkbtn:hover{color:var(--brand);}

/* 「未验证」这类没完成的状态必须是琥珀色 —— 原来 .is-warn 这个类名只写在注释里、
   样式压根没定义，于是「手机号未验证」和「注册成功」挂的是同一个绿色徽标，
   等于拿颜色说"全好了"。这是假的那种绿色，得改。 */
.trial-hd .tbadge.is-warn{
  color:#3a2400;background:linear-gradient(135deg,#ffd166,#dc9210);
}

/* 已登录页底部两个文字操作（改密码 / 退出登录）并排，别各占一行 */
.auth-linkrow{display:flex;justify-content:center;gap:18px;margin-top:11px;}
.auth-linkrow .auth-linkbtn{margin:0;}