/* ==========================================================================
   会员中心 + 会员企业站点 专用样式
   --------------------------------------------------------------------------
   为什么单独一个文件而不并进 ainisx.css：
   这两组页面只在 /member/* 与会员站域名下出现。并进主样式会让每个主站页面
   都多下载几 KB 用不上的规则；单独一份也便于日后调整会员端视觉时
   不必担心误伤主站。

   由 template/header.php 按 $type 条件引入（member / msite）。
   变量（--brand、--sp-* 等）全部复用 ainisx.css 的 :root，视觉保持同一套。
   ========================================================================== */

/* ---------- 会员中心：布局与卡片 ---------- */

.member-col { max-width: 860px; }

.member-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h1);
  line-height: 1.35;
}

.member-sub {
  margin: -14px 0 var(--sp-3);
  color: var(--text-soft);
}

.member-card {
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.member-card-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
}

.member-card-narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.member-card-center { text-align: center; }

.member-badge {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  margin-left: 6px;
  background: var(--brand-light);
  color: var(--brand);
  border-radius: 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  vertical-align: middle;
  text-align: center;
}

/* ---------- 会员中心：提示条 ---------- */

.member-notice {
  margin-bottom: var(--sp-2);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  line-height: 1.8;
}

.member-notice-ok   { background: #eef7f0; border: 1px solid #c3e4cd; color: #1a7f37; }
.member-notice-warn { background: #fff8e5; border: 1px solid #f0d19a; color: #8a6116; }

.member-help {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: var(--text-mute);
}

/* ---------- 会员中心：表单 ---------- */

.member-form .member-field { margin-bottom: var(--sp-2); }

.member-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.member-field input[type="text"],
.member-field input[type="password"],
.member-field input[type="number"],
.member-field input[type="email"],
.member-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--text);
  background: #fff;
}

.member-field input:focus,
.member-field textarea:focus {
  outline: none;
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px rgba(42, 107, 168, .12);
}

.member-field input[readonly] { background: #f6f7f9; color: var(--text-mute); }
.member-field textarea { resize: vertical; line-height: 1.75; }

.member-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 var(--sp-2);
}

.member-check {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.member-actions { margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.member-btn {
  display: inline-block;
  padding: 9px 18px;
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  font: inherit;
  cursor: pointer;
  transition: background .18s ease;
}

.member-btn:hover { background: var(--brand-dark); color: #fff; }

.member-btn-plain {
  background: #fff;
  color: var(--brand);
  border-color: var(--line-strong);
}

.member-btn-plain:hover { background: var(--brand-light); color: var(--brand); }

.member-link-danger {
  padding: 0;
  background: none;
  border: 0;
  color: #c0392b;
  font: inherit;
  cursor: pointer;
}

.member-link-danger:hover { text-decoration: underline; }

.member-foot {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.member-upload { display: flex; gap: 8px; align-items: center; }
.member-upload input[type="text"] { flex: 1 1 auto; }
.member-upload .member-help { margin: 0; }

/* ---------- 会员中心：正文可视化编辑器 ----------
   由 script/member.js 把 textarea[data-editor] 升级而成。
   结构：.member-editor > .member-editor-bar + .member-editor-area + textarea
   未升级时（无脚本/老浏览器）不存在这些元素，textarea 保持原样式，
   所以下面的规则都限定在 .member-editor 内，不会影响降级形态。 */

/* position:relative 的用途只有一个：给下面那个被视觉隐藏的 textarea
   提供定位包含块。否则它会以「初始包含块」（视口）为参照，
   偏移量随页面宽度变化，多出横向滚动条。详见 .member-editor-source-hidden。 */
.member-editor {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}

/* 工具栏常驻在编辑区上方。不用 position:sticky —— 表单本身不长，
   正文框 400px 高，滚动时把工具栏钉住反而会盖住上面的输入框。 */
.member-editor-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px;
  background: #f6f8fa;
  border-bottom: 1px solid var(--line);
}

.member-editor-btn {
  min-width: 34px;
  padding: 5px 9px;
  background: #fff;
  color: var(--text-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1.4;
  cursor: pointer;
}

.member-editor-btn:hover { background: var(--brand-light); color: var(--brand); border-color: var(--brand-mid); }
.member-editor-btn.is-on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* 源码/返回编辑放最右，与编辑类按钮拉开距离 */
.member-editor-btn-src { margin-left: auto; }

.member-editor-area {
  min-height: 300px;
  max-height: 620px;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text);
}

.member-editor-area:focus { outline: none; }

/* 空内容时的占位提示。contenteditable 没有原生 placeholder，
   用 :empty 伪类补一个——只在真的一个字符都没有时才显示。 */
.member-editor-area:empty::before {
  content: attr(data-placeholder);
  color: var(--text-mute);
  pointer-events: none;
}

/* 编辑区里的内容预览：与会员站前台的 .entry-body 保持同一套排版，
   这样会员在编辑器里看到的样子就是发布后的样子。 */
.member-editor-area h2 { margin: 20px 0 10px; padding-left: 10px; border-left: 3px solid var(--brand); font-size: 18px; }
.member-editor-area h3 { margin: 16px 0 8px; font-size: 16px; color: var(--brand-dark); }
.member-editor-area p { margin: 0 0 12px; }
.member-editor-area ul, .member-editor-area ol { margin: 0 0 12px; padding-left: 24px; }
.member-editor-area li { margin-bottom: 4px; }
.member-editor-area img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.member-editor-area a { color: var(--brand); }
.member-editor-area blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  background: var(--brand-light);
  border-left: 3px solid var(--brand);
  color: var(--text-soft);
}

/* 源码模式下把 textarea 显出来：复用它自己的字段样式，
   但去掉上边框，避免与工具栏之间出现双线。 */
.member-editor textarea {
  border: 0;
  border-radius: 0;
  min-height: 300px;
}
.member-editor textarea:focus { box-shadow: none; }

/* 升级完成后 textarea 收起（源码模式会移除这个类）。
   不用 display:none —— 那会让某些浏览器在表单提交时跳过该字段，
   造成正文静默丢失。用视觉隐藏保住提交行为。

   ⚠️ 选择器必须写成 `.member-editor textarea.member-editor-source-hidden`（权重 0,2,1），
      不能只写 `.member-editor-source-hidden`（0,1,0）。
      只写一个类名时，下面三条规则会同权重胜出、把这里的隐藏属性逐条覆盖掉：
        · `.member-field textarea { width:100%; padding:9px 12px }`（0,1,1）→ 宽度与内边距
        · `.member-editor textarea { min-height:300px }`（0,1,1）→ 最小高度
      结果是这个「1×1 的隐藏框」退回成整幅宽度、带内边距、300px 高的实体框。
      它又是 position:absolute 且没有定位祖先，包含块落到初始包含块（视口），
      于是右边界 = 静态位置 + 视口宽 → 每个断点都多出 45px 的横向滚动条
      （1920px 下因为表单居中，多出 365px）。

   left/top 显式归零：position:absolute 且 left/top 为 auto 时元素停在
   「静态位置」，虽然已被裁成 1×1 看不见，但偏移量会随外层居中而变化。
   钉死在 0 上，裁剪矩形就不会再随容器宽度漂移。 */
.member-editor textarea.member-editor-source-hidden {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.member-inline-form { display: inline; }

/* 带输入框的内联表单（「我的分类」里的改名行）：与单纯的按钮表单不同，
   输入框要占住中间一段宽度，且窄屏下允许折行，否则分类名会把操作挤出去。 */
.member-inline-form-wide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.member-inline-form-wide input[type="text"] {
  width: 12em;
  max-width: 40vw;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: var(--fs-sm);
  font-family: inherit;
}

.member-list-act .member-inline-form-wide { flex: 0 1 auto; min-width: 0; }

/* ---------- 会员中心：列表 ---------- */

.member-list { margin: 0; padding: 0; list-style: none; }

.member-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.member-list li:last-child { border-bottom: none; }

.member-list-title { flex: 1 1 auto; min-width: 0; }
.member-list-meta { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--text-mute); }
.member-list-act { flex: 0 0 auto; display: flex; gap: 12px; font-size: var(--fs-sm); }

.member-tag {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: var(--fs-xs);
}

.member-tag-wait { background: #fff8e5; color: #8a6116; }

/* ---------- 会员中心：访客留言 ---------- */

.member-msg-list { margin: 0; padding: 0; list-style: none; }

.member-msg {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.member-msg:last-child { border-bottom: none; }

.member-msg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin-bottom: 8px;
}

.member-msg-name { font-size: var(--fs-sm); }
.member-msg-contact { font-size: var(--fs-sm); color: var(--brand); word-break: break-all; }
.member-msg-time { margin-left: auto; font-size: var(--fs-xs); color: var(--text-mute); }

.member-msg-body {
  margin: 0;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--text);
  word-break: break-word;
}

.member-msg-act { margin-top: 8px; text-align: right; font-size: var(--fs-sm); }

.member-dl { margin: 0; }
.member-dl > div { display: flex; gap: 12px; padding: 6px 0; }
.member-dl dt { flex: 0 0 90px; color: var(--text-soft); font-size: var(--fs-sm); }
.member-dl dd { flex: 1 1 auto; margin: 0; min-width: 0; word-break: break-all; }

.member-site-url { margin: 0 0 6px; word-break: break-all; }

/* ---------- 会员中心：侧栏导航 ---------- */

.member-nav-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
}

.member-nav-list { margin: 0 0 var(--sp-2); padding: 0; list-style: none; }

.member-nav-list a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
}

