/* ============================================================
   政达分发 · 全站精修层 v4（前台）
   加载顺序：zd.css → zd-legacy.css → zd-glass.css / zd-login.css → 本文件
   作用：在旧皮肤之上做排版、色彩、面层次的统一收口；
        不改 HTML 结构、不改布局骨架；删除本文件的 <link> 即完全回滚。
   依据：2026-11-15 对 cnscy.com 首页 / 登录 / 注册的实测数据
   ============================================================ */

/* ============================================================
   1. 链接基色
   实测：a.zd-nav__logo、a.zd-mega__item（全 16 项）、a.zd-service（全 12 张卡）
        计算色值均为 rgb(0,0,238) —— 浏览器默认链接蓝，说明旧皮肤漏写了颜色。
        这里只补漏，不改已显式设色的组件（页脚、按钮、菜单胶囊保持原样）。
   ============================================================ */
.zd-nav__logo,
.zd-nav__logo:link,
.zd-nav__logo:visited,
.zd-mega__item,
.zd-mega__item:link,
.zd-mega__item:visited,
.zd-mega__item span,
.zd-service,
.zd-service:link,
.zd-service:visited,
.zd-mega__t,
.zd-mega__t:link,
.zd-mega__t:visited {
  color: var(--zd-ink);
}

.zd-mega__item .zd-mega__d,
.zd-service__d {
  color: var(--zd-muted);
}

.zd-service__go,
.zd-mega__more {
  color: var(--zd-primary-deep);
}

