/* 漫林公共页面导航：首页、知识库、会员方案与帮助页共用。 */
:root {
  /* 公共页面与 App 共用的四级表面：页面、卡片、抬升、内容底。 */
  --ui-page-bg: #101218;
  --ui-surface-raised: #20232d;
  --ui-surface-deep: #0d1016;
  --ui-border: rgba(201,169,96,.16);
  --ui-border-strong: rgba(201,169,96,.28);
  --ui-wash: rgba(201,169,96,.06);
  --ui-nav-bg: rgba(16,18,24,.94);
  --ui-nav-border: rgba(201,169,96,.12);
  --ui-surface: rgba(24,27,36,.92);
  --ui-surface-control: rgba(255,255,255,.045);
  --ui-surface-hover: rgba(201,169,96,.08);
  --ui-surface-selected: rgba(201,169,96,.14);
  --ui-text-primary: #e0d8c8;
  --ui-text-secondary: #9a9080;
  --ui-text-tertiary: #77727d;
  --ui-accent: #c9a960;
  --ui-accent-contrast: #17151a;
  /* 公共页布局令牌：桌面端默认值。与 App 使用相同的语义名称，
     但保留 ui-* 别名兼容已有公共页选择器。 */
  --layout-shell-width: 1120px;
  --layout-shell-gutter: 24px;
  --layout-page-gutter: 24px;
  --layout-purchase-page-gutter: 16px;
  --layout-card-padding: 12px;
  --layout-panel-padding: 12px;
  --layout-page-padding-top: 16px;
  --layout-page-padding-bottom: 48px;
  --layout-section-gap: 40px;
  --layout-section-padding: 40px;
  --layout-content-gap: 16px;
  --layout-control-gap: 8px;
  --layout-nav-gap: 16px;
  --layout-brand-gap: 8px;
  --layout-nav-links-gap: 8px;
  --layout-nav-height: 60px;
  --layout-mobile-nav-height: 56px;
  --layout-control-height: 36px;
  --layout-nav-item-padding-x: 11px;
  --layout-nav-item-padding-y: 7px;
  --layout-nav-item-radius: 12px;
  --layout-account-min-height: 34px;
  --layout-account-padding-x: 12px;
  --layout-account-padding-y: 6px;
  --layout-account-gap: 7px;
  --layout-account-compact-size: 24px;
  --layout-account-compact-padding: 3px;
  --layout-account-icon-size: 20px;
  --layout-account-avatar-size: 38px;
  --layout-account-item-height: 40px;
  --layout-icon-size: 18px;
  --layout-icon-size-sm: 16px;
  --layout-logo-size: 30px;
  --layout-radius: 16px;
  --layout-control-radius: 12px;
  --layout-entry-card-min-height: 150px;
  --layout-feature-card-min-height: 164px;
  --layout-practice-card-min-height: 124px;
  --layout-yijing-card-min-height: 140px;
  --layout-product-card-min-height: 190px;

  --ui-shell-width: var(--layout-shell-width);
  --ui-shell-gutter: var(--layout-shell-gutter);
  --ui-mobile-gutter: var(--layout-page-gutter);
  --ui-nav-height: var(--layout-nav-height);
  --ui-mobile-nav-height: var(--layout-mobile-nav-height);
  --ui-nav-gutter: clamp(8px, 3vw, 24px);
}
/* 公共页有的页面会产生滚动条、有的不会；固定预留槽位，保持导航和正文始终居中一致。 */
html { scrollbar-gutter: stable; }
.public-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--layout-nav-height);
  background: var(--ui-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ui-nav-border);
}
.public-nav.public-nav-fixed { position: fixed; left: 0; right: 0; }
.public-nav-inner {
  /* 与 /app 的桌面 Tab 共用同一条外壳基线；窄桌面也不再额外叠加 24px。 */
  width: min(var(--layout-shell-width), 100%);
  height: calc(var(--layout-nav-height) - 1px);
  min-height: 0;
  padding: 0 var(--layout-shell-gutter);
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--layout-nav-gap);
}
.public-nav-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--layout-brand-gap);
  color: var(--ui-text-secondary);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .8px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