.member-nav-list a:hover { background: var(--brand-light); color: var(--brand); }
.member-nav-list .is-active a { background: var(--brand); color: #fff; }

.member-nav-site {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}

.member-nav-site-label {
  margin: 0 0 6px;
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

.member-nav-site-url { font-size: var(--fs-sm); word-break: break-all; }

.member-nav-logout { margin-top: var(--sp-2); }

/* ---------- 会员中心：模板选择 ---------- */

.member-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: var(--sp-2);
}

/* 整块是 label：点预览图也能选中，不必去瞄那个小圆点 */
.member-tpl {
  position: relative;
  display: block;
  padding: 12px;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.member-tpl:hover { border-color: var(--brand-mid); background: var(--brand-light); }
.member-tpl-body { display: block; }

/* 单选圆点移到卡片右上角，不占正文排版位置 */
.member-tpl > input[type="radio"] {
  position: absolute;
  top: 16px;
  right: 14px;
  margin: 0;
  z-index: 3;
}

.member-tpl-name { display: block; margin-top: 10px; font-size: var(--fs-sm); font-weight: 600; }
.member-tpl-desc { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-mute); line-height: 1.7; }

/* 选中态：:checked + 兄弟选择器，无脚本也能正确高亮当前版式 */
.member-tpl input[type="radio"]:checked ~ .member-tpl-body { color: var(--brand); }
.member-tpl:has(input[type="radio"]:checked) {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(42, 107, 168, .12);
}

/* 「当前使用」角标默认不占位，选中时才浮现 */
.member-tpl-pick {
  position: absolute;
  top: 14px;
  right: 34px;
  display: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  line-height: 1.7;
}

.member-tpl:has(input[type="radio"]:checked) .member-tpl-pick { display: inline-block; }

/* 浏览器不支持 :has()（Safari < 15.4）时靠 radios 自身的选中态兜底：
   至少圆点是对的，边框高亮缺失不影响功能。 */

/* ---------- 版式预览图（纯 CSS 迷你版式，见 member-site.php） ---------- */

.tpl-pv {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--pv-bg, #fff);
}

.tpl-pv i { display: block; }

/* 迷你页头：左边一个色块当 Logo，右边三条当导航 */
.tpl-pv-hd {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  background: var(--pv-card, #fff);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.tpl-pv-hd i { width: 12px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .14); }
.tpl-pv-hd i:first-child { width: 22px; height: 5px; background: var(--pv-brand, #1c4e80); }
.tpl-pv-hd-flat { justify-content: flex-start; }
.tpl-pv-hd-flat i { background: rgba(0, 0, 0, .2); }

/* 迷你首屏 */
.tpl-pv-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 42%;
  margin: 6px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--pv-brand, #1c4e80) 0%, rgba(0, 0, 0, .28) 140%);
}

.tpl-pv-hero i { border-radius: 2px; background: rgba(255, 255, 255, .85); }
.tpl-pv-l1 { width: 54%; height: 6px; }
.tpl-pv-l2 { width: 38%; height: 3px; opacity: .75; }
.tpl-pv-btn { width: 26px; height: 7px; margin-top: 2px; background: var(--pv-accent, #c8963e) !important; }

/* 简约大气：左对齐、无底色块，靠细线分隔 */
.tpl-pv-hero-flat {
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  margin: 10px 8px 6px;
  padding: 0;
  background: none;
  border-radius: 0;
}

.tpl-pv-hero-flat i { background: rgba(0, 0, 0, .8); }
.tpl-pv-hero-flat .tpl-pv-l1 { width: 70%; height: 8px; }
.tpl-pv-hero-flat .tpl-pv-l2 { width: 46%; height: 3px; margin-top: 3px; opacity: .45; }

.tpl-pv-rule { height: 1px; margin: 4px 8px 6px; background: rgba(0, 0, 0, .12); }

/* 深色质感：深底 + 光晕 */
.tpl-pv-hero-dark { background: linear-gradient(135deg, #0b1220 0%, #16263c 100%); }
.tpl-pv-hero-dark .tpl-pv-glow {
  position: absolute;
  top: -22px;
  right: -14px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78, 161, 255, .75) 0%, rgba(78, 161, 255, 0) 70%);
}

/* 迷你卡片行 */
.tpl-pv-cols { display: flex; gap: 4px; margin: 0 6px; }

.tpl-pv-cols i {
  flex: 1 1 0;
  height: 26px;
  border-radius: 3px;
  background: var(--pv-card, #fff);
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.tpl-pv-cols-dark i { background: #171a20; border-color: #2b333d; box-shadow: none; }

.tpl-pv-rows { display: flex; flex-direction: column; gap: 6px; margin: 0 8px; }

.tpl-pv-rows i { height: 7px; border-radius: 0; background: rgba(0, 0, 0, .1); }
.tpl-pv-rows i:nth-child(2) { width: 84%; }
.tpl-pv-rows i:nth-child(3) { width: 68%; }

.tpl-pv-foot { display: block; height: 12px; margin-top: 6px; background: var(--pv-brand, #1c4e80); opacity: .85; }
.tpl-pv-foot-dark { background: #0b0d11; }

/* ---------- 会员企业站点 ---------- */

/* 页头只保留「品牌 + 汉堡」一行（导航已移进抽屉，见 ainisx_render_member_site_head）。
   不再 flex-wrap：导航条已不在这一行里，没有任何东西需要折行；
   留着 wrap 反而会让窄屏下的品牌区自己被折成两行。 */
.msite-header .header-top { display: flex; gap: var(--sp-2); align-items: center; }

/* 页头里的 Logo 小图。放在站名左侧、与文字基线对齐，
   不设固定宽高比让不同比例的 Logo（横版/方版）都能自然摆放。 */
.msite-brand-logo {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  vertical-align: middle;
}

.msite-brand-logo img {
  max-height: 40px;
  width: auto;
  border-radius: 4px;
}

/* 会员站页头。
   .msite-nav 现在复用主站的 .site-nav / .nav-list / .nav-link 结构（见
   ainisx_render_member_site_head），所以这里**不再**自己写 flex 布局——
   那会与主站的抽屉规则互相打架：窄屏时 .site-nav 要变成 position:fixed 的
   右侧抽屉，而 flex-wrap 的横排规则会把抽屉内容重新摊平。
   会员站专属的视觉差异改在下面按 .msite-header 限定重写。 */

/* 导航项的位置由主站的 .nav-list 决定；这里只覆盖会员站的间距与字号：
   企业站的导航项比资讯站少，字略小一点更紧凑。 */
.msite-header .nav-inner { display: flex; justify-content: flex-end; }

.msite-header .nav-list { margin-left: 0; }

.msite-header .nav-link {
  padding: 12px 13px;
  font-size: var(--fs-sm);
}

/* 会员站不用主站那条金色下划线：企业站导航更克制，
   选中态用加粗 + 主色即可，避免与首屏的金色 CTA 抢视线。 */
.msite-header .nav-link::after { display: none; }

.msite-header .nav-item.is-active > .nav-row > .nav-link,
.msite-header .nav-item:hover > .nav-row > .nav-link {
  color: var(--brand-dark);
}

.msite-header .nav-item.is-active > .nav-row > .nav-link { font-weight: 600; }

/* 首屏横幅。
   position:relative + overflow:hidden 是给横幅图（.msite-hero-bg）用的：
   它要绝对定位铺满并允许轻微放大（视觉上像「慢速推移」），不裁掉就会
   溢出到首屏之外盖住下面的内容。 */
.msite-hero {
  position: relative;
  overflow: hidden;
  /* 上下留白按视口自适应：窄屏用 32px 起步，宽屏可到 56px。
     写死 var(--sp-5)=48px 时手机上会把品牌名往下压掉近半屏。 */
  padding: clamp(32px, 6vw, 56px) var(--sp-3);
  margin-bottom: var(--sp-4);
  background: var(--brand-grad);
  border-radius: var(--radius);
  color: #fff;
  text-align: center;
}

/* 有横幅图时不再用圆角：通栏式图片配圆角会露出四个角的底色，
   在浅色页面上像没铺满。 */
.msite-hero.has-banner { border-radius: 0; }

.msite-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.04);
}

/* 压暗层。横幅图是会员自己上传的，明暗、花哨程度都不可控——
   不压暗就没法保证叠在上面的白字始终可读。
   用「上下深、中间稍浅」的竖向渐变而不是单一斜向渐变：
   企业横幅多半把主体放在画面中部，竖向渐变对中间区域的遮挡更少，
   同时上下两端压得更实，标题与联系方式各自所在的位置对比度最够。 */
.msite-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(9, 22, 38, .82) 0%,
    rgba(9, 22, 38, .58) 45%,
    rgba(9, 22, 38, .74) 100%
  );
}

/* 无横幅图时的纯色首屏：加一层柔和的高光，避免整块平色显得「没做完」 */
.msite-hero:not(.has-banner) {
  background-image:
    radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 60%),
    var(--brand-grad);
}

.msite-hero-inner { position: relative; z-index: 2; }

.msite-hero-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  /* 内描边而非外边框：不同 Logo 底色深浅不一，一圈半透明白线能让它
     与背景之间始终有一条分界，且不会改变盒模型尺寸。 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.msite-hero-name {
  margin: 0 0 12px;
  font-size: var(--fs-display);
  line-height: 1.25;
  /* 大字号下收紧字距是「精致」与「粗糙」最直接的分界：
     默认字距在大标题上会显得松散。 */
  letter-spacing: -.01em;
  color: #fff;
}

.msite-hero-intro {
  margin: 0 auto;
  max-width: 58ch;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.95;
  opacity: .93;
}

.msite-hero-meta {
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  font-size: var(--fs-sm);
  opacity: .9;
}

/* 用一条竖直细线做分隔，而不是圆点或竖线字符：
   竖线是 span 的左边框，**只出现在换行后的首个元素上时也不会孤立在行首**
   （即使折行，它也贴在文字左侧，观感仍然成立）。 */
.msite-hero-meta > span + span {
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, .28);
}

/* 窄屏：联系方式改为纵向堆叠，取消分隔线——
   横排时每项宽度不一，挤在一行会折得很零碎，不如老实排成一列。 */
@media (max-width: 700px) {
  .msite-hero-meta {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .msite-hero-meta > span + span {
    padding-left: 0;
    border-left: 0;
  }
}

.msite-hero-actions {
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* 会员站自己的按钮。不复用 .member-btn：那是会员中心（登录后台）的
   视觉语言，圆角与配色偏「表单控件」；会员站是面向访客的展示页，
   按钮要更「大、平、可点」。 */
.msite-btn {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  line-height: 1.4;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.msite-btn-main {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1206;
  font-weight: 600;
}

.msite-btn-main:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #1a1206; }

.msite-btn-ghost {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

.msite-btn-ghost:hover { background: rgba(255, 255, 255, .24); color: #fff; }

/* 区块之间的纵向节奏统一到 --sp-4(32px)。用 > 直接子代限定，
   避免影响区块内部嵌套的 section（那会让内容被越推越开）。 */
.main-col > .msite-section { margin-bottom: var(--sp-4); }
.main-col > .msite-section:last-child { margin-bottom: 0; }

/* 首页的内容区块：白底卡片式，与「文章列表」拉开层级 */
.msite-block {
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.msite-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* 标题左侧加一小段品牌色短线：给每个区块一个明确的「开始」信号，
   比单纯加大字号更省空间，也让整页的视觉锚点整齐划一。 */
.msite-block-head .msite-section-title {
  position: relative;
  margin: 0;
  padding-left: 12px;
}

.msite-block-head .msite-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.msite-more-link {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* 数据条：一行醒目的关键数字
   列数固定为「格数」而不是 auto-fit：本项目的数据条只会有 2~4 格
   （内容数 / 分类数 / 电话 / 服务时间），auto-fit 在窄屏会把它们挤成
   2 列 + 1 列的孤儿行（实测 390px 下第三格单独占半行，很难看）。
   固定列数让每一行都是整齐等分。 */
.msite-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-bottom: var(--sp-4);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

/* 三格及以上在宽屏排成一行；两格时也保持一行两列 */
@media (min-width: 641px) {
  .msite-stats { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}

.msite-stat {
  /* 数字在前、标签在后，两者间距用固定值而不是 margin-top，
     这样多列宽度不一时数字的基线仍然齐平 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-height: 82px;
  padding: 16px 12px;
  background: var(--card);
  text-align: center;
}

.msite-stat strong {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--brand);
  /* 电话这类长数字要能换行，否则会把整格撑宽、把相邻格挤变形 */
  word-break: break-all;
}

.msite-stat span { display: block; font-size: var(--fs-xs); color: var(--text-mute); }

/* 窄屏：单列 + 每行「左数字右标签」的横向排布。
   不用 2 列是因为格数不定（2~4），3 格时必然出现一格独占半行的孤儿；
   居中堆叠又会占掉近 250px 的首屏高度。横向单行每格约 50px，
   三格加起来仍然比两列居中更省空间，且永不会出现孤儿行。

   ⚠️ 这条必须排在 .msite-stat 的基础规则**之后**：
      同优先级的后代规则里，后出现的获胜，而媒体查询不改变优先级。
      写在基础规则之前时这里的覆盖会被上面那条静默吃掉。 */
@media (max-width: 640px) {
  .msite-stats { grid-template-columns: minmax(0, 1fr); }

  .msite-stat {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    padding: 12px 14px;
    text-align: left;
  }

  .msite-stat strong { font-size: 18px; }

  .msite-stat span { flex: 0 0 auto; }
}

/* 「走进我们」：左文右事实清单 */
.msite-about {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.msite-about-text { margin: 0 0 var(--sp-2); font-size: 15px; line-height: 1.95; color: var(--text-soft); }

.msite-about-facts { margin: 0; padding: 0; list-style: none; }

.msite-about-facts li {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--fs-sm);
}

.msite-about-facts li:last-child { border-bottom: none; }
.msite-fact-k { flex: 0 0 68px; color: var(--text-mute); }
.msite-fact-v { flex: 1 1 auto; min-width: 0; color: var(--text); word-break: break-all; }

/* 底部联系 CTA */
.msite-cta {
  margin-top: var(--sp-5);
  padding: clamp(36px, 6vw, 56px) var(--sp-3);
  /* 与首屏同一套底色 + 一点柔和高光，首尾呼应；
     中间内容区是白/浅灰，这一块深色把整页「收口」。 */
  background-image:
    radial-gradient(110% 80% at 50% 0%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 62%),
    var(--brand-grad);
  color: #fff;
  text-align: center;
}

.msite-cta-title {
  margin: 0 0 10px;
  font-size: var(--fs-h2);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: #fff;
}

.msite-cta-line { margin: 0; font-size: var(--fs-body); opacity: .92; }
.msite-cta-btn { margin: var(--sp-3) 0 0; }

/* 卡片右下角的「查看详情」提示 */
.card-more {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--brand);
}

.card:hover .card-more { color: var(--accent); }

/* ---------- 会员站：卡片精细化 ----------
   主站的 .card 是资讯卡片（标题长度不可控、张数多），会员站的卡片张数少、
   更接近「产品/业务条目」，所以这里做的是**统一而非改变**：
   把标题与摘要各限制到固定行数，让同一行卡片高度一致——
   高度参差的卡片阵是企业站最显廉价的观感来源。 */

/* 网格列数：主站用 auto-fill + 1fr，条目多时铺满一行是对的；
   但会员站常常只有一两条内容，那样会**预留出三四列空轨道**——
   一张卡孤零零靠在左边、右侧一大片空白，是整页最显业余的地方。

   改成 auto-fit + 上限 360px + 居中：
   - 只有 1 条 → 一张 360px 的卡居中，看起来像「精选条目」而非「没铺满」
   - 3 条 → 三张并排居中
   - 多到放不下时自动换行，行内依然居中
   上限 360px 同时避免了条目少时单卡被拉成 1200px 的巨型横幅。 */
.page-msite .card-grid {
  grid-template-columns: repeat(auto-fit, minmax(248px, 360px));
  justify-content: center;
}

.page-msite .card {
  display: flex;
  flex-direction: column;
  /* hover 位移从主站的 -2px 收敛到 -3px + 更深的阴影，
     在会员站的白底大留白里，这点位移已经足够被感知到 */
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.page-msite .card:hover { transform: translateY(-3px); }

.page-msite .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--sp-2) var(--sp-2) var(--sp-2);
}

/* 标题最多两行。字数差异极大的标题若不做截断，同一行卡片会高低不齐 */
.page-msite .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 8px;
  font-size: var(--fs-h3);
  line-height: 1.5;
}

/* 摘要最多两行，且占据剩余空间——
   这样「查看详情」在所有卡片里都会被压到同一条基线上 */
.page-msite .card-intro {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 auto;
  line-height: 1.75;
}

/* 「查看详情」做成一个带箭头的整体，比裸文字更像可点的入口 */
.page-msite .card-more {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.page-msite .card-more::after {
  content: " ›";
  transition: transform .2s ease;
  display: inline-block;
}

.page-msite .card:hover .card-more::after { transform: translateX(3px); }

/* 分类徽标与日期同处一行时，徽标吃掉多余空间把日期推到右侧，
   避免日期紧贴徽标、看起来像徽标的一部分 */
.page-msite .card-cat { margin-right: auto; }
.page-msite .card-meta { align-items: center; }

/* ---------- 会员站：按钮与表单的触控尺寸 ----------
   移动端可点目标建议 ≥44px（iOS HIG / Material 都给的这个数）。
   企业站的按钮是主要转化入口，做小了很难点中。 */

.msite-btn {
  /* 保证任何字号下高度都够：padding 之外的这一层 min-height 是兜底 */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.msite-page-cta .msite-btn { flex: 0 1 auto; }

/* 联系页表单：输入框与提交按钮在触屏上都要够大。
   用 .msite-msg-form 限定，避免影响会员中心（那是 .member-form）。 */
.msite-msg-form input[type="text"],
.msite-msg-form textarea {
  min-height: 46px;
  font-size: 15px;   /* ≥16px 才不会被 iOS 自动放大，15px 折中兼顾观感 */
}

.msite-msg-form textarea { min-height: 120px; }

.msite-msg-form .member-btn {
  min-height: 44px;
  padding: 11px 22px;
}

/* ---------- 会员站：静态页（关于我们 / 联系我们） ---------- */

.msite-page {
  padding: var(--sp-4) var(--sp-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.msite-page-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h1);
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* 引导语：左边一条品牌色短线 + 稍大的字号，
   与下方正文形成明确的「摘要 / 正文」层级 */
.msite-page-lead {
  margin: 0 0 var(--sp-3);
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--accent);
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.95;
  color: var(--text-soft);
}

/* 正文段落：行高放到 2 让中文长段落更透气；段间距比行高略大，
   段落边界才看得出来（两者接近时整块会糊成一片） */
.msite-prose p {
  margin: 0 0 1.15em;
  font-size: 15px;
  line-height: 2;
  color: var(--text);
}

.msite-prose p:last-child { margin-bottom: 0; }

/* 事实清单：标签列用固定宽度对齐，值列留足空间。
   行与行之间用极浅的分隔线，不用虚线——虚线在大段文字里显得碎。 */
.msite-page-facts { margin: var(--sp-3) 0 0; padding: 0; border-top: 1px solid var(--line); }

.msite-page-facts > div {
  display: flex;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.msite-page-facts > div:last-child { border-bottom: none; }

.msite-page-facts dt { flex: 0 0 76px; color: var(--text-mute); }
.msite-page-facts dd { flex: 1 1 auto; margin: 0; min-width: 0; word-break: break-all; color: var(--text); }

.msite-page-cta { margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* 关于我们的按钮在浅底上，ghost 版要换成深色描边 */
.msite-page-cta .msite-btn-ghost,
.msite-contact-grid .msite-btn-ghost {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--brand);
}

.msite-page-cta .msite-btn-ghost:hover,
.msite-contact-grid .msite-btn-ghost:hover { background: var(--brand-light); color: var(--brand); }

.msite-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--sp-3);
  align-items: start;
}

.msite-contact-card {
  padding: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.msite-contact-card .msite-section-title { margin-bottom: var(--sp-2); }

/* 蜜罐字段：给自动填表的脚本一个「看得见」的输入框，
   对真人则彻底移出可视区与无障碍树（不能用 display:none——
   部分脚本会跳过隐藏字段，那样蜜罐就白设了）。 */
.msite-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.msite-msg-form { position: relative; }

.msite-req { color: #c0392b; font-size: var(--fs-xs); }

.msite-section-title {
  margin: 0 0 6px;
  font-size: var(--fs-h2);
  line-height: 1.4;
}

.msite-count { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--text-mute); }
.msite-more { margin: var(--sp-3) 0 0; text-align: center; }
.msite-pagetotal { color: var(--text-mute); font-size: var(--fs-sm); margin-left: 4px; }

/* 分类筛选条：横向可换行的胶囊 */
.msite-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--sp-3);
}

.msite-filter a {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.msite-filter a:hover { border-color: var(--brand-mid); color: var(--brand); background: var(--brand-light); }
.msite-filter a.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 卡片上的分类徽标 */
.card-cat {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand);
  font-size: var(--fs-xs);
}

.card-cat:hover { background: var(--brand); color: #fff; }

.msite-contact { margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.msite-contact li { padding: 2px 0; }

.msite-related { margin-top: var(--sp-4); }

.msite-related-list { margin: 0; padding: 0; list-style: none; }

.msite-related-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.msite-related-list li:last-child { border-bottom: none; }
.msite-related-list a { flex: 1 1 auto; min-width: 0; }
.msite-related-list time { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--text-mute); }

/* ---------- 小屏 ---------- */

@media (max-width: 900px) {
  /* 「走进我们」与联系页的双栏在窄屏塌成单栏——并排两块在 700px 以下
     每块只有 300px 出头，中文一行放不下几个字，阅读体验比堆叠差得多。 */
  .msite-about,
  .msite-contact-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  /* 品牌区自身可以折行（Logo 图 + 站名 + 简介在窄屏放不下时），
     但汉堡按钮必须留在首行右上角——它一旦被折到第二行，
     访客第一眼就看不到「这里能打开菜单」。 */
  .msite-header .header-top { align-items: flex-start; }
  .msite-header .nav-toggle { flex: 0 0 auto; }

  /* 抽屉内的导航项：纵向列表，点击区高度按移动端手感给足。
     这里的 padding 是给抽屉里的 .nav-link 用的（窄屏才会展开成抽屉），
     不是原先那套「横排折行时压缩内边距」的思路。 */
  .msite-header .nav-link { padding: 13px 10px; }

  .member-dl dt { flex-basis: 72px; }
  /* 首屏在手机上收一收内边距：48px 的上下留白会把品牌名挤出首屏 */
  .msite-hero { padding: var(--sp-4) var(--sp-2); }
  .msite-stat strong { font-size: 19px; }
  .msite-block { padding: var(--sp-2); }
  .msite-page { padding: var(--sp-3) var(--sp-2); }
  .msite-page-facts > div { flex-direction: column; gap: 2px; }
  .msite-page-facts dt { flex-basis: auto; }
}

/* ==========================================================================
   长内容自适应安全网
   --------------------------------------------------------------------------
   会员站在「内容」这件事上有一处与主站根本不同：页面上绝大多数文字都是
   **会员自己录进去的**，长度与形态完全不可控，而且不像主站那样由编辑把关。
   实测最容易出问题的是三类：

     ① 超长公司名 —— 「深圳市尚新假发制品有限公司深圳南山旗舰店」这种
        中文长名，在 320px 视口下宽 410px，直接把页头与整页顶开；
        英文长名（无空格）更狠。
     ② 无空格长串 —— 邮箱、URL、产品序列号、连续电话号。浏览器默认只在
        空格 / 连字符 / CJK 字之间断行，遇到这种串会当作一个「字」处理，
        整串顶出去。
     ③ 多列参数表与代码块 —— XssHtml 的标签白名单里 table / pre 是放行的
        （见 zb_system/function/lib/xsshtml.php），会员从 Word 或别处粘一份
        规格表进来，表格的自动布局按「不换行的最小内容宽」展开，列一多就撑破。

   下面按「文本」与「块级内容」两类分别兜住。全部限定在 .page-msite /
   .page-member 之下——这两个类名只在会员站与会员中心的 <body> 上出现，
   主站页面一个字都不会受影响。
   ========================================================================== */

/* ---------- ① 文本：允许在任何字符之间断行 ----------

   用 overflow-wrap 而不是 word-break: break-all：
   break-all 会把正常的中英混排也切得七零八落（英文单词从中间断开），
   观感明显变差。overflow-wrap: anywhere 只在「这一行真的放不下」时才断，
   放得下时与默认表现完全一致，且它同时会把元素的最小内容宽度降到 0，
   让 flex / grid 子项愿意收缩而不是把父容器顶开。 */
.page-msite .site-logo,
.page-msite .msite-hero-name,
.page-msite .msite-hero-intro,
.page-msite .msite-hero-meta span,
.page-msite .msite-hero-actions .msite-btn,
.page-msite .msite-cta-title,
.page-msite .msite-cta-line,
.page-msite .msite-section-title,
.page-msite .msite-more-link,
.page-msite .msite-page-title,
.page-msite .msite-page-lead,
.page-msite .msite-page-cta .msite-btn,
.page-msite .msite-prose p,
.page-msite .msite-about-text,
.page-msite .msite-filter a,
.page-msite .msite-count,
.page-msite .msite-pagetotal,
.page-msite .breadcrumb,
.page-msite .breadcrumb .current,
.page-msite .msite-related-list a,
.page-msite .msite-related-list time,
.page-msite .msite-contact li,
.page-msite .entry-title,
.page-msite .card-title,
.page-msite .card-intro,
.page-msite .card-cat,
.page-msite .card-more,
.page-msite .empty-tip,
.page-msite .footer-logo,
.page-msite .footer-desc,
.page-msite .footer-note,
.page-msite .footer-copy,
.page-msite .footer-col a,
.page-msite .msite-msg-form .member-btn,
/* 表单标签与说明。这两处当前都是硬编码文案，但会员站的联系方式栏位日后
   若改成可配置，或者把邮箱当提示文字渲染，标签行一样会被顶开——
   加一条不花钱的兜底。 */
.page-msite .member-field > label,
.page-msite .member-help,
.page-member .member-title,
.page-member .member-sub,
.page-member .member-card-title,
.page-member .member-list-title,
.page-member .member-msg-name,
.page-member .member-help,
.page-member .member-notice,
.page-member .member-foot,
.page-member .member-tpl-name,
.page-member .member-tpl-desc,
.page-member .member-badge,
.page-member .member-nav-title,
/* 表单标签：会员自己填的联系方式可能是长邮箱或长网址，标签行照样会被顶开 */
.page-member .member-field > label,
.page-member .member-check,
/* 「站点概览」的字段值：站点地址、绑定域名都是长串 */
.page-member .member-dl dd,
.page-member .member-msg-contact,
.page-member .member-msg-body,
.page-member .member-nav-site-url,
.page-member .member-site-url,
.page-member .member-msg-time {
  overflow-wrap: anywhere;
}

/* 正文容器整体继承换行：会员在正文里粘链接、粘产品序列号都很常见。
   overflow-wrap 是继承属性，写在这一个容器上就覆盖了它内部的
   p / li / h2 / 引用等全部块级子元素，不必逐个选择器列一遍。 */
.page-msite .entry-body { overflow-wrap: anywhere; }

/* 但表格要反过来：单元格允许任意断行会把「规格参数表」压成一列一个字的
   窄条，比横向滚动难看得多。表格保持自然宽度，由上面 ③ 的 overflow-x
   接管滚动。（写在容器规则之后，同权重后出现者胜。） */
.page-msite .entry-body table,
.page-msite .entry-body th,
.page-msite .entry-body td { overflow-wrap: normal; }

/* 正文里的图片同理：段落已允许任意断行，但 img 不是文本，不受影响；
   这里再确认一次宽度上限，防会员在 HTML 里写死 width 属性。 */
.page-msite .entry-body img { max-width: 100%; height: auto; }

/* ---------- ② 页头站名：宽度不许超过品牌区 ----------

   .site-logo 是 inline-block + white-space:nowrap（窄屏由主站规则补上省略号），
   inline-block 的宽度取自内容，父级再窄也不会主动收缩——于是长站名会
   从品牌区里伸出去。max-width:100% 把它的盒子钉在品牌区宽度内，
   配合上面的 overflow-wrap，宽屏时换成两行、窄屏时走省略号。

   主站的 .site-logo 有同样的问题，但那是主站的事（站名由运营维护、
   长度可控），这里只修会员站与会员中心的页头，不动全局规则。

   ⚠️ 会员中心（.page-member）用的是**主站**的 .site-header，不是 .msite-header，
      必须单独覆盖一遍。实测主站那条 ≤980px 的
      `.site-logo { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }`
      单独存在时形同虚设：.site-logo 是 inline-block，宽度走 shrink-to-fit，
      而 white-space:nowrap 让它的 min-content 等于整串文字的宽度——
      父级再窄它也不收缩。overflow:hidden 只裁内容、不改盒子宽度，
      于是盒子仍是 556px，把 390px 视口下的文档撑到 879px。
      补一个 max-width 才让它真正开始收缩，省略号也随之出现。 */
.msite-header .site-logo,
.page-member .site-header .site-logo { max-width: 100%; }

/* 品牌区本身可能被内容顶宽：它是 flex 子项，min-width 必须显式归零
   才肯收缩到内容宽度以下。（.site-brand 已在主站规则里设了 min-width:0，
   这里重复一次是为了不让「谁先加载」影响结果。） */
.msite-header .site-brand,
.page-member .site-header .site-brand { min-width: 0; }

/* ---------- ②b 会员中心页脚 ----------

   会员中心用的是**主站**页脚（模板里是 {template:footer}），所以这里
   要再覆盖一遍——会员站那份（.msite-footer）不在这个作用域内。

   ⚠️ 这一条没法靠元素探针发现：长 URL 是**文字**溢出 .footer-desc 的盒子，
      而不是某个子元素越界，所以越界元素列表是空的，只有文档 scrollWidth
      会变大（实测 390px 视口下被撑到 879px）。
      .footer-main 是四列 grid，页脚文案放不下时不换行就会横向撑开整个网格。 */
.page-member .site-footer .footer-desc,
.page-member .site-footer .footer-note,
.page-member .site-footer .footer-copy,
.page-member .site-footer .footer-col li,
.page-member .site-footer .footer-col a { overflow-wrap: anywhere; }

/* ---------- ③ 正文里的宽块级内容：各自横向滚动 ----------

   表格与代码块用 display:block + overflow-x:auto 就地变成可横向滚动的块。
   之所以不套一层 wrapper：正文是会员内容原样输出（{$geomember_post.Content}），
   服务端逐块加壳要重写一遍 HTML，性价比太低。
   之所以不强行 table-layout:fixed 压窄列宽：参数表里全是数字与型号，
   压窄就会断行到看不清，给一条滚动条是更诚实的选择。 */
.page-msite .entry-body table,
.page-msite .entry-body pre,
.member-editor-area table,
.member-editor-area pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 表格变成块级后，表格自身的 width:100% 仍然生效，
   内容更宽时由上面这条 overflow-x 接手滚动。 */
.page-msite .entry-body table { width: 100%; }

/* ---------- ④ 主内容列必须能被压缩到容器宽度 ----------

   ⚠️ 这一条是上面 ③ 能真正生效的前提，缺了它整页照样横滚。
      主站的 .main-wrap 是 `display:flex; align-items:flex-start`。
      在 ≤980px 的纵向布局下，flex-start 让 .main-col 的**横向**尺寸变成
      「按内容收缩」（fit-content），而 fit-content 的下限是元素的 min-content：
          min(max-content, max(min-content, 可用宽度))
      正文里那张宽表格的 min-content 有 1000px 出头，于是 .main-col 即便在
      320px 视口下也被撑到 655px，表格自己那条 overflow-x:auto 根本没机会触发
      ——滚动条出现在**整页**上，而不是表格上。

      改成 stretch 后，flex 项的横向尺寸直接取容器内宽（320px），
      超出的部分只能由表格自己的滚动条消化，正是我们要的结果。

      会员站页面只有 .main-col 这一个 flex 子项（模板里没有 side-col），
      所以 stretch 不会改变任何现存布局；主站的 .main-wrap 不受影响。 */
.page-msite .main-wrap { align-items: stretch; }

/* 会员中心同理。它在桌面端有 .side-col，而那是个没有底色的空栏，
   stretch 只影响纵向高度、不改变任何可见样式；纵向布局下则保证
   .member-col 取容器内宽，长标题 / 宽内容不会把它顶开。 */
.page-member .main-wrap { align-items: stretch; }

/* ---------- ⑤ 移动端可点目标 ----------

   会员站与会员中心在手机上的主要入口，触控高度补到 44px
   （iOS HIG / Material 的推荐下限）。只作用于 ≤640px，
   桌面端的排版密度一点不变。 */
@media (max-width: 640px) {
  /* 分类筛选胶囊：列表页最主要的操作，原来 38.8px 高 */
  .page-msite .msite-filter a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* 页脚站内地图：footer-col li 的行距本来就接近 44px，
     这里把 <a> 自己撑满整行，点得中比看着紧凑重要 */
  .page-msite .footer-col a {
    display: inline-block;
    padding: 6px 0;
  }

  /* 正文末尾的相关内容列表 */
  .page-msite .msite-related-list a {
    display: inline-block;
    padding: 6px 0;
  }

  /* 「了解更多 ›」这类跨区块跳转链接：实测纯文本只有 15px 高。
     用 min-height + inline-flex 而不是加大 padding——padding 要凑够 44px
     得给到 10.6px 这种别扭的零头，min-height 直接钉住下限，日后改了字号也还成立。
     它是 .msite-block-head 里 align-items:baseline 的 flex 子项，
     inline-flex 的基线取首行文本基线，区块标题与它仍然对得齐。 */
  .page-msite .msite-more-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 会员中心侧栏里的「我的站点地址」外链 */
  .page-member .member-nav-site-url {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 会员中心的侧栏导航与列表操作 */
  .page-member .member-nav-list a { min-height: 44px; display: flex; align-items: center; }
  .page-member .member-list-act { gap: 16px; }
  .page-member .member-list-act a,
  .page-member .member-list-act button { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── AI 整理助手（geo-ai-submit） ── */
.geoai-assist { border-top: 1px dashed var(--line, #e6e6e6); padding-top: 14px; }
.geoai-assist .geoai-out { margin-top: 10px; }
.geoai-block { margin: 8px 0; }
.geoai-block h4 { margin: 0 0 4px; font-size: 13px; color: #555; }
.geoai-block pre {
  margin: 0; padding: 8px 10px; background: #f7f9fb; border: 1px solid #e6e6e6;
  border-radius: 3px; font-size: 12px; line-height: 1.7; white-space: pre-wrap;
  word-break: break-word; max-height: 200px; overflow: auto;
}
.geoai-notes {
  margin: 10px 0; padding: 8px 12px; background: #fdf6e3;
  border-left: 4px solid #e0b74a; color: #6b5518; border-radius: 2px;
}
.geoai-notes h4 { margin: 0 0 4px; font-size: 13px; }
.geoai-notes ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.8; }
.geoai-error { color: #b3261e; }

/* ── 认证中心（geo-verify） ── */
.gv-status {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 6px; font-size: 15px; margin: 0 0 10px;
}
.gv-status-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 13px; color: #fff;
}
.gv-status-on { background: #e6f6ee; color: #0b7a44; }
.gv-status-on .gv-status-icon { background: #16a34a; }
.gv-status-wait { background: #fdf6e3; color: #8a6d1f; }
.gv-status-wait .gv-status-icon { background: #d9a441; }
.gv-status-off { background: #f4f4f4; color: #666; }
.gv-status-off .gv-status-icon { background: #aaa; }
.gv-facts { list-style: none; margin: 6px 0; padding: 0; }
.gv-facts li { line-height: 2; color: #444; font-size: 14px; }
.gv-facts code { background: #f4f6f8; padding: 1px 6px; border-radius: 3px; }
.gv-benefits, .gv-levels { list-style: none; margin: 6px 0; padding: 0; }
.gv-benefits li, .gv-levels li { line-height: 2; color: #444; font-size: 14px; padding-left: 16px; position: relative; }
.gv-benefits li::before { content: "·"; position: absolute; left: 4px; color: #2277cc; font-weight: bold; }
.gv-levels li { padding-left: 0; }
.gv-level-no {
  display: inline-block; min-width: 26px; margin-right: 8px; padding: 0 6px;
  background: #eef3fa; color: #2277cc; border-radius: 3px; font-size: 12px; text-align: center;
}
.gv-req { color: #d33; font-size: 12px; }
.gv-lead { background: #f7fbff; padding: 10px 12px; border-radius: 4px; color: #445; line-height: 1.9; }

/* 会员站页头里的搜索框：复用主站的百度式类名（baidu-result-*），
   仅把宽度收窄以适配「品牌 + 搜索 + 汉堡」一行；窄屏整块隐藏（导航里有入口）。 */
.msite-header .msite-search { flex: 0 1 360px; max-width: 360px; margin-left: auto; margin-right: 14px; }
.msite-header .msite-search .baidu-result-input,
.msite-header .msite-search .baidu-result-btn { height: 36px; }
.msite-header .msite-search .baidu-result-input { border-radius: 18px 0 0 18px; }
.msite-header .msite-search .baidu-result-btn { border-radius: 0 18px 18px 0; padding: 0 18px; }
@media (max-width: 860px) {
  .msite-header .msite-search { display: none; }
}

/* 会员站页头「大家都在搜」：位于搜索框之前，紧凑、单行、超出裁掉。
   数据是站内真实热搜（geo-ai-search），点词跳主站 AI 搜索。 */
.msite-header .msite-hot {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  white-space: nowrap; overflow: hidden; max-width: 340px;
}
.msite-header .msite-hot-label { color: #999; flex: 0 0 auto; }
.msite-header .msite-hot-tag {
  flex: 0 0 auto; color: #4e6ef2; text-decoration: none;
  background: #f2f5ff; padding: 2px 9px; border-radius: 10px;
}
.msite-header .msite-hot-tag:hover { background: #e6ebff; }
@media (max-width: 1180px) { .msite-header .msite-hot { display: none; } }