/* 键盘焦点：全站统一可见环，不再依赖浏览器默认虚线框 */
.zd-page a:focus-visible,
.zd-page button:focus-visible,
.zd-auth-page a:focus-visible,
.zd-auth-page button:focus-visible,
.zd-page input:focus-visible,
.zd-page select:focus-visible,
.zd-page textarea:focus-visible,
.zd-auth-page input:focus-visible {
  outline: 2px solid var(--zd-primary-deep);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ============================================================
   2. 字号整型化
   实测：首页出现 12.5 / 13.5 / 14.5 / 15.5 / 16.5 / 37.44px 共 6 种非整数尺寸，
        非整数会让文字在 1x 屏上落到半个物理像素，边缘发虚。
        统一到 13 / 14 / 15 / 17 / 36 这一档阶梯，层级关系不变。
   ============================================================ */
.zd-mega__d,
.zd-pill,
.zd-eyebrow,
.zd-service__go,
.zd-footer__bottom,
.zd-footer__social a {
  font-size: 13px;
}

.zd-sub,
.zd-service__t,
.zd-btn--lg,
.zd-footer h4 {
  font-size: 15px;
}

.zd-footer h4 {
  font-size: 14px;
}

.zd-lead {
  font-size: 17px;
}

.zd-h2 {
  font-size: clamp(28px, 2.5vw, 36px);
}

.zd-h1 {
  font-size: clamp(36px, 4vw, 56px);
}

.zd-hero__meta b {
  font-size: 20px;
}

/* ============================================================
   3. 中文排版
   实测：.zd-h1 行高 62.64/58 = 1.08，字距 -1.45px。
        负字距是为拉丁字母设计的，中文字面本就有留白，负字距会让字挤在一起；
        1.08 行高在中文里会顶到行框。改为 1.15 / 0。
   ============================================================ */
.zd-h1 {
  line-height: 1.15;
  letter-spacing: 0;
  text-wrap: balance;
}

.zd-h2 {
  line-height: 1.24;
  letter-spacing: 0;
  text-wrap: balance;
}

.zd-lead,
.zd-sub {
  text-wrap: pretty;
}

.zd-page,
.zd-auth-page {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   4. 面的层次
   实测问题：区块 rgba(255,255,255,.32)、卡片 .55、页脚 .5、导航 .56，
        四层全半透明叠在同一张渐变底图上 —— 边界互相吃掉，页面发灰、发闷。
        改法：内容面给实色，玻璃只留给导航/浮层这类需要透底的部件。
   ============================================================ */
.zd-section--white {
  background: #fff;
}

.zd-nav {
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: none;
}

.zd-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px -24px rgba(15, 23, 42, 0.55);
}

.zd-service,
.zd-feature,
.zd-stat,
.zd-card,
.zd-mcard,
.zd-quick a {
  background: #fff;
  border: 1px solid #e9ebf5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.zd-service:hover,
.zd-feature:hover {
  background: #fff;
  border-color: #dfe3fb;
  box-shadow: 0 18px 40px -26px rgba(79, 70, 229, 0.45);
}

.zd-eyebrow,
.zd-feature__ico {
  background: #eef0ff;
  box-shadow: none;
}

.zd-footer {
  background: #fff;
  border-top: 1px solid #e9ebf5;
  box-shadow: none;
}

.zd-footer__social a {
  background: #f7f8fc;
  box-shadow: none;
}

.zd-footer__social a:hover {
  background: #eef0ff;
}

/* ============================================================
   5. 圆角收口
   实测：同一页并存 10 / 13 / 14 / 18 / 22 / 28 / 99 / 999 共 9 档。
        收到 5 档：10 小控件 / 12 菜单项 / 18 卡片 / 20 浮层 / 999 胶囊。
   ============================================================ */
.zd-mega__item {
  border-radius: 12px;
}

.zd-mega__icon {
  border-radius: 10px;
}

.zd-card-float {
  border-radius: 20px;
}

.zd-service__ico,
.zd-feature__ico {
  border-radius: 12px;
}

.zd-to-top {
  border-radius: 12px;
}

/* ============================================================
   6. 间距节奏（8pt 栅格）
   实测：区块内边距 86px、标题下 46px，都不在 8 的倍数上。
   ============================================================ */
.zd-section {
  padding: 88px 0;
}

.zd-section--tight {
  padding: 64px 0;
}

.zd-head {
  margin: 0 auto 48px;
}

/* ============================================================
   7. 移动端可点区域
   实测（390px 宽）：页脚链接高 15px、底部版权链接 12.5px 高，
        低于 40px 的触控下限，手指点不准。
   ============================================================ */
@media (max-width: 768px) {
  .zd-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }

  .zd-footer__bottom a {
    min-height: 30px;
  }

  .zd-menu > li > a {
    min-height: 44px;
  }

  .zd-h1 {
    line-height: 1.18;
  }

  .zd-section {
    padding: 64px 0;
  }

  .zd-section--tight {
    padding: 48px 0;
  }
}

/* ============================================================
   8. 登录 / 注册页字号与圆角收口
   实测：12.5 / 13.5 / 14.5px 三种非整数尺寸，输入框与按钮 10px 圆角、
        与前台其他页面 12/18px 不一致。
   ============================================================ */
.zd-auth-page .slogan-text,
.zd-auth-page .clearfix.mt15,
.zd-auth-page .clearfix.mt15 a {
  font-size: 13px;
}

/* .tit 的尺寸由 #acc_login / #phone_login 的 id 规则给出（0,1,0,0），
   必须带 id 才能覆盖 */
.zd-auth-page .tit,
.zd-auth-page #acc_login.tit,
.zd-auth-page #phone_login.tit {
  font-size: 13px;
}

.zd-auth-page input.form-control,
.zd-auth-page .ms-btn,
.zd-auth-page #submitButton {
  font-size: 14px;
}

/* CTA 区说明文字：实测 14.5px，归到 15px 档 */
.zd-cta p {
  font-size: 15px;
}

.zd-auth-page input.form-control {
  border-radius: 10px;
}

.zd-auth-page .ms-btn {
  border-radius: 10px;
}

/* ============================================================
    9. 列表页移动端横向溢出
    实测（390px）：/index/plist 的 document.scrollWidth = 817，
        超出视口一倍，可横向拖动。
    根因：模板内联样式 .toolkit-new .con{padding:0 200px} 与
        .toolkit-new .p1{width:800px} 是桌面固定值，窄屏没有断点。
    处理：只在本层加窄屏覆盖，不动模板内联样式（改模板风险高）。
    ============================================================ */
@media (max-width: 767.98px) {
  .toolkit-new {
    padding: 32px 0 28px;
  }

  .toolkit-new .con {
    padding: 0 16px;
  }

  .toolkit-new .tit {
    margin-bottom: 24px;
    font-size: 22px;
  }

  .toolkit-new .p1 {
    width: auto;
    max-width: 100%;
    margin-top: 26px;
    padding: 16px 18px;
  }
}

