/* ================================================================
   pz-unify.css · pianzhang 全站视觉统一收敛层
   发布：2026-10-30 · v=20261030w  (Phase 1.2 · 通配选择器 → 精确类名)
   策略：只追加 !important 覆盖，零删除、零替换原样式
         原文件 CSS 完整保留在后面（弱于共享层）
   变更说明：所有 [class*=""] 通配选择器已替换为全域实际类名清单，
            避免「一个无效选择器导致整规则块被浏览器丢弃」的隐患，
            同时消除通配误伤（如客服空 badge 小白点）。
   类名真源：2026-10-30 从 pianzhang/zhixuan/jiandan/docs/www 五域 HTML 实际提取
   ================================================================ */

/* ── 0. 裸变量别名映射（对齐 theme.css --xia- 真源）────────────────
   PZUNIFY-20261101：补齐 hex 兜底。篇章 7 页并未挂 theme.css（L1 令牌层缺位），
   原先 var(--p500)/var(--p600) 在此域解析为空，「无效值」会让
   按钮状态色、卡片描边退化。补兜底后各域都能拿到确定值；页面自有 --xia- 真源仍优先。 */
:root{
  /* 中性色 */
  --n0:     var(--xia-color-neutral-0, #FFFFFF);
  --n50:    var(--xia-color-neutral-50, #F8FAFC);
  --n100:   var(--xia-color-neutral-100, #F1F5F9);
  --n200:   var(--xia-color-neutral-200, #E2E8F0);
  --n300:   var(--xia-color-neutral-300, #CBD5E1);
  --n400:   var(--xia-color-neutral-400, #94A3B8);
  --n500:   var(--xia-color-neutral-500, #64748B);
  --n600:   var(--xia-color-neutral-600, #475569);
  --n700:   var(--xia-color-neutral-700, #334155);
  --n800:   var(--xia-color-neutral-800, #1E293B);
  --n900:   var(--xia-color-neutral-900, #0F172A);
  /* 主色 */
  --p50:    var(--xia-color-primary-50, #F0F9FF);
  --p100:   var(--xia-color-primary-100, #E0F2FE);
  --p200:   var(--xia-color-primary-200, #BAE6FD);
  --p300:   var(--xia-color-primary-300, #7DD3FC);
  --p500:   var(--xia-color-primary-500, #0EA5E9);
  --p600:   var(--xia-color-primary-600, #0284C7);
  --p700:   var(--xia-color-primary-700, #0369A1);
  /* 功能色 */
  --ok:     var(--xia-color-success, #10B981);
  --warn:   var(--xia-color-warning, #F59E0B);
  --err:    var(--xia-color-error, #EF4444);
  /* 圆角 */
  --r-sm:   var(--xia-radius-sm, 4px);
  --r-md:   var(--xia-radius-md, 6px);
  --r-lg:   var(--xia-radius-lg, 8px);
  --r-xl:   var(--xia-radius-xl, 12px);
  /* 阴影 */
  --shadow-sm: 0 1px 6px rgba(15,23,42,.05);
  --shadow-md: 0 4px 16px rgba(15,23,42,.10);
  --shadow-lg: 0 8px 28px rgba(15,23,42,.14);
}

/* ── 1. 全站 body / html 统一 ────────────────────────────────── */
html,pz-root{
  font-family: var(--xia-font-family-base, 'Alibaba PuHuiTi 3.0', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif) !important;
}
body{
  max-width: 1440px !important;
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  background: var(--xia-color-neutral-50, #F8FAFC) !important;
  color: var(--xia-color-neutral-900, #0F172A) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-family: var(--xia-font-family-base, 'Alibaba PuHuiTi 3.0', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif) !important;
  overflow-x: hidden !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
}

/* 强制所有 h1-h6 / p / span / div 走 PuHuiTi 字体，覆盖 ui-monospace 硬编码 */
h1,h2,h3,h4,h5,h6,p,span,div,li,td,th,button,label,strong,em,b,a{
  font-family: var(--xia-font-family-base, 'Alibaba PuHuiTi 3.0', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif) !important;
}
code,pre,kbd,samp,tt,textarea{
  font-family: var(--xia-font-family-mono, 'SF Mono', Consolas, monospace) !important;
}

/* ── 2. 全站卡片视觉统一
   精确类名清单（来源：五域 HTML 实际提取）───────────────────── */
.ti-card,.ca-card,.ld-card,.pm-card,.geo-card,.bf-card,.mc-card,.cf-card,
.mat-card,.lb-card,.pz-card,.msgcard,.pk-card,.card,.sku-card,
.acard,.balcard,.bcard,.cards,.case-card,.ivsum-card,.jda-card,
.kb-bind-card,.kb-card,.kb-modal-card,.kb-use-card,.keycard,.ncard,
.pcard,.rulecard{
  border-radius: var(--r-xl, 12px) !important;
  border: 1px solid var(--n200) !important;
  background: var(--n0) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
.ti-card:hover,.ca-card:hover,.ld-card:hover,.pm-card:hover,.geo-card:hover,
.bf-card:hover,.mc-card:hover,.cf-card:hover,.mat-card:hover,.lb-card:hover,
.pz-card:hover,.msgcard:hover,.pk-card:hover,.card:hover,.pcard:hover,
.case-card:hover,.kb-card:hover,.jda-card:hover,.rulecard:hover{
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--p200) !important;
}

/* ── 3. 全站按钮类统一（精确类名 + 三态分治）───────────
   PZUNIFY-20261101：原写法把所有 .btn 的 foreground/background 都写死 !important，
   连 .btn.gho / .btn.done 的状态变体也被压成实心药丸。此处拆成：
   基座（几何 + 主态）+ 状态变体（幽灵/完成/危险），变体规则放在 hover 之后，
   同级特异性下后写者胜，状态得以恢复。 */
.btn,button.btn,a.btn,input.btn,span.btn,
.ja-btn,.jds-btn,.pz-btn,.pill-btn,
.askbtn,.bluebtn,.modebtn,.vbtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 18px !important;
  border-radius: var(--mh-radius-md, 12px) !important;
  border: 1px solid var(--xia-color-primary-btn, var(--p500)) !important;
  background: var(--xia-color-primary-btn, var(--p500)) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.btn:hover,.ja-btn:hover,.jds-btn:hover,.pz-btn:hover,.pill-btn:hover,
.askbtn:hover,.bluebtn:hover,.modebtn:hover,.vbtn:hover{
  background: var(--xia-color-primary-btn-hover, var(--p600)) !important;
  border-color: var(--xia-color-primary-btn-hover, var(--p600)) !important;
  transform: translateY(-1px) !important;
}
.btn:disabled,.ja-btn:disabled,.pz-btn:disabled{
  opacity: .5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
/* 状态变体：幽灵 / 描边 */
.btn.gho,.btn.ghost,.btn.line,.btn-outline,.btn-secondary,
.pz-btn.ghost,.pz-btn.line,.ja-btn.ghost,.jds-btn.ghost{
  background: #fff !important;
  color: var(--xia-color-primary-text, var(--p600)) !important;
  border-color: var(--n200, #E2E8F0) !important;
}
.btn.gho:hover,.btn.ghost:hover,.btn.line:hover,.btn-outline:hover,.btn-secondary:hover,
.pz-btn.ghost:hover,.pz-btn.line:hover,.ja-btn.ghost:hover,.jds-btn.ghost:hover{
  background: var(--p50) !important;
  border-color: var(--xia-color-primary-text, var(--p500)) !important;
}
/* 状态变体：完成（浅绿底） */
.btn.done,.btn.ok,.pz-btn.done,.ja-btn.done{
  background: var(--ok50, #ECFDF5) !important;
  color: var(--ok-dark, #047857) !important;
  border-color: var(--ok-border, #BBF7D0) !important;
}
.btn.done:hover,.btn.ok:hover,.pz-btn.done:hover,.ja-btn.done:hover{
  background: var(--ok50, #ECFDF5) !important;
  border-color: var(--ok, #10B981) !important;
  transform: none !important;
}
/* 状态变体：危险 */
.btn.danger,.btn.bad,.pz-btn.danger{
  background: var(--bad, #EF4444) !important;
  border-color: var(--bad, #EF4444) !important;
  color: #fff !important;
}
.btn.danger:hover,.btn.bad:hover,.pz-btn.danger:hover{
  background: var(--bad-dark, #DC2626) !important;
  border-color: var(--bad-dark, #DC2626) !important;
}
.btn.pri,.pz-btn.pri,.ja-btn.pri,.jds-btn.pri{
  background: var(--xia-color-primary-btn, var(--p500)) !important;
  border-color: var(--xia-color-primary-text, var(--p500)) !important;
  color: #fff !important;
}
.btn.pri:hover,.pz-btn.pri:hover,.ja-btn.pri:hover,.jds-btn.pri:hover{
  background: var(--xia-color-primary-btn-hover, var(--p600)) !important;
  border-color: var(--xia-color-primary-btn-hover, var(--p600)) !important;
}
.btn.sm,.btn-sm{
  height: 30px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  border-radius: var(--mh-radius-sm, 8px) !important;
}

/* ── 4. 标题层级统一 ────────────────────────────────────────── */
/* 结构性原则：h1 颜色「继承父级」而非硬编码深色。
   父级是普通底色(body --n900) → 深字；父级是深色渐变横幅(自身设白字) → 白字。
   这样深色 banner 再也不用逐个打补丁。 */
h1:not(.mh-sr-only){
  font-size: 22px !important;
  font-weight: 700 !important;
  color: inherit !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.3 !important;
}
h2{
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--n900) !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.4 !important;
}
h3{
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--n800) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.5 !important;
}
.mh-sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}

/* ── 5. pill/tag/badge 统一（精确类名，排除客服 mhcs-badge）────── */
/* pill 类 */
.pill,.kb-pill,.pz-pill,.pill2,.za-zpill,.zpill,
/* tag 类 */
.tag,.gc-tag,.jda-tag,.qtag,.tagmod,.tagrow,.tags,.tagx,
/* badge 类（不含客服 mhcs-badge） */
.badge,.abadge,.bf-badge,.ca-badge,.demo-badge,.geo-badge,
.ja-badge,.ld-badge,.pm-badge,.ti-badge{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 22px !important;
  padding: 0 10px !important;
  font-size: 12px !important;  /* SKIN01 下限归级 */
  font-weight: 500 !important;
  border-radius: 999px !important;
  background: var(--n50) !important;
  color: var(--n600) !important;
  border: 1px solid var(--n200) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.pill.ok,.tag.ok,.pill.success{ background: var(--p50); color: var(--p700); border-color: var(--p200); }
.pill.warn,.tag.warn,.pill.warning{ background: #FEF9C3; color: #854D0E; border-color: #FDE68A; }
.pill.err,.pill.error,.pill.danger{ background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }

/* ── 6. 侧边栏 za-zdir 选中态 + pill 统一 ───────────────────────── */
.za-zpill{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 10px !important;
  border: 1px solid var(--n200) !important;
  background: var(--n50) !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  color: var(--n700) !important;
  text-decoration: none !important;
  transition: all .15s ease !important;
  font-family: inherit !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}
.za-zpill:hover{
  border-color: var(--xia-color-primary-text, var(--p500)) !important;
  color: var(--p700) !important;
}
.za-zpill.za-is-on,.za-zpill.is-on,.za-zpill.on{
  background: var(--p50) !important;
  border-color: var(--p200) !important;
  color: var(--p700) !important;
  font-weight: 600 !important;
}

/* ── 7. 清除 ui-monospace 硬编码（41/44/46 等模块页误把 monospace 当正文）── */
body *{
  font-family: var(--xia-font-family-base, 'Alibaba PuHuiTi 3.0', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif) !important;
}

/* ── 8. 表格 / 表单基础统一 ──────────────────────────────────── */
input,select,textarea{
  font-family: inherit !important;
  font-size: 13px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--n200) !important;
  background: #fff !important;
  color: var(--n900) !important;
  padding: 7px 10px !important;
  outline: none !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}
input:focus,select:focus,textarea:focus{
  border-color: var(--xia-color-primary-text, var(--p500)) !important;
  box-shadow: 0 0 0 3px var(--p50) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE-A · 前端架构统一（2026-10-30 老牛拍板 · Phase 1 基础设施）
   设计原则：零删除 / 只追加 !important 覆盖
   ═══════════════════════════════════════════════════════════════════ */

/* ── A1. 侧边栏统一（精确类名，全域一套规格）────────────────────── */
/* 现状：pianzhang .sidebar / zhixuan+jiandan .side.qsb / docs .doc-side / www .dside 等 */
.sidebar,.side,.qsb,.side.qsb,.side.nav,
.doc-side,.dside,.uc-side{
  width: 224px !important;
  min-width: 224px !important;
  max-width: 224px !important;
  flex: 0 0 224px !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 61px !important;           /* 避让 topbar 60px + 1px border */
  align-self: flex-start !important;
  background: var(--xia-color-neutral-50, #F8FAFC) !important;
  border-right: 1px solid var(--xia-color-neutral-200, #E2E8F0) !important;
  border-radius: 0 !important;    /* 清掉 pianzhang 的 12px */
  padding: 16px 0 !important;
  box-sizing: border-box !important;
}
.sidebar *,.side *,.qsb *,.doc-side *,.dside *,.uc-side *{
  box-sizing: border-box !important;
}

/* ── A2. Shell 布局统一（精确类名，所有域 flex row）────────────── */
/* 现状：pianzhang .shell / docs .docs-shell / www .uc-shell */
.shell,.docs-shell,.uc-shell{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  /* CS-FIX-SHELLBOX-20261107 : 强制 border-box
     否则 width:100% 参照 content box，padding 加在 100% 之外
     ⇒ 容器实际宽 = 100% + padding ⇒ 内部 flex 子项（.main）被撑到 100%
     ⇒ 叠加容器自身偏移后右边超出视口（实测 390 视口溢出 12px，整页可横向拖）。
     本文件是三域（篇章/文档/www）shell 布局的权威统一文件 ⇒ 一处改，三域生效。 */
  box-sizing: border-box !important;
  max-width: 1400px !important;   /* 两边留 padding */
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.shell > *,.docs-shell > *,.uc-shell > *{
  grid-column: auto !important;
  grid-row: auto !important;
}

/* ── A3. body 解锁（从 CSS 覆盖 HTML 内联锁宽）────────────────── */
html[data-pz-unify] body,
body{
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;      /* 防超宽溢出 */
}

/* ── A4. topbar 固定置顶（覆盖 sprite-loader 的 relative）──────── */
/* mhtb-root 负责 fixed 定位，mhtb-top 在 root 内恢复自然流 */
.mhtb-root{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2147483647 !important;   /* 最高优先级 */
  width: 100% !important;
}
.mhtb-root .mhtb-top{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
}
.mhtb-top:not(.mhtb-root .mhtb-top){
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2147483647 !important;
}

/* ── A5. 主内容区统一（shell 内 .main / .content 等）─────────── */
.shell > .main,.shell > .content,
.shell > section:not(.sidebar):not(.side):not(.qsb):not(.doc-side):not(.dside):not(.uc-side),
.shell > div:not(.sidebar):not(.side):not(.qsb):not(.doc-side):not(.dside):not(.uc-side),
.docs-shell > .main,.docs-shell > .content,
.uc-shell > .main,.uc-shell > .content{
  flex: 1 1 auto !important;
  min-width: 0 !important;          /* flex 子项防 overflow */
  max-width: none !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;
  /* CS-FIX-MAINW-20261107 : width:auto
     flex:1 1 auto 已负责填满父容器内容盒；页面自带的 width:100% 按父「padding 盒」
     宽（390）计算，叠加 .shell 自身 padding-left 12px ⇒ 右边到 402，溢出 12px，
     其内 29 个元素全部 right>390（整页可横向拖）。
     注入实验 5 候选中唯有 width:auto 使溢出元素数 29 → 0（.main 390 → 366）。 */
  width: auto !important;
}

/* ── A6. za-zdir（顶栏目录胶囊）统一 top 避让（精确类名）─────── */
/* 精确类名：za-zdir, za-zdir-bar, za-zdir-grp, za-zdir-panel, za-zdir-pills,
            zdir, zdir-bar, zdir-grp, zdir-panel, zdir-pills */
.za-zdir,.za-zdir-bar,.za-zdir-grp,.za-zdir-panel,.za-zdir-pills,
.zdir,.zdir-bar,.zdir-grp,.zdir-panel,.zdir-pills{
  top: 61px !important;
  z-index: 1000 !important;
}
html[data-mhtb-bar] .za-zdir,
html[data-mhtb-bar] .zdir{
  top: var(--mh-topbar-h, 61px) !important;
}

/* ── A7. 窄屏自适应（≤640px）· 所有域一套规则 ──────────────── */
/* shell 变 column / sidebar 隐藏 / 内容全宽 / za-zdir 隐藏（汉堡接管） */
@media (max-width: 640px){
  .shell,.docs-shell,.uc-shell{
    flex-direction: column !important;
    max-width: 100% !important;
    padding: 0 12px !important;
  }
  .sidebar,.side,.qsb,.side.qsb,.doc-side,.dside,.uc-side{
    display: none !important;        /* 窄屏侧边栏隐藏，汉堡菜单接管 */
    width: 100% !important;
    position: static !important;
  }
  .shell > .main,.shell > .content,
  .shell > section:not(.sidebar):not(.side),
  .shell > div:not(.sidebar):not(.side),
  .docs-shell > .main,.docs-shell > .content,
  .uc-shell > .main,.uc-shell > .content{
    padding: 12px !important;
  }
  /* 窄屏 za-zdir 隐藏（顶栏已有汉堡菜单） */
  .za-zdir,.za-zdir-bar,.za-zdir-grp,.za-zdir-panel,.za-zdir-pills,
  .zdir,.zdir-bar,.zdir-grp,.zdir-panel,.zdir-pills{
    display: none !important;
  }
  /* 窄屏由 mhtb-spacer 承担顶栏占位，body padding-top 保持 0 */
  body{
    padding-top: 0 !important;
  }
  .shell,.docs-shell,.uc-shell{
    margin-top: 0 !important;
  }
}

/* 超窄屏（≤380px）同样隐藏 za-zdir */
@media (max-width: 380px){
  .za-zdir,.za-zdir-bar,.za-zdir-grp,.za-zdir-panel,.za-zdir-pills,
  .zdir,.zdir-bar,.zdir-grp,.zdir-panel,.zdir-pills{
    display: none !important;
  }
}

/* ── A8. 侧边栏菜单项统一（精确类名）─────────────────────────── */
.sidebar .sitem,.side .navitem,.qsb .navitem,
.doc-side .sitem,.dside .sitem,.uc-side .sitem,
.sidebar a,.side a,.qsb a,.doc-side a,.dside a,.uc-side a{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  color: var(--xia-color-neutral-700, #334155) !important;
  border-radius: var(--xia-radius-sm, 6px) !important;
  cursor: pointer !important;
  transition: background .12s ease, color .12s ease !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}
.sidebar .sitem:hover,.side .navitem:hover,.qsb .navitem:hover,
.sidebar a:hover,.side a:hover,.qsb a:hover{
  background: var(--xia-color-neutral-100, #F1F5F9) !important;
  color: var(--xia-color-neutral-900, #0F172A) !important;
}
.sidebar .sitem.on,.sidebar .sitem.active,
.side .navitem.on,.side .navitem.active,
.qsb .navitem.on,.qsb .navitem.active,
.sidebar a.on,.sidebar a.active,
.side a.on,.side a.active{
  background: var(--xia-color-primary-50, #F0F9FF) !important;
  color: var(--xia-color-primary-700, #0369A1) !important;
  font-weight: 600 !important;
}

/* ── A9. 侧边栏分组标签（精确类名）───────────────────────────── */
.sidebar .sgroup,.side .grp,.qsb .grp,
.doc-side .sgroup,.dside .sgroup,.uc-side .sgroup{
  font-size: 12px !important;  /* SKIN01 下限归级 */
  font-weight: 600 !important;
  color: var(--xia-color-neutral-600, #475569) !important;  /* C9FIX-20261103：分组标题=neutral-600 */
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  padding: 16px 14px 6px !important;
}

/* ── A10. 通用容器解锁（独立页 .wrap 等也给 max-width 放宽）────── */
.wrap{
  max-width: 1120px !important;
  margin: 0 auto !important;
}
@media (min-width: 768px){
  .wrap{
    max-width: 1200px !important;
  }
}

/* ── A11. mhtb-spacer 顶栏占位 + za-zdir 紧贴 spacer ──────────── */
/* body padding-top 已归 0，由 mhtb-spacer 统一承担顶栏占位（所有域一致） */
.mhtb-spacer{
  display: block !important;
  height: var(--mh-topbar-h, 60px) !important;
}
/* za-zdir 紧贴 spacer 下方，无额外间距 */
.za-zdir,.za-zdir-bar,.za-zdir-grp,.za-zdir-panel,.za-zdir-pills,
.zdir,.zdir-bar,.zdir-grp,.zdir-panel,.zdir-pills{
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  top: var(--mh-topbar-h, 60px) !important;
}

/* ── A12. 深色横幅内白字兜底（高权重，压过任何 h1 规则）────────
   主修法见第 4 节（h1 颜色改 inherit）。
   此处再对已知深色横幅容器兜底：hero / brand-banner / banner 等。 */
.hero h1,.hero h2,.hero h3,.hero .pos,.hero .slogan,.hero p,
.wrap.hero h1,.wrap.hero h2,.wrap.hero h3,.wrap.hero .pos,.wrap.hero p,
section.hero h1,section.hero h2,section.hero h3,section.hero .pos,section.hero p,
.brand-banner h1,.brand-banner h2,.brand-banner h3,.brand-banner p,.brand-banner .pos,
section.brand-banner h1,section.brand-banner h2,section.brand-banner h3,section.brand-banner p{
  color: #fff !important;
}

/* ── A13. 客服空 badge 隐藏 ───────────────────────────────────── */
/* 根因：.mhcs-badge 是未读消息数标记，无消息时 innerHTML 为空但仍显示 → 右上角小白点 */
body .mhcs-badge:empty,
body .mhcs-badge:blank{
  display: none !important;
}

/* ── 11. index.html 现有 .pcard / .pkz-row 额外收敛 ───────────── */
.pcard{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  position: relative !important;
  overflow: visible !important;
}
.pcard:hover{ transform: translateY(-2px) !important; }
.pcard.pk-hot{ border-color: var(--p500, #0EA5E9) !important; }
.pk-ribbon{
  position: absolute !important;
  top: -1px !important;
  left: 0 !important;
  /* RIBBON-20261102：页面内联 .pk-ribbon 带 transform:translateX(-50%)，
     统一层只改 left 不清 transform → 角标以自身中心左移半个宽度，
     实测长角标左缘越出卡片 67px（移动端甚至落到 x=-41 被视口裁掉）。
     这一行是「漂移」的唯一根因。 */
  transform: none !important;
  background: linear-gradient(90deg, #0369A1, #075985) !important;  /* C9FIX-20261103：pk-ribbon + is-featured 斜角标 白字 ≥5.4 */
  color: #fff !important;
  font-size: 12px !important;  /* SKIN01 下限归级 */
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 0 0 8px 8px !important;
  letter-spacing: .03em !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(14,165,233,.3) !important;
}
/* RIBBON-20261102：角标高 26px 且贴在卡片上缘，标题容器让出安全距离（净距 ≈15px）。
   仅命中「首子元素是角标」的卡片，其余卡片不受影响。 */
.pcard.pkg > .pk-ribbon + div{ padding-top: 20px !important; }

/* ── 12. 按钮圆角/尺寸对齐（覆盖历史内联 style 遗留）───────────
   PZUNIFY-20261101：原块把 .btn 整体重刷为 999px/38px 实心蓝，
   与 §3 打架并继续压死状态变体。此处只保留「圆角与尺寸对齐」职责，
   颜色/状态交给 §3。 */
.pcard .btn,.pcard span.btn,.pcard .act .btn,
.openPeriod-btn,[onclick*="openPeriod"]{
  border-radius: var(--mh-radius-md, 12px) !important;
  height: 36px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

/* ── 13. 卡片内 ul/li 统一为 plan-feats 视觉 ─────────────────── */
.pcard ul,.pz-plan-card ul{
  list-style: none !important;
  margin: 12px 0 !important;
  padding: 0 !important;
}
.pcard ul li,.pz-plan-card ul li{
  position: relative !important;
  padding: 5px 0 5px 18px !important;
  font-size: 12.5px !important;
  color: var(--n600, #475569) !important;
  line-height: 1.5 !important;
}
.pcard ul li::before,.pz-plan-card ul li::before{
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--p50, #F0F9FF) !important;
  color: var(--p700, #0369A1) !important;
  font-size: 12px !important;  /* SKIN01 下限归级 */
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
}
.pcard ul li.no,.pz-plan-card ul li.no{
  color: var(--xia-color-text-faint, #475569) !important;
  text-decoration: line-through !important;
}
.pcard ul li.no::before,.pz-plan-card ul li.no::before{
  content: "✗" !important;
  background: var(--n50, #F8FAFC) !important;
  color: var(--xia-color-text-faint, #475569) !important;
}

/* ── 10. 方案 B：套餐订阅卡（借鉴 Buddy AI + Trae）───────────────── */
.pz-plan-row{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 18px !important;
  margin-top: 16px !important;
}
.pz-plan-card{
  position: relative !important;
  border: 1px solid var(--n200) !important;
  border-radius: var(--r-xl, 12px) !important;
  background: #fff !important;
  padding: 22px 20px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}
.pz-plan-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}
.pz-plan-card.is-current{
  border-color: var(--xia-color-primary-text, var(--p500)) !important;
  box-shadow: 0 0 0 3px var(--p50), var(--shadow-sm) !important;
}
.pz-plan-card.is-featured::before{
  content: "MVP 主账号" !important;
  position: absolute !important;
  top: 12px;
  right: -30px;
  transform: rotate(45deg) !important;
  background: linear-gradient(90deg, #0369A1, #075985) !important;  /* C9FIX-20261103：pk-ribbon + is-featured 斜角标 白字 ≥5.4 */
  color: #fff !important;
  font-size: 12px !important;  /* SKIN01 下限归级 */
  font-weight: 600 !important;
  padding: 3px 34px !important;
  letter-spacing: .04em !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(14,165,233,.35) !important;
}
.pz-plan-card .price-tag{
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--n900) !important;
  line-height: 1 !important;
}
.pz-plan-card .price-tag small{
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--n500) !important;
  margin-left: 4px !important;
}
.pz-plan-card .discount-tag{
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
  color: #fff !important;
  font-size: 12px !important;  /* SKIN01 下限归级 */
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  letter-spacing: .03em !important;
  box-shadow: 0 2px 6px rgba(245,158,11,.35) !important;
}
.pz-plan-card .plan-feats{
  margin: 14px 0 18px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex: 1 !important;
}
.pz-plan-card .plan-feats li{
  padding: 6px 0 !important;
  font-size: 12.5px !important;
  color: var(--n600) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  line-height: 1.5 !important;
}
.pz-plan-card .plan-feats li::before{
  content: "✓" !important;
  flex: none !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--p50) !important;
  color: var(--p700) !important;
  font-size: 12px !important;  /* SKIN01 下限归级 */
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
}
.pz-plan-card .plan-feats li.no{
  color: var(--xia-color-text-faint, #475569) !important;
  text-decoration: line-through !important;
}
.pz-plan-card .plan-feats li.no::before{
  content: "✗" !important;
  background: var(--n50) !important;
  color: var(--xia-color-text-faint, #475569) !important;
}
.pz-period-tabs{
  display: inline-flex !important;
  background: var(--n100) !important;
  border-radius: 999px !important;
  padding: 3px !important;
  border: 1px solid var(--n200) !important;
  margin: 10px 0 4px 0 !important;
}
.pz-period-tabs button{
  border: none !important;
  background: transparent !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--n600) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .15s ease !important;
  line-height: 1 !important;
}
.pz-period-tabs button.is-on{
  background: #fff !important;
  color: var(--p700) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.08) !important;
  font-weight: 600 !important;
}
.pz-period-tabs button .hint{
  font-size: 12px !important;  /* SKIN01 下限归级 */
  color: var(--xia-color-primary-text, var(--p500)) !important;
  font-weight: 600 !important;
  margin-left: 4px !important;
}
.pz-period-tabs button.is-on .hint{ color: var(--p700) !important; }

/* 年付时隐藏非年付价格组 */
[data-pz-per="yearly"] .pz-price-monthly{ display: none !important; }
[data-pz-per="monthly"] .pz-price-yearly{ display: none !important; }

/* ── A14. ≤860 顶栏瘦身：右侧不再被裁（TOPBAR-FIT-20261030）──────
   现象：手机/微信下顶栏「搜索框 + 导航」超出视口，右侧被切且拉不过去。
   做法：≤860 隐藏搜索与昵称，导航条改为横向自滚动（右端可滑达）。 */
@media (max-width: 860px){
  .mhtb-search{ display: none !important; }
  .mhtb-nick{ display: none !important; }
  .mhtb-wrap{ padding: 0 12px !important; min-width: 0 !important; }
  .mhtb-nav{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto !important;           /* 导航条自滚动，右端可达 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mhtb-nav::-webkit-scrollbar{ display: none; }
  .mhtb-nav > *{ flex: none !important; }
  .mhtb-right{ min-width: 0 !important; flex: none !important; }
}

/* ── A15. ≤640 双列内容栅格折叠（GRID-FOLD-20261030）────────────
   现象：「我的配置」等页面 .cf-grid 为 1.45fr/1fr 双列，窄屏不折叠，
         fr 子项 min-width:auto 撑出视口，右侧内容被 overflow-x 裁掉。
   做法：≤640 单列堆叠 + 子项 min-width:0（可收缩，不再撑宽）。 */
@media (max-width: 640px){
  .cf-grid{ grid-template-columns: 1fr !important; }
  .cf-grid > *{ min-width: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════
   SKIN01-20261101 · L3 统一按钮组件族（方案 B · 门禁卡 T-20261101-APPR-SKIN01）
   只吃 L1 令牌（--mh-n-* / --mh-radius-* / --mh-shadow-*）与 L2 注入（--mh-brand-*）。
   旧类名 .btn/.pill-btn/.pz-btn/.ja-btn/.jds-btn 保留别名一个版本周期，页面分批迁移。
   ══════════════════════════════════════════════════════════════════ */
.mh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; border-radius:var(--mh-radius-md,12px);
  padding:10px 22px; font:500 14px/1 var(--mh-font-sans,"PingFang SC","Microsoft YaHei",system-ui,sans-serif);
  cursor:pointer; transition:all .2s; text-decoration:none; box-sizing:border-box;
}
.mh-btn--primary{ background:var(--mh-brand-500,#0EA5E9); color:#fff; box-shadow:var(--mh-shadow-1); }
.mh-btn--primary:hover{ background:var(--mh-brand-600,#0284C7); box-shadow:var(--mh-shadow-2); }
.mh-btn--ghost{ background:transparent; color:var(--mh-brand-600,#0284C7); border-color:var(--mh-n-200,#E2E8F0); }
.mh-btn--ghost:hover{ border-color:var(--mh-brand-500,#0EA5E9); color:var(--mh-brand-500,#0EA5E9); }
.mh-btn--danger{ background:#DC2626; color:#fff; }
.mh-btn--danger:hover{ background:#B91C1C; }
.mh-btn--pill{ border-radius:var(--mh-radius-pill,999px); }
.mh-btn--sm{ padding:6px 14px; font-size:12px; border-radius:var(--mh-radius-sm,8px); }
.mh-btn--lg{ padding:14px 32px; font-size:16px; }

/* 旧类名别名（一个版本周期）：渲染口径并入 .mh-btn 族，页面私有样式仍可覆盖 */
.btn,.pz-btn,.ja-btn,.jds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; border-radius:var(--mh-radius-md,12px);
  padding:10px 22px; font:500 14px/1 var(--mh-font-sans,"PingFang SC","Microsoft YaHei",system-ui,sans-serif);
  cursor:pointer; transition:all .2s; text-decoration:none; box-sizing:border-box;
  background:var(--mh-brand-500,#0EA5E9); color:#fff; box-shadow:var(--mh-shadow-1);
}
.pill-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; border-radius:var(--mh-radius-pill,999px);
  padding:10px 22px; font:500 14px/1 var(--mh-font-sans,"PingFang SC","Microsoft YaHei",system-ui,sans-serif);
  cursor:pointer; transition:all .2s; text-decoration:none; box-sizing:border-box;
  background:var(--mh-brand-500,#0EA5E9); color:#fff; box-shadow:var(--mh-shadow-1);
}
.btn:hover,.pz-btn:hover,.ja-btn:hover,.jds-btn:hover,.pill-btn:hover{
  background:var(--mh-brand-600,#0284C7); box-shadow:var(--mh-shadow-2);
}

/* 统一卡片（L3 配套） */
.mh-card{
  background:#fff; border:1px solid var(--mh-n-200,#E2E8F0);
  border-radius:var(--mh-radius-lg,16px); box-shadow:var(--mh-shadow-1); padding:24px;
}
.mh-card:hover{ box-shadow:var(--mh-shadow-3); transform:translateY(-2px); transition:all .2s; }

/* 标题质感（SKIN01 提质口径：1.35 行高 + 字距 -0.015em + semibold 为主） */
.mh-h1,.mh-h2,.mh-h3{ line-height:1.35; letter-spacing:-.015em; font-weight:600; color:var(--mh-n-900,#0F172A); }

/* ═══════════════════════════════════════════════════════════════════
   B4 · 订阅弹窗支付区（正确归属：弹窗内布局，非侧栏）
   DRIFTB4（T-20261102-APPR-DRIFTB4）：A1/A7 侧栏组曾误纳 .pd-qrside（类名含
   side 被过度匹配），强制 224px 侧栏 + position:sticky，≤640px 整段 display:none，
   导致订阅弹窗支付区塌陷/消失。剥离后按弹窗真实语义重新定义。
   取值口径（实测校准，非派生）：
     · .pd-qr 站点自带 box-sizing:content-box → 186+padding8*2+border1*2=204px，
       而 A1 `.pd-qrside *{box-sizing:border-box}` 时期为 186px；为守「零视觉变化」，
       本段以 !important 保持 border-box（实测 base 186 / 无此规则 204）；
     · ≤640px 站内无断点规则（站点基础 .pd-qrside 是 gap:16px 全宽生效），
       故窄屏 gap:10px + 竖排同样需要 !important 才压得住页面自有 <style>。
   ═══════════════════════════════════════════════════════════════════ */
.pd-qrside{display:flex !important;gap:16px !important;align-items:center !important;
  width:auto !important;min-width:0 !important;max-width:none !important;flex:none !important;
  position:static !important}
.pd-qrside *{box-sizing:border-box !important}
@media (max-width:640px){
  .pd-qrside{flex-direction:column !important;gap:10px !important}
  .pd-plugin{text-align:center !important}
}


/* CS-FIX-PZNARROW-20261107 : 篇章域窄屏重排（通用规则）
   问题（390 视口实测）：
     .ti-row{grid-template-columns:22px 1fr 78px 62px 84px} 固定列宽合计 246px
       ⇒ 内容区仅 ~342px，标题列被压到 ~96px，整页看起来「缩成一小块」
     .ti-grid{grid-template-columns:1.55fr 1fr} 两列，手机上并排不可读
     页面自带样式表无任何窄屏 media query（只有 body{max-width:1440px}）
   修法：窄屏把固定列宽行转堆叠卡片、网格转单列、字号抬到可读下限（12px）。
   写在 pz-unify.css（篇章域布局权威统一文件）⇒ 一处生效，篇章域全部页面受益。 */
@media (max-width:860px){
  /* 固定列宽的「行」转堆叠卡片：每行独立一块，字段竖排 */
  .ti-row{
    grid-template-columns:22px 1fr !important;
    grid-auto-rows:auto !important;
    row-gap:4px !important;padding:10px 8px !important;
  }
  .ti-row > *{grid-column:2 !important;}
  .ti-row .rk{grid-column:1 !important;grid-row:1 !important;}
  .ti-row .ti-t{grid-column:2 !important;grid-row:1 !important;}
  .ti-row .ti-h, .ti-row .ti-sc, .ti-row .ti-tx, .ti-row .ti-op{
    grid-column:2 !important;font-size:12px !important;color:var(--n500) !important;
  }
  /* 网格转单列 */
  .ti-grid,.ca-grid,.ld-grid,.pm-grid,.geo-grid,.sku-grid,.mc-grid{grid-template-columns:1fr !important;}
  /* 顶栏信息块竖排 */
  .ti-top{flex-direction:column !important;align-items:flex-start !important;gap:8px !important;}
  /* 字号抬到可读下限 */
  .ti-card h3{font-size:14px !important;}
  .ti-card h3 small{font-size:12px !important;}
  .ti-card p,.ti-card td,.ti-row{font-size:12px !important;}
  .msec h1{font-size:var(--mh-fs-h1,28px) !important;line-height:1.28 !important;}/* CS-V2SPEC-20261108 : 18px 硬编码改走字号阶梯（原先导致 pz 域 h1 与其它域差一档） */
  .msec h2{font-size:16px !important;line-height:1.45 !important;}
  .main,.msec{padding:12px !important;}
}