.public-nav-brand:hover { color: var(--ui-text-primary); }
.public-nav-brand.active { color: var(--ui-accent); }
.public-nav-mark {
  width: var(--layout-logo-size);
  height: var(--layout-logo-size);
  display: inline-flex;
  color: var(--ui-accent);
  filter: drop-shadow(0 0 6px rgba(201,169,96,.2));
}
.public-nav-mark img { width: 100%; height: 100%; display: block; }
.public-nav-links {
  display: flex;
  align-items: center;
  gap: var(--layout-nav-links-gap);
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
}
.public-nav-links a {
  flex: 0 0 auto;
  min-height: var(--layout-control-height);
  display: inline-flex;
  align-items: center;
  padding: var(--layout-nav-item-padding-y) var(--layout-nav-item-padding-x);
  border: 1px solid transparent;
  border-radius: var(--layout-nav-item-radius);
  color: var(--ui-text-secondary);
  font-size: inherit;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s;
}
.public-nav-links a:hover { color: var(--ui-text-primary); background: var(--ui-surface-hover); }
.public-nav-links a.active { color: var(--ui-accent); border-color: rgba(201,169,96,.24); background: var(--ui-surface-selected); }
.public-account { position: relative; z-index: 2; margin-left: auto; flex: 0 0 auto; }
.public-account-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--layout-account-gap);
  min-height: var(--layout-account-min-height);
  padding: var(--layout-account-padding-y) var(--layout-account-padding-x);
  border: 1px solid rgba(201,169,96,.34);
  border-radius: 12px;
  background: var(--ui-surface-control);
  color: var(--ui-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: all .2s;
}
.public-account-trigger:hover,
.public-account-trigger[aria-expanded="true"] { color: var(--ui-accent-contrast); border-color: var(--ui-accent); background: var(--ui-accent); box-shadow: 0 4px 18px rgba(201,169,96,.18); }
.public-account-trigger.is-logged-in { border-color: rgba(201,169,96,.64); background: rgba(201,169,96,.14); }
.public-account-icon { width: var(--layout-account-icon-size); height: var(--layout-account-icon-size); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
.public-account-icon svg, .public-account-item-icon svg, .public-account-avatar svg { width: var(--layout-account-icon-size); height: var(--layout-account-icon-size); display: block; }
.public-account-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 272px;
  padding: 10px;
  color: #d0cbc2;
  background: var(--ui-surface);
  border: 1px solid rgba(201,169,96,.2);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.public-account-panel[hidden] { display: none; }
.public-account-user { display: flex; align-items: center; gap: 10px; padding: 10px 8px 12px; margin-bottom: 5px; border-bottom: 1px solid var(--ui-nav-border); }
.public-account-avatar { width: var(--layout-account-avatar-size); height: var(--layout-account-avatar-size); display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--ui-surface-selected); color: var(--ui-accent); font-size: 20px; }
.public-account-user-info { min-width: 0; }
.public-account-user-name { display: block; overflow: hidden; color: var(--ui-text-primary); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.public-account-user-phone { display: block; margin-top: 3px; color: var(--ui-text-tertiary); font-size: 12px; }
.public-account-guest { padding: 10px 8px 12px; color: var(--ui-text-secondary); font-size: 13px; line-height: 1.6; }
.public-account-item { width: 100%; min-height: var(--layout-account-item-height); display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ui-text-secondary); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.public-account-item:hover, .public-account-item:focus-visible { outline: none; background: var(--ui-surface-hover); color: var(--ui-text-primary); }
.public-account-item-icon { width: 18px; text-align: center; }
.public-account-divider { height: 1px; margin: 6px 8px; background: var(--ui-nav-border); }
.public-account-item.danger { color: #e8897c; }

html[data-theme="light"] { --ui-page-bg: #f5f1e9; --ui-surface: #f9f6ef; --ui-surface-raised: #fcf9f3; --ui-surface-deep: #efe9de; --ui-border: rgba(119,88,45,.18); --ui-border-strong: rgba(119,88,45,.3); --ui-wash: rgba(154,116,65,.08); --ui-nav-bg: rgba(245,241,233,.94); --ui-nav-border: rgba(119,88,45,.18); --ui-surface-control: rgba(154,116,65,.07); --ui-surface-hover: rgba(154,116,65,.09); --ui-surface-selected: rgba(154,116,65,.14); --ui-text-primary: #4b463e; --ui-text-secondary: #766f65; --ui-text-tertiary: #766f65; --ui-accent: #9a7441; --ui-accent-contrast: #fff; }
html[data-theme="light"] .public-nav { background: var(--ui-nav-bg); border-bottom-color: var(--ui-nav-border); }
html[data-theme="light"] .public-nav-brand { color: #716b62; }
html[data-theme="light"] .public-nav-brand.active { color: #9a7441; }
html[data-theme="light"] .public-nav-mark { color: #9a7441; }
html[data-theme="light"] .public-nav-links a { color: #716b62; }
html[data-theme="light"] .public-nav-links a:hover { color: #4b463e; }
html[data-theme="light"] .public-nav-links a.active { color: var(--ui-accent); border-color: rgba(154,116,65,.28); background: var(--ui-surface-selected); }
html[data-theme="light"] .public-account-trigger { border-color: rgba(119,88,45,.28); background: rgba(154,116,65,.07); color: #896638; }
html[data-theme="light"] .public-account-trigger:hover, html[data-theme="light"] .public-account-trigger[aria-expanded="true"] { color: #fff; background: #9a7441; border-color: #9a7441; }
html[data-theme="light"] .public-account-panel { color: #4b463e; background: var(--ui-surface); border-color: rgba(119,88,45,.18); box-shadow: 0 18px 50px rgba(80,60,30,.18); }
html[data-theme="light"] .public-account-user { border-bottom-color: rgba(119,88,45,.14); }
html[data-theme="light"] .public-account-user-name { color: #514b42; }
html[data-theme="light"] .public-account-user-phone, html[data-theme="light"] .public-account-guest { color: #766f65; }
html[data-theme="light"] .public-account-item { color: #766f65; }
html[data-theme="light"] .public-account-item:hover, html[data-theme="light"] .public-account-item:focus-visible { color: #514b42; background: rgba(154,116,65,.09); }

/* 公共页正文与导航共用同一条桌面内容线。页面内部仍可使用自己的阅读列，
   但外层起点不能再由各页面的旧 width/min-width 规则分别决定。 */
.public-nav ~ main .container,
.public-nav ~ section .container,
.public-nav ~ footer .container {
  width: min(var(--layout-shell-width), 100%);
  max-width: var(--layout-shell-width);
  padding-left: var(--layout-shell-gutter);
  padding-right: var(--layout-shell-gutter);
  box-sizing: border-box;
}

@media (max-width: 600px) {
  :root {
    --layout-page-gutter: 12px;
    --layout-section-padding: 32px;
    --layout-content-gap: 8px;
    --layout-control-gap: 6px;
    --layout-nav-gap: 6px;
    --layout-brand-gap: 6px;
    --layout-nav-links-gap: 3px;
    --layout-entry-card-min-height: 0;
    --layout-feature-card-min-height: 0;
    --layout-practice-card-min-height: 0;
    --layout-yijing-card-min-height: 0;
    --layout-product-card-min-height: 0;
  }
  .public-nav { height: var(--layout-mobile-nav-height); }
  .public-nav-inner { width: calc(100% - (var(--layout-page-gutter) * 2)); height: calc(var(--layout-mobile-nav-height) - 1px); min-height: 0; padding-left: 0; padding-right: 0; gap: var(--layout-nav-gap); }
  .public-nav-brand { gap: var(--layout-brand-gap); font-size: 18px; letter-spacing: .5px; }
  :root {
    --layout-control-height: 34px;
    --layout-nav-item-padding-x: 8px;
    --layout-nav-item-padding-y: 6px;
    --layout-nav-item-radius: 10px;
    --layout-account-min-height: 26px;
    --layout-account-icon-size: 16px;
    --layout-icon-size: 16px;
    --layout-icon-size-sm: 15px;
    --layout-logo-size: 24px;
  }
  .public-nav-mark { width: var(--layout-logo-size); height: var(--layout-logo-size); }
  .public-nav-links { gap: var(--layout-nav-links-gap); font-size: 14px; }
  .public-nav-links a { min-height: var(--layout-control-height); padding: var(--layout-nav-item-padding-y) var(--layout-nav-item-padding-x); border-radius: var(--layout-nav-item-radius); }
  .public-account-trigger { width: var(--layout-account-min-height); height: var(--layout-account-min-height); min-height: var(--layout-account-min-height); padding: var(--layout-account-compact-padding); border-radius: 50%; gap: 0; }
  .public-account-label { display: none; }
  .public-account-icon, .public-account-icon svg { width: var(--layout-account-icon-size); height: var(--layout-account-icon-size); font-size: 12px; }

  .public-nav ~ main .container,
  .public-nav ~ section .container,
  .public-nav ~ footer .container {
    width: calc(100% - (var(--layout-page-gutter) * 2));
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 380px) {
  :root { --layout-nav-links-gap: 8px; }
  .public-nav-inner { width: calc(100% - (var(--layout-page-gutter) * 2)); gap: var(--layout-nav-gap); }
  .public-nav-brand { font-size: 18px; }
  .public-nav-mark { width: var(--layout-logo-size); height: var(--layout-logo-size); }
  .public-nav-links { gap: var(--layout-nav-links-gap); font-size: 14px; }
  .public-account-trigger { width: var(--layout-account-compact-size); height: var(--layout-account-compact-size); min-height: var(--layout-account-compact-size); }
  .public-account-icon, .public-account-icon svg { width: var(--layout-icon-size-sm); height: var(--layout-icon-size-sm); }
}

/* 页面级视觉统一：各公共页仍可保留自己的结构和强调色，
   但页面底、卡片面和边界不再各写一套近似白/黑。 */
body { background: var(--ui-page-bg) !important; }
.hero,
.entry-section,
.content-section,
.pricing-section,
.service-notes,
.philosophy,
.how-section,
.section.alt,
.knowledge-content,
footer { background: var(--ui-page-bg) !important; }
.hero-preview,
.entry-card,
.about-card,
.how-step,
.feature-panel,
.content-block,
.practice-card,
.price-card,
.service-note,
.faq-card,
.feedback,
.product-card,
.value-card,
.membership-period-selector,
.membership-period-panel,
.related-articles,
.faq-preview,
.preview-wrap,
.k-aside,
.k-section {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}
.price-card-featured,
.product-card.featured,
.policy-summary,
.note {
  background: var(--ui-surface-selected) !important;
  border-color: var(--ui-border-strong) !important;
}

/* Credit 商品不区分首张卡片；Featured 仅用于会员方案的主推档位。 */
body.public-services #creditProducts .product-card.featured {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}

/* 首页下载区的版本说明是辅助文字，不应被通用 note 卡片规则包成色块。 */
body.public-home .cta .note {
  padding: 0;
  border: 0;
  background: transparent !important;
  color: var(--ui-text-tertiary) !important;
}

/* 首页首屏与其他公共页面共用同一张“页面底”层。
   首页原有的网格、光球和 Hero 渐变会让首屏像另一套主题，
   因此只保留内容卡片本身的层次，不额外改变页面底色。 */
body.public-home .bg-grid,
body.public-home .glow-orb,
body.public-home #particle-canvas,
body.public-home .hero::before,
body.public-home .hero-orb {
  display: none !important;
}
body.public-home .hero {
  background: var(--ui-page-bg) !important;
}
.free-search,
.featured-article,
.yijing-card,
.k-item,
.feedback-form input,
.feedback-form textarea {
  background: var(--ui-surface-deep) !important;
  border-color: var(--ui-border) !important;
}
.entry-card:hover,
.about-card:hover,
.feature-panel:hover,
.price-card:hover,
.product-card:hover,
.faq-card:hover { border-color: var(--ui-border-strong) !important; }

/* 公共页 Hero 统一为同一张页面底；不同页面仍保留各自的信息结构。 */
body.public-home .hero,
body.public-knowledge .knowledge-hero,
body.public-services .hero {
  background: var(--ui-page-bg) !important;
  border-bottom: 0;
}

/* 知识库 Hero 卡片保持稳定的阅读基线，不使用装饰性旋转。 */
body.public-knowledge .hero-card { transform: none !important; }

/* 知识库 Hero 与“按主题浏览”直接衔接，避免公共页默认留白覆盖页面布局。 */
body.public-knowledge .knowledge-content { padding-top: 0; }
body.public-knowledge .knowledge-content { border-top: 0; }
body.public-knowledge .content-heading { margin-bottom: 12px; }

/* 知识库桌面端将主题栏与当前内容拆成两个稳定面板，避免右侧内容高度撑动左侧导航。 */
body.public-knowledge .knowledge-layout .k-aside {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--layout-radius);
}
body.public-knowledge .knowledge-layout .k-section {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
}
body.public-knowledge .knowledge-layout .k-main {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--layout-radius);
  overflow: hidden;
}
html[data-theme="light"] body.public-knowledge .knowledge-layout {
  background: transparent;
  border-color: transparent;
}
@media (max-width: 900px) {
  body.public-knowledge .knowledge-layout {
    border: 1px solid var(--ui-border);
    border-radius: var(--layout-radius);
    overflow: hidden;
    background: var(--ui-surface) !important;
  }
  body.public-knowledge .knowledge-layout .k-aside {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
    border-radius: 0;
  }
  body.public-knowledge .knowledge-layout .k-main {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
  }
}

/* 首页五个主要内容节点采用连续阅读节奏，减少区块之间的断层。 */
body.public-home .hero { min-height: min(600px, 88svh); padding-bottom: 36px; }
body.public-home .entry-section { padding-top: var(--layout-content-gap); padding-bottom: var(--layout-section-padding); }
body.public-home .section.alt,
body.public-home .how-section { padding-top: var(--layout-section-padding); padding-bottom: var(--layout-section-padding); }
body.public-home .content-section .wrap { padding-top: var(--layout-section-padding); padding-bottom: var(--layout-section-padding); }

@media (max-width: 600px) {
  body.public-home .hero { min-height: auto; padding-top: 28px; padding-bottom: 36px; }
  body.public-home .entry-section { padding-top: var(--layout-content-gap); padding-bottom: var(--layout-section-padding); }
  body.public-home .section.alt,
  body.public-home .how-section { padding-top: var(--layout-section-padding); padding-bottom: var(--layout-section-padding); }
  body.public-home .content-section .wrap { padding: var(--layout-section-padding) 0; }

  body.public-knowledge .knowledge-content { padding-top: 0; }
  body.public-knowledge .content-heading { margin-bottom: 12px; }
}

/* 公共页内容密度基线：页面留白与卡片留白分开控制。
   内容卡片统一到 12px；按钮、Tab 不受此规则影响。 */
body.public-home .hero-preview { padding: var(--layout-panel-padding); }
body.public-home .entry-card,
body.public-home .about-card,
body.public-home .how-step,
body.public-home .content-block,
body.public-home .feature-panel,
body.public-home .featured-article,
body.public-home .practice-card,
body.public-home .yijing-card,
body.public-home .price-card,
body.public-home .service-note,
body.public-home .policy-summary,
body.public-home .service-contact-bar,
body.public-home .faq-card,
body.public-home .feedback,
body.public-home .content-more,
body.public-home .preview-card,
body.public-home .reader-inner .timer-section,
body.public-home .reader-inner .practice-box,
body.public-home .article-reader .practice-box {
  padding: var(--layout-card-padding);
}
/* 入口卡片内容已压缩为三层，不再用固定最小高度制造多余底部留白。 */
body.public-home .entry-card { min-height: 0; }
body.public-home .featured-article { min-height: var(--layout-feature-card-min-height); }
body.public-home .featured-practice-grid .practice-card { min-height: var(--layout-practice-card-min-height); }
body.public-home .yijing-card { min-height: var(--layout-yijing-card-min-height); }
body.public-home .locked-block { padding: var(--layout-card-padding); }

/* 公共会员方案：方案卡、Credit 卡、服务说明卡使用同一内容边界。 */
body.public-services .membership-period-selector,
body.public-services .membership-period-panel,
body.public-services .product-card,
body.public-services .value-card,
body.public-services .note,
body.public-services .empty {
  padding: var(--layout-card-padding);
}
body.public-services .product-card { min-height: var(--layout-product-card-min-height); }

/* 会员周期是方案内容的父级导航；把周期选择和当前周期的方案收进同一层，
   避免两个相邻边框看起来像互不相关的模块。 */
body.public-services .membership-pricing {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--layout-radius);
  background: var(--ui-surface) !important;
}
body.public-services .membership-pricing .membership-period-selector {
  padding: var(--layout-card-padding) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0;
  background: var(--ui-surface-deep) !important;
}
body.public-services .membership-pricing .membership-period-panels {
  margin-top: 0;
  padding: var(--layout-card-padding);
  background: var(--ui-surface) !important;
}

/* 桌面端会员卡也采用统一的决策顺序：标题与价格同排，权益紧跟说明，
   不让 flex 的 auto margin 把权益推到卡片底部形成视觉空行。 */
@media (min-width: 641px) {
  body.public-services .product-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    align-items: start;
    column-gap: var(--layout-control-gap);
    row-gap: 6px;
    min-height: 0;
  }
  body.public-services .product-card .product-type { display: none; }
  body.public-services .product-card h3 {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }
  body.public-services .product-card .price {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
  body.public-services .product-card p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    line-height: 1.55;
  }
  body.public-services .product-card .product-meta {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 0;
    margin-top: 0;
    padding-top: 0;
    line-height: 1.5;
  }
  body.public-services .product-card .renewal-price,
  body.public-services .product-card .renewal-note {
    grid-column: 1 / -1;
  }
  body.public-services .product-card .buy {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 4px;
  }
}

/* 购买页是高频决策页，手机端页面外边界提升到 16px，避免文字贴屏；
   顶部公共导航仍保持全站既定的 12px 对齐线。 */
@media (max-width: 640px) {
  body.public-services main .container,
  body.public-services footer .container {
    width: calc(100% - (var(--layout-purchase-page-gutter) * 2));
  }
}

/* 会员方案卡片：手机端把价格与标题放在同一行，说明占满整行，减少窄列换行。 */
@media (max-width: 640px) {
  body.public-services .product-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto auto;
    align-items: start;
    column-gap: var(--layout-control-gap);
    row-gap: 4px;
    min-height: 0;
    padding: var(--layout-card-padding);
  }
  body.public-services .product-card .product-type {
    display: none;
  }
  body.public-services .product-card h3 {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }
  body.public-services .product-card p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 4px;
    line-height: 1.55;
  }
  body.public-services .product-meta {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    margin-top: 0;
    padding-top: 6px;
    min-width: 0;
    line-height: 1.5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body.public-services .product-meta-item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  body.public-services .product-meta-item:not(:first-child)::before {
    content: '·';
    margin-right: 8px;
    color: var(--ui-text-tertiary);
  }
  body.public-services .product-card.pro .product-meta {
    flex-wrap: wrap;
    max-height: 3.2em;
    white-space: normal;
    overflow: hidden;
  }
  body.public-services .product-card .price {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
  body.public-services .product-card .renewal-price {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  body.public-services .product-card .renewal-note {
    grid-column: 1 / -1;
    grid-row: 5;
  }
  body.public-services .product-card .buy {
    grid-column: 1 / -1;
    grid-row: 6;
  }
  body.public-services .product-card .buy {
    margin-top: 4px;
  }

  /* Credit 卡不使用会员卡的桌面两列定位，手机端明确按内容顺序排布，
     避免选择区域继承 grid-column: 2 后被挤到卡片右侧。 */
  body.public-services #creditProducts .credit-purchase-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas: "title" "description" "choice" "buy" "status";
    gap: 0;
    align-items: start;
  }
  body.public-services #creditProducts .credit-purchase-card h3 {
    grid-area: title;
    grid-column: auto;
    grid-row: auto;
  }
  body.public-services #creditProducts .credit-purchase-card > p {
    grid-area: description;
    grid-column: auto;
    grid-row: auto;
  }
  body.public-services #creditProducts .credit-purchase-card .credit-choice {
    grid-area: choice;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    margin-top: 14px;
  }
  body.public-services #creditProducts .credit-purchase-card .credit-buy {
    grid-area: buy;
    grid-column: auto;
    grid-row: auto;
  }
  body.public-services #creditProducts .credit-purchase-card .credit-status {
    grid-area: status;
    grid-column: auto;
    grid-row: auto;
  }
}

/* 服务说明：图标与标题组成同一行，正文从下一行开始。 */
body.public-services .value-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--layout-control-gap);
  row-gap: 4px;
}
body.public-services .value-card .icon {
  grid-column: 1;
  grid-row: 1;
  line-height: 1;
}
body.public-services .value-card h3 {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}
body.public-services .value-card p {
  grid-column: 1 / -1;
  margin-top: 0;
}