/* ============================================================
    10. 残留对比度（WCAG AA 4.5:1）
    实测（背景 #f3f5f9 / #fbfcfe）：
        .slogan-text  #8b93a3  2.83
        .login-common-tip #7b8496 3.66
        页脚版权 #98a1b2 2.38、备案链接 #7f89a0 3.21
        未选中 tab #6b7280 4.39
        docs 目录说明 #7b8194 3.88
    这些颜色都在 zd-login.css / zd-help.css 里以 !important 写死，
    需要同等或更高权重覆盖；改后同档保持灰阶层级，只是整体压深。
    ============================================================ */
.zd-auth-page .slogan-text {
  color: #5b6478 !important;
}

.zd-auth-page .login-common-tip {
  color: #5a6477 !important;
  font-size: 12px;
}

.zd-auth-page .login-common-footer-cont {
  color: #5f6779;
}

.zd-auth-page .login-common-footer-cont a {
  color: #525b6e;
}

/* 只压未选中态，选中态（.is-on / .active）保持 #0f172a */
.zd-auth-page .login-common > .tit > div:not(.is-on),
.zd-auth-page .login-common > .tit > a:not(.active) {
  color: #556070 !important;
  font-size: 13px;
}

/* 帮助中心目录：12px 的次要说明，原值 3.88 */
.zd-tile-txt i,
.doc-list-wrap .doc-list .advice {
  color: #5f6779;
}

/* 注册页底部的第三方登录说明：实测 13.5px */
.zd-auth-page .mt15.text-center,
.zd-auth-page .mt15.text-center a {
  font-size: 13px;
}

/* ============================================================
    11. 首页公告里的行内色
    实测：公告正文由后台配置项直接输出，带 style="color:#E53333"（4.33）
        与 style="color:#60D978"（白底 1.80，几乎看不见）。
    内容属于站方配置，不在这里改文案，只按行内色精确匹配后压深一档，
    保留“红=警示、绿=提示”的语义。
    ============================================================ */
.zd-notice__body span[style*="#e53333" i],
.zd-announce__body span[style*="#e53333" i] {
  color: #c92a2a !important;
}

.zd-notice__body span[style*="#60d978" i],
.zd-announce__body span[style*="#60d978" i] {
  color: #15803d !important;
}

/* ============================================================
    12. 窄屏标题字号取整
    实测：/index/price 的 h1 在 390px 下为 24.96px（vw 计算值），
        落到半个物理像素上边缘发虚；断点内改固定整数档。
    ============================================================ */
@media (max-width: 767.98px) {
  .zd-page h1:not(.zd-h1) {
    font-size: 28px;
  }
}

/* ============================================================
    13. 价格页套餐卡悬停：白底白字
    实测（/index/price，1440px）：鼠标悬停到套餐卡上，卡片内文字
        color 全部变成 rgb(255,255,255)，而卡片自身
        background-image 为 none、背景仍是 rgba(255,255,255,.58)
        —— 白字压在 58% 白玻璃上，等于看不见。
    原因：两套规则打架
        模板 price.php 悬停：background: linear-gradient(360deg,#7694FF,#5951FF)
                              + 内部 div/p/span 全部 color:#fff !important
        旧皮肤 zd-legacy.css:191：.item_total .item 用
                              background: rgba(255,255,255,.58) !important 锁死底色
        !important 让渐变永远上不去，文字变白却照常生效。
    修法：在悬停态把模板设计的渐变按同等权重补回来（只作用于价格页
        .setmeal_content 内的套餐卡），并把卡内购买按钮改成白底品牌字，
        保证渐变底上仍有清晰的主操作。
        渐变两端另压深一档（#5b4ee6 → #4338ca）：模板原色 #7694FF 上
        白字只有 2.82:1，属于同类“看不清”，一并收进 AA 4.5:1。
    ============================================================ */
body:not(.zd-page):not(.zd-auth-page) .setmeal_content .item_total .item:hover {
  background: linear-gradient(360deg, #5b4ee6, #4338ca) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 28px 52px -30px rgba(79, 70, 229, 0.55) !important;
}

/* 卡片内的次要列表项：原值 rgba(67,71,95,.6)，压到渐变底上读不清 */
body:not(.zd-page):not(.zd-auth-page) .setmeal_content .item_total .item:hover .bot li,
body:not(.zd-page):not(.zd-auth-page) .setmeal_content .item_total .item:hover .bot li span {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 购买按钮：渐变底上再用深紫渐变会糊成一片，改为白底品牌字 */
body:not(.zd-page):not(.zd-auth-page) .setmeal_content .item_total .item:hover .btn_pay {
  background: #fff !important;
  box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.45) !important;
}

body:not(.zd-page):not(.zd-auth-page) .setmeal_content .item_total .item:hover .btn_pay a,
body:not(.zd-page):not(.zd-auth-page) .setmeal_content .item_total .item:hover .btn_pay button {
  color: #4f46e5 !important;
}

/* ============================================================
    14. 价格页套餐卡重排（分发 / WEB封装 / 企业签名 / 超级签名 / 会员套餐）
    改前实测（1440px，卡片 310×510）：卡内六行内容压在三条左轴上
        「套餐A」标题 x=315（模板 inline margin-left:80px）
        「下载云币」副标题 x=317（模板 margin-left:82px）
        「5,000 云币」数量 x=269（模板 margin-left:34px）
        而卡片内容区左边缘是 x=235 —— 三行各自缩进，看起来是没对齐。
    另有两处绝对定位：购买按钮 bottom:46 left:48（200×40）、
        价格 .money bottom:104 left:30%，两者都脱离文档流，
        导致卡底留下约 104px 空白，且按钮 6px 不居中。
    .bot 又被写死 height:350px，列表一长一短都会错位。
    修法：容器改纵向 flex，.top / .bot 用 display:contents 摊平成
        .item 的直接子元素，再用 order 排出「标题 → 数量 → 权益 →
        价格 → 购买」的阅读顺序，取消全部绝对定位与硬编码缩进，
        价格行 margin-top:auto 吸底，三张卡等高、底部按钮对齐。
    ============================================================ */
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block {
  justify-content: center;
  gap: 24px;
  background: transparent !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item {
  display: flex;
  flex-direction: column;
  margin-left: 0 !important;
  padding: 28px 24px 24px !important;
  background: #fff !important;
  border: 1px solid #e8ebf5 !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 48px -40px rgba(15, 23, 42, .38), 0 1px 2px rgba(15, 23, 42, .04) !important;
  cursor: pointer;
  text-align: left;
}

/* 摊平两层包装，让标题/数量/权益/价格/按钮成为同一竖向流 */
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .top,
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .bot {
  display: contents !important;
  height: auto !important;
  padding: 0 !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .top > h5 {
  order: 1;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  color: #0f172a !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .top > h5 > span {
  margin-left: 0 !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  color: #0f172a !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .top > .s-title {
  order: 2;
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5;
  color: #64748b !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .top > .number {
  order: 3;
  margin: 12px 0 0 !important;
  font-size: 34px !important;
  line-height: 1.1;
  letter-spacing: -.5px;
  color: #0f172a !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .top > .number span {
  margin-left: 4px;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  color: #64748b !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .bot > ul {
  order: 4;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 18px 0 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px dashed #e6e9f5;
  list-style: none;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .bot > ul > li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .bot > ul > li > span:first-child {
  flex: 0 0 16px;
  min-width: 16px !important;
  font-size: 13px !important;
  line-height: 1.6;
  color: #15803d !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .bot > ul > li > span:last-child {
  font-size: 13px !important;
  line-height: 1.6;
  color: #475569 !important;
}

/* 价格行吸底，与按钮共同构成卡片页脚 */
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .bot > .money {
  order: 5;
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: auto 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid #eef0f7;
  font-size: 30px !important;
  line-height: 1.2;
  text-align: left !important;
  color: #4f46e5 !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .bot > .money span {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #64748b !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .top > .btn_pay {
  order: 6;
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 46px !important;
  margin: 16px 0 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #5b4ee6, #4338ca) !important;
  box-shadow: 0 12px 24px -18px rgba(79, 70, 229, .7) !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item > .top > .btn_pay a {
  display: block;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .5px;
  line-height: 46px !important;
  color: #fff !important;
}

/* 悬停：渐变底之上，新层写入的深色文字需同步反白 */
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover > .top > h5,
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover > .top > h5 > span,
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover > .top > .number,
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover > .bot > .money {
  color: #fff !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover > .top > .s-title,
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover > .top > .number span,
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover > .bot > .money span {
  color: rgba(255, 255, 255, .85) !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover > .bot > ul,
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover > .bot > .money {
  border-top-color: rgba(255, 255, 255, .28);
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover > .bot > ul > li,
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover > .bot > ul > li > span:last-child {
  color: rgba(255, 255, 255, .92) !important;
}

body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover > .bot > ul > li > span:first-child {
  color: #bbf7d0 !important;
}

/* 关键：本节静止态给了 background:#fff !important，权重高于第 13 节的
   悬停渐变，若不在同等权重上重新声明，悬停会回到白底白字。
   实测漏写时：悬停 background-image 为 none、文字 rgb(255,255,255)。 */
body:not(.zd-page):not(.zd-auth-page) .price-con .tab-1 .setmeal_content .item_total.block .item:hover {
  background: linear-gradient(360deg, #5b4ee6, #4338ca) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 28px 52px -30px rgba(79, 70, 229, 0.55) !important;
}

/* ============================================================
    15. 价格页分类标签（分发套餐 / WEB封装 / 企业签名 / 超级签名 / 会员套餐）
    改前实测（1440px）：
      容器 ul 490×40，但 li 是 42px 高 —— 比容器高 2px，溢出边框；
      ul 用 margin-left:11cm 定位（x=502.7），容器范围 87–1353，
        中心 747.7 对容器中心 720，整体右偏 27.7px；
      li 各自带 1px #e5e5e5 边框 + margin-right:-1px 叠边框，
        在浅色页面上是一排灰框，选中态是纯 #304dd9 实心方块；
      容器底色 rgba(255,255,255,.5) 压在同色浅底渐变上，几乎看不见。
    修法：改成一体式分段控件 —— 外层白色胶囊（4px 内衬 + 1px 浅边），
      内层 5 段等分、无边框、40px 高，选中段用品牌渐变填充 + 白字，
      未选中段 hover 只有淡底色。点击逻辑仍走 js.js 的 .price-tab 事件。
    ============================================================ */
body:not(.zd-page):not(.zd-auth-page) .container > .price-tab ul {
  display: flex !important;
  width: 480px !important;
  max-width: 100% !important;
  height: 50px !important;
  margin: 0 auto !important;
  padding: 4px !important;
  gap: 2px;
  box-sizing: border-box;
  line-height: normal !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid #e6e9f4 !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 28px -22px rgba(15, 23, 42, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body:not(.zd-page):not(.zd-auth-page) .container > .price-tab ul li,
body:not(.zd-page):not(.zd-auth-page) .container > .price-tab ul li:first-of-type,
body:not(.zd-page):not(.zd-auth-page) .container > .price-tab ul li:last-of-type {
  float: none !important;
  display: block;
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  line-height: 40px !important;
  font-size: 14px !important;
  font-weight: 500;
  color: #475569 !important;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

body:not(.zd-page):not(.zd-auth-page) .container > .price-tab ul li.active {
  background: linear-gradient(180deg, #5b4ee6, #4338ca) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 10px 20px -12px rgba(79, 70, 229, .75);
}

body:not(.zd-page):not(.zd-auth-page) .container > .price-tab ul li:not(.active):hover {
  background: rgba(79, 70, 229, .1) !important;
  color: #4338ca !important;
}

/* 窄屏（390/360 宽以下的桌面 UA 或直连本页）：胶囊跟随容器宽度收缩，
   实测未加时 390px 视口下 ul 固定 480px 会把文档撑到 496px（横向溢出 106px）。 */
@media (max-width: 640px) {
  body:not(.zd-page):not(.zd-auth-page) .container > .price-tab ul {
    height: 44px !important;
    padding: 3px !important;
    gap: 1px;
  }

  body:not(.zd-page):not(.zd-auth-page) .container > .price-tab ul li,
  body:not(.zd-page):not(.zd-auth-page) .container > .price-tab ul li:first-of-type,
  body:not(.zd-page):not(.zd-auth-page) .container > .price-tab ul li:last-of-type {
    height: 38px !important;
    line-height: 38px !important;
    font-size: 13px !important;
  }
}