/* ==========================================================================
   前台主体框架样式（public/static/site/css/style.css）
   站点：域名 · 主机服务 —— 用户访问侧
   组织：变量 → 基础 → 按钮 → 顶条/导航 → Hero → 区块通用 → 首页各区块
        → 内页布局 → 页脚 → 响应式
   命名：s- 前缀（site），避免与后台 admin/*.css 冲突
   ========================================================================== */

:root {
  /* ===== 主色品牌（配色方案核心，改这几位即换全站主色） ===== */
  --s-primary: #2f6bff;          /* 主色 */
  --s-primary-d: #1c4fe0;        /* 主色按下/深一档 */
  --s-primary-l: #22b8ff;        /* 主色渐变浅端（Hero 光晕/横幅末端） */
  --s-primary-dd: #2a5ac8;       /* 主色沉一档（参数行 ✓ 文字） */
  --s-primary-soft: #eaf1ff;     /* 主色浅底（标签/选中/hover/按钮浅底） */
  /* ===== 深色 / 暗区（顶条·服务保障·页脚·横幅基色） ===== */
  --s-dark: #0f172a;             /* 深色文字 / 暗区基色 */
  --s-dark-a: #14264a;           /* 暗区渐变深端 */
  --s-dark-b: #1e4691;           /* 暗区渐变浅端 */
  --s-on-dark: #fff;             /* 暗区上的文字（白） */
  --s-on-dark-muted: #bfd2ee;    /* 暗区上的弱化文字 */
  --s-on-dark-soft: #e3f0ff;     /* 暗区上的更浅文字（横幅说明） */
  --s-footer-text: #9fb0c8;      /* 页脚链接/正文 */
  --s-footer-muted: #7d8ea6;     /* 页脚版权弱化 */
  /* ===== 文字 ===== */
  --s-text: #1b2632;             /* 正文主色（加深） */
  --s-text-2: #42526b;           /* 次级正文（内页/表头，加深） */
  --s-muted: #5b6a80;            /* 弱化文字（加深） */
  --s-faint: #8e9bb0;            /* 最浅灰（划线价/无功能行/子标签，加深） */
  --s-placeholder: #8492a9;      /* 输入框占位（加深） */
  --s-spec: #2b2b2b;             /* 参数行深字 */
  /* ===== 背景 / 表面 ===== */
  --s-bg: #eaeff6;               /* 页面底色（加深一档） */
  --s-surface: #eaf1fa;          /* 浅表面（卡片内嵌/区块浅底/表头/引用块，加深） */
  --s-white: #fff;               /* 白（卡片/弹层） */
  /* ===== 边框 / 分隔 ===== */
  --s-line: #e6ebf2;             /* 常规边框/分隔 */
  --s-line-strong: #c9dbff;      /* 强调边框（hover/选中/TAB 激活边） */
  --s-border: #e5eaf2;           /* 组件通用边框（模板内嵌样式统一引用） */
  /* ===== 状态色 ===== */
  --s-success: #22c55e;          /* 状态点绿 */
  --s-success-text: #2f9e44;     /* 勾选/“有”文字 */
  --s-disabled: #c2cad6;         /* “无”灰 */
  --s-badge: #e11d48;            /* 角标红 */
  --s-accent: #ffd166;           /* 顶条高亮（公告/电话）金 */
  /* ===== 布局（非颜色，保留可调） ===== */
  --s-radius: 14px;
  --s-shadow: 0 10px 32px rgba(18,28,45,.18);
  --s-wrap: 1200px;
}

* { box-sizing: border-box; }

body {box-shadow: 0 0 0 1px var(--s-line), 0 6px 20px 2px rgba(0,0,0,.18);
    margin: 5px auto; padding: 0px 2px;
    max-width: 1220px;
  font: 14px/1.7 "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--s-text);
  background: var(--s-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--s-primary); }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--s-dark); line-height: 1.4; }
p { margin: 0; }

.s-wrap {
  width: 100%;
  max-width: var(--s-wrap);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- 按钮 ---------- */
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--s-primary-soft);
  color: var(--s-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.s-btn:hover { background: var(--s-surface); }
.s-btn-primary { background: var(--s-primary); color: var(--s-white); }
.s-btn-primary:hover { background: var(--s-primary-d); color: var(--s-white); }
.s-btn-ghost { background: transparent; border-color: rgba(255,255,255,.50); color: var(--s-white); }
.s-btn-ghost:hover { background: rgba(255,255,255,.14); color: var(--s-white); }
.s-btn-lg { height: 48px; padding: 0 28px; font-size: 15px; }
.s-btn-block { width: 100%; }

/* ---------- 顶部条 ---------- */
.s-topbar {
  background: var(--s-dark-a);
  color: var(--s-on-dark-muted);
  font-size: 12px;
}
.s-topbar .s-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
}
.s-topbar-notice { display: flex; align-items: center; gap: 8px; }
.s-topbar-notice b { color: var(--s-accent); font-weight: 600; }
.s-topbar-links { display: flex; align-items: center; gap: 16px; }
.s-topbar-links a { color: var(--s-on-dark-muted); }
.s-topbar-links a:hover { color: var(--s-white); }
.s-topbar-phone { color: var(--s-accent); font-weight: 600; }

/* ---------- 头部 + 主导航 ---------- */
.s-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--s-line);
}
.s-header.on { box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.s-header .s-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 66px;
}
.s-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 800;
  color: var(--s-dark);
  letter-spacing: .5px;
}
.s-logo:hover { color: var(--s-dark); }
.s-logo i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--s-primary), var(--s-primary-l));
  color: var(--s-white);
  font-size: 17px;
  font-style: normal;
}
.s-logo span { color: var(--s-primary); }

.s-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.s-nav > li { position: relative; }
.s-nav > li > a {
  display: block;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--s-text);
}
.s-nav > li > a:hover { background: var(--s-bg); color: var(--s-primary); }
.s-nav > li.on > a { color: var(--s-primary); font-weight: 600; }
.s-nav-sub {
  position: absolute;
  top: 100%;
  left: 8px;
  min-width: 168px;
  padding: 8px;
  border: 1px solid var(--s-line);
  border-radius: 12px;
  background: var(--s-white);
  box-shadow: var(--s-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .18s ease;
}
.s-nav > li:hover .s-nav-sub { opacity: 1; visibility: visible; transform: none; }
.s-nav-sub a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--s-muted); }
.s-nav-sub a:hover { background: var(--s-bg); color: var(--s-primary); }
/* 当前页高亮：字段标签输出的是 <a class="on">，这里的 li.on 是旧硬编码导航的写法，两种都兼容 */
.s-nav > li > a.on { color: var(--s-primary); font-weight: 600; background: var(--s-bg); }
.s-nav-sub a.on { color: var(--s-primary); font-weight: 600; }
.s-nav-sub > li > span { display: block; padding: 8px 12px; color: var(--s-faint); font-size: 13px; }


.s-header-act { display: flex; align-items: center; gap: 10px; }
.s-burger {
  display: none;
  width: 40px;
  height: 34px;
  border: 1px solid var(--s-line);
  border-radius: 8px;
  background: var(--s-white);
  cursor: pointer;
  font-size: 16px;
}

/* ---------- Hero（浅色版：左文案 + 右服务状态卡） ---------- */
.s-hero {
  position: relative;
  padding: 64px 0 76px;
  background:
    radial-gradient(680px 300px at 92% -8%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(520px 260px at -4% 104%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, var(--s-white) 0%, var(--s-surface) 100%);
  color: var(--s-text);
  overflow: hidden;
}
.s-hero .s-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 52px;
  align-items: center;
}
.s-hero-txt { max-width: 620px; }
.s-hero h1 {
  color: var(--s-dark);
  font-size: 40px;
  line-height: 1.28;
  letter-spacing: .5px;
}
.s-hero h1 em { font-style: normal; color: var(--s-primary); }
.s-hero-desc { margin: 18px 0 26px; color: var(--s-muted); font-size: 16px; }
.s-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* 域名查询框：白底卡片（带边框与投影） */
.s-domain {
  display: flex;
  gap: 0;
  max-width: 520px;
  margin-top: 30px;
  padding: 6px;
  border: 1px solid var(--s-line);
  border-radius: 12px;
  background: var(--s-white);
  box-shadow: var(--s-shadow);
}
.s-domain input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--s-text);
  font-size: 15px;
  outline: none;
}
.s-domain input::placeholder { color: var(--s-placeholder); }
.s-domain select {
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--s-text);
  outline: none;
}

/* Hero 下方的产品快捷入口（浅色胶囊） */
.s-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.s-hero-chips a {
  padding: 7px 16px;
  border: 1px solid var(--s-line);
  border-radius: 99px;
  background: var(--s-white);
  color: var(--s-muted);
  font-size: 13px;
  transition: all .18s ease;
}
.s-hero-chips a:hover {
  border-color: var(--s-primary);
  background: var(--s-white);
  color: var(--s-primary);
}

/* 右侧「服务状态」视觉卡 */
.s-hero-visual { position: relative; }
.s-hv-card {
  padding: 26px;
  border: 1px solid var(--s-line);
  border-radius: 18px;
  background: var(--s-white);
  box-shadow: 0 20px 50px rgba(0,0,0,.16);
}
.s-hv-head { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--s-dark); }
.s-hv-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--s-success);
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
}
.s-hv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.s-hv-item { padding: 14px 16px; border-radius: 12px; background: var(--s-surface); }
.s-hv-item b { display: block; font-size: 22px; color: var(--s-dark); }
.s-hv-item span { color: var(--s-muted); font-size: 12px; }
/* 卡片右下角悬浮徽标 */
.s-hv-float {
  position: absolute;
  right: -8px; bottom: -26px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--s-dark-a);
  color: var(--s-white);
  font-size: 13px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.s-hv-float i { font-style: normal; font-size: 16px; }

/* ---------- 区块通用 ---------- */
.s-sec { padding: 20px 0; }
.s-sec-alt { background: var(--s-white); }
.s-sec-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.s-sec-head h2 { font-size: 30px; }
.s-sec-head p { margin-top: 12px; color: var(--s-muted); font-size: 15px; }
.s-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--s-primary-soft);
  color: var(--s-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
}

/* ---------- 产品卡 ---------- */
.s-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.s-card {
  position: relative;
  padding: 26px 22px 24px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background: var(--s-white);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.s-card:hover { transform: translateY(-4px); border-color: var(--s-line-strong); box-shadow: var(--s-shadow); }
.s-card i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--s-primary-soft), var(--s-surface));
  font-size: 22px;
  font-style: normal;
}
.s-card h3 { font-size: 17px; }
.s-card p { margin: 10px 0 16px; color: var(--s-muted); min-height: 44px; }
.s-card ul { margin-bottom: 18px; }
.s-card ul li { position: relative; padding-left: 16px; color: var(--s-muted); font-size: 13px; }
.s-card ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--s-primary);
}
.s-card-price { margin-bottom: 16px; color: var(--s-primary); }
.s-card-price b { font-size: 24px; }
.s-card-price s { margin-left: 6px; color: var(--s-faint); font-size: 13px; }
/* 产品矩阵卡片：flex 纵向布局，让「了解详情」贴底对齐 */
.s-card.s-prod { display: flex; flex-direction: column; }
.s-prod-more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: auto;
  color: var(--s-primary); font-weight: 600; font-size: 14px; transition: gap .18s ease;
}
.s-prod-more:hover { gap: 9px; color: var(--s-primary-d); }

/* ---------- 优势 ---------- */
.s-feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.s-feat-item { padding: 24px; text-align: center; }
.s-feat-item b { display: block; font-size: 26px; color: var(--s-primary); }
.s-feat-item h4 { margin: 8px 0 6px; font-size: 15px; }
.s-feat-item p { color: var(--s-muted); font-size: 13px; }

/* ---------- 价格套餐 ---------- */
.s-price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.s-price-item {
  padding: 28px 24px;
  border: 1px solid var(--s-line);
  border-radius: 18px;
  background: var(--s-white);
}
.s-price-item.hot {
  position: relative;
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
  background: linear-gradient(180deg, var(--s-white), var(--s-surface));
}
.s-price-item.hot::before {
  content: "推荐";
  position: absolute;
  top: -12px; left: 24px;
  padding: 3px 12px;
  border-radius: 99px;
  background: var(--s-primary);
  color: var(--s-white);
  font-size: 12px;
}
.s-price-name { font-size: 16px; }
.s-price-num { margin: 14px 0 4px; color: var(--s-primary); }
.s-price-num b { font-size: 34px; }
.s-price-num span { color: var(--s-muted); font-size: 13px; }
.s-price-old { margin-bottom: 18px; color: var(--s-faint); font-size: 13px; }
.s-price-list { margin-bottom: 22px; }
.s-price-list li {
  position: relative;
  padding: 7px 0 7px 22px;
  border-bottom: 1px dashed var(--s-line);
  color: var(--s-muted);
  font-size: 13px;
}
.s-price-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--s-primary);
}

/* ---------- 服务保障 ---------- */
/* 默认（浅色背景，如 vhost 内页）：深色文字 + 浅表面卡片，保证对比度 */
.s-guard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.s-guard-item {
  padding: 22px;
  border-radius: var(--s-radius);
  background: var(--s-surface);
  border: 1px solid var(--s-line);
}
.s-guard-item b { display: block; margin-bottom: 6px; color: var(--s-dark); font-size: 15px; }
.s-guard-item p { color: var(--s-muted); font-size: 13px; }
/* 深色渐变区（首页 s-sec-guard）覆盖：玻璃卡片 + 亮字 */
.s-sec-guard .s-guard-item { background: rgba(255,255,255,.12); border-color: transparent; }
.s-sec-guard .s-guard-item b { color: var(--s-white); }
.s-sec-guard .s-guard-item p { color: var(--s-on-dark-muted); }
.s-sec-guard {
  background: linear-gradient(120deg, var(--s-dark-a), var(--s-dark-b));
  color: var(--s-white);
}
.s-sec-guard .s-sec-head h2 { color: var(--s-white); }
.s-sec-guard .s-sec-head p { color: var(--s-on-dark-muted); }

/* ---------- FAQ ---------- */
.s-faq { max-width: 860px; margin: 0 auto; }
.s-faq details {
  margin-bottom: 12px;
  border: 1px solid var(--s-line);
  border-radius: 12px;
  background: var(--s-white);
}
.s-faq summary {
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  color: var(--s-dark);
  list-style: none;
}
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: "+"; float: right; color: var(--s-primary); font-weight: 700; }
.s-faq details[open] summary::after { content: "−"; }
.s-faq details p { padding: 0 20px 18px; color: var(--s-muted); }

/* ---------- 页脚 ---------- */
.s-footer {
  padding: 54px 0 24px;
  background: linear-gradient(120deg, var(--s-dark-a), var(--s-dark-b));
  color: var(--s-footer-text);
  font-size: 13px;
}
.s-footer-cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 30px; }
.s-footer h4 { margin-bottom: 16px; color: var(--s-white); font-size: 14px; }
.s-footer li { margin-bottom: 9px; }
.s-footer a { color: var(--s-footer-text); }
.s-footer a:hover { color: var(--s-white); }
.s-footer-brand p { margin: 14px 0 18px; line-height: 1.9; }
.s-footer-copy {
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.10);
  text-align: center;
  color: var(--s-footer-muted);
}
.s-footer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s-footer-chips span {
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
}

/* ---------- 内页布局 ---------- */
.s-crumb { padding: 16px 0; color: var(--s-muted); font-size: 13px; }
.s-crumb a { color: var(--s-muted); }
.s-page-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; padding-bottom: 5px; }
.s-side {
  align-self: start;
  padding: 14px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background: var(--s-white);
}
.s-side h4 { padding: 8px 12px; font-size: 14px; }
.s-side a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--s-muted); }
.s-side a:hover { background: var(--s-bg); color: var(--s-primary); }
.s-side a.on { background: var(--s-primary-soft); color: var(--s-primary); font-weight: 600; }
/* 侧栏里由字段标签 <-表名[...]-> 输出的链接：每条外面是 <li class="bq_li_class_a">。
   全局只重置了 ul/ol，散装的 li 仍会带小圆点，这里统一去掉并把内外边距归零，
   让标签输出的链接与上面硬编码导航看起来完全一致（a 的样式由 .s-side a 统一负责）。 */
.s-side .bq_li_class_a { margin: 0; padding: 0; list-style: none; }
/* 当前页高亮：标签会把"与当前访问地址相同"的那条 <a> 自动加上 class="on"（忽略 .html 后缀与大小写），
   并在外层 <li> 上同时挂 on（用户要求的写法）；end 是预留样式钩子（默认无样式，可后续补特定样式）。
   下面两条选择器都覆盖，保证 li.on / a.on 任一写法都能高亮。 */
.s-side .bq_li_class_a a.on,
.s-side .bq_li_class_a.on > a { background: var(--s-primary-soft); color: var(--s-primary); font-weight: 600; }
.s-main-card {
  min-height: 360px;
  padding: 30px 32px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background: var(--s-white);
}
.s-main-card h1 { font-size: 26px; }
.s-main-card h2 { margin: 30px 0 12px; font-size: 18px; }
.s-main-card p { margin-bottom: 12px; color: var(--s-text-2); }
.s-main-card ul { margin-bottom: 14px; }
.s-main-card li {
  position: relative;
  padding: 6px 0 6px 18px;
  color: var(--s-text-2);
}
.s-main-card li::before {
  content: "";
  position: absolute;
  left: 2px; top: 15px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--s-primary);
}
.s-ph {
  display: grid;
  place-items: center;
  min-height: 120px;
  margin: 20px 0;
  border: 1px dashed var(--s-line);
  border-radius: 12px;
  background: var(--s-surface);
  color: var(--s-muted);
  text-align: center;
  padding: 24px;
}

/* ---------- 单页正文（vh_article_page 渲染的富文本） ---------- */
.s-rich { line-height: 1.9; color: var(--s-text); word-break: break-word; }
.s-rich p { margin: 0 0 14px; }
.s-rich h2, .s-rich h3 { margin: 26px 0 12px; line-height: 1.4; }
.s-rich img { max-width: 100%; height: auto; border-radius: 8px; }
.s-rich ul, .s-rich ol { margin: 0 0 14px; padding-left: 22px; }
.s-rich table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.s-rich table td, .s-rich table th { border: 1px solid var(--s-line); padding: 8px 10px; }
.s-rich blockquote {
  margin: 14px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--s-primary);
  background: var(--s-surface);
  color: var(--s-muted);
}

/* ---------- 回到顶部 ---------- */
.s-top {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--s-line);
  border-radius: 12px;
  background: var(--s-white);
  box-shadow: var(--s-shadow);
  color: var(--s-primary);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease;
}
.s-top.on { opacity: 1; visibility: visible; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .s-cards, .s-guard { grid-template-columns: repeat(2, 1fr); }
  .s-feat { grid-template-columns: repeat(2, 1fr); }
  .s-footer-cols { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 992px) {
  .s-burger { display: block; }
  .s-nav {
    position: absolute;
    top: 66px; left: 0; right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 16px 16px;
    border-bottom: 1px solid var(--s-line);
    background: var(--s-white);
    box-shadow: var(--s-shadow);
  }
  .s-nav.open { display: flex; }
  .s-nav > li > a { padding: 12px 8px; border-bottom: 1px dashed var(--s-line); border-radius: 0; }
  .s-nav-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 6px 16px;
  }
  .s-header-act .s-btn-text { display: none; }
  .s-hero { padding: 48px 0 60px; }
  .s-hero .s-wrap { grid-template-columns: 1fr; gap: 44px; }
  .s-hero-visual { max-width: 520px; }
  .s-hv-float { right: 8px; bottom: -20px; }
  .s-hero h1 { font-size: 28px; }
  .s-hero-desc { font-size: 15px; }
  .s-page-wrap { grid-template-columns: 1fr; }
  .s-sec { padding: 48px 0; }
  .s-price { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .s-topbar-notice { display: none; }
  .s-topbar .s-wrap { justify-content: flex-end; }
  .s-header-act .s-btn:not(.s-btn-primary) { display: none; } /* 窄屏收起 会员中心/业务中心，顶条仍有入口 */
  .s-cards, .s-feat, .s-guard { grid-template-columns: 1fr; }
  .s-footer-cols { grid-template-columns: 1fr 1fr; }
  .s-hv-grid { gap: 10px; }
  .s-hv-item b { font-size: 18px; }
  .s-domain { flex-wrap: wrap; }
  .s-domain input { width: 100%; }
  .s-main-card { padding: 22px 18px; }
}

/* ==========================================================================
   侧栏导航 opt-in 形态：树形 / 手风琴
   仅对 .s-side-nav.is-tree / .s-side-nav.is-accordion 生效，完全不影响
   头部 .s-nav 的悬停下拉，也不影响未加 class 的普通 .s-side-nav。
   嵌套子菜单沿用字段标签 sub=pid 输出的 <ul class="s-nav-sub">，这里只改它在
   侧栏里的表现（去掉下拉卡片外观，改为内嵌折叠 / 逐级缩进）。
   ========================================================================== */

/* 树形：多级始终展开、逐级缩进（纯 CSS，无需 JS） */
.s-side-nav.is-tree .s-nav-sub,
.s-side-nav.is-tree li > ul {
  display: block;
  position: static;
  margin: 0;
  padding: 0 0 0 14px;
  border: 0;
  box-shadow: none;
  background: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.s-side-nav.is-tree li { position: static; }

/* 手风琴：默认折叠，点击父级展开，同层只开一个（展开交互见 site.js） */
.s-side-nav.is-accordion .s-nav-sub,
.s-side-nav.is-accordion li > ul {
  display: none;
  position: static;
  margin: 0;
  padding: 0 0 0 14px;
  border: 0;
  box-shadow: none;
  background: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.s-side-nav.is-accordion li.has-sub.open > ul { display: block; }
.s-side-nav.is-accordion li.has-sub > a { cursor: pointer; }
/* 父级项指示箭头（纯 CSS，无 JS 也有视觉提示） */
.s-side-nav.is-accordion li.has-sub > a::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 1.5px solid var(--s-faint);
  border-bottom: 1.5px solid var(--s-faint);
  transform: rotate(-45deg);
  transition: transform .18s ease;
  vertical-align: middle;
}
.s-side-nav.is-accordion li.has-sub.open > a::after { transform: rotate(45deg); }

/* ============ 会员中心布局：左侧内容主体 + 右侧固定宽度树形导航 ============ */
.mc-layout {
  max-width: var(--s-wrap);
  margin: 10px auto 10px;
  padding: 0 5px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 10px;
  align-items: start;
}
.mc-main { min-width: 0; }
.mc-aside { position: sticky; top: 84px; }
.mc-tree {
  background: var(--s-white);
  border: 1px solid var(--s-line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--s-shadow);
}
.mc-tree .grp { margin: 2px 0; }
.mc-tree .grp > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--s-text);
  border-radius: 9px;
  user-select: none;
}
.mc-tree .grp > summary::-webkit-details-marker { display: none; }
.mc-tree .grp > summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid var(--s-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s;
}
.mc-tree .grp[open] > summary::before { transform: rotate(90deg); }
.mc-tree ul { list-style: none; margin: 0; padding: 2px 0 6px 24px; }
.mc-tree li a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--s-muted);
  font-size: 14px;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.mc-tree li a:hover { background: var(--s-bg); color: var(--s-primary); }
.mc-tree li a.on { background: var(--s-primary-soft); color: var(--s-primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--s-primary); }
.mc-tree li .mc-tip-item { display: block; padding: 8px 12px; color: var(--s-faint); font-size: 13px; cursor: default; }
.mc-tree .grp > summary.on { color: var(--s-primary); background: var(--s-primary-soft); }
@media (max-width: 860px) {
  .mc-layout { grid-template-columns: 1fr; }
  .mc-aside { position: static; order: -1; }
}

/* ============ 页面级内联样式归位 ============
   以下规则原写在 index.php / 404.php / layout/footer.php 的内联 style=""，
   现已抽出到此处（BODY 禁内联 style）；选择器按原上下文精确限定，避免影响其它页面。 */

/* 首页 Hero：标题上间距、域名框按钮高度对齐、按钮组上间距（浅色主题，标签用默认 .s-tag） */
.s-hero-txt h1 { margin-top: 16px; }
.s-domain .s-btn { height: 44px; }
.s-hero .s-hero-btns { margin-top: 22px; }

/* 首页价格区：区块标题标签去底部间距 */
.s-sec-head .s-tag { margin-bottom: 0; }

/* 页脚：品牌 Logo 白色 */
.s-footer .s-logo { color: var(--s-white); }

/* 404 页（.s-404 包裹）：卡片居中加大留白、大号标题、说明间距、操作按钮行 */
.s-404 .s-main-card { text-align: center; padding: 64px 24px; }
.s-404 h1 { font-size: 64px; letter-spacing: 2px; }
.s-404 p { margin: 16px 0 26px; color: var(--s-muted); }
.s-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   虚拟主机主页（/vhost、/host）：分类 TAB + 产品卡
   模板：app/view/index/vhost.php；数据来自后台「虚拟主机产品」页（代码开发工具）
   ========================================================================== */
/* 栏目页 Hero（比首页矮一些，避免抢内容） */
.s-hero.s-hero-sm { padding: 44px 0 40px; }
.s-hero.s-hero-sm h1 { font-size: 34px; }

/* ==========================================================================
   产品页紧凑横幅（/vhost、/yunhost、/sql、/mail 共用）：
   浅蓝渐变一条，左侧「emoji + 标题 + 一句卖点」，右侧「立即购买 →」白底按钮
   （替代原深蓝大 Hero + 统计数字的布局）
   ========================================================================== */
.s-banner { padding: 30px 0; background: linear-gradient(105deg, var(--s-primary), var(--s-primary-l)); color: var(--s-white); }
.s-banner .s-wrap { display: flex; align-items: center; gap: 30px; }
.s-banner-txt { flex: 1; min-width: 0; }
.s-banner h1 { display: flex; align-items: center; gap: 12px; color: var(--s-white); font-size: 28px; line-height: 1.3; }
.s-banner h1 i { font-style: normal; font-size: 30px; }
.s-banner p { margin-top: 10px; color: var(--s-on-dark-soft); font-size: 14.5px; line-height: 1.8; }
/* 右侧白底主按钮 */
.s-banner-buy {
  flex-shrink: 0; display: inline-flex; align-items: center; height: 48px; padding: 0 28px;
  background: var(--s-white); color: var(--s-primary); border-radius: 8px;
  font-size: 15px; font-weight: 600; white-space: nowrap; transition: .2s;
}
.s-banner-buy:hover { background: var(--s-primary-soft); color: var(--s-primary-d); }
/* 右侧域名查询搜索框（/domain、/domain/query 用，代替按钮那一路） */
.s-banner-search { flex-shrink: 0; display: flex; gap: 10px; width: 420px; max-width: 100%; }
.s-banner-search input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px; font-size: 14px; color: var(--s-white);
  border: 1px solid rgba(255,255,255,.50); border-radius: 8px;
  background: rgba(255,255,255,.14);
}
.s-banner-search input::placeholder { color: var(--s-on-dark-soft); }
.s-banner-search button {
  height: 48px; padding: 0 24px; border: 0; border-radius: 8px;
  background: var(--s-white); color: var(--s-primary); font-size: 15px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: .2s;
}
.s-banner-search button:hover { background: var(--s-primary-soft); color: var(--s-primary-d); }
@media (max-width: 760px) {
  .s-banner .s-wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
  .s-banner h1 { font-size: 22px; }
  .s-banner h1 i { font-size: 24px; }
  .s-banner-search { width: 100%; }
}

/* 分类 TAB 条 */
.s-tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
/* 一级大 TAB（脚本类型）：更大更醒目，与二级小 TAB 拉开层级 */
.s-tabs.s-tabs-lg { gap: 12px; margin-bottom: 22px; }
.s-tabs.s-tabs-lg .s-tab { height: 50px; padding: 0 28px; font-size: 16px; font-weight: 600; }
/* 一级 TAB 面板内的二级小 TAB：靠左排 */
.s-pane > .s-tabs { justify-content: center; margin-bottom: 20px; }
.s-pane > .s-tabs .s-tab { height: 38px; padding: 0 18px; font-size: 14px; }
/* 二级面板（机房产品区） */
.s-subpane { display: none; }
.s-subpane.on { display: block; }
.s-tab {
  height: 42px; padding: 0 22px; border: 1px solid var(--s-line); background: var(--s-white);
  border-radius: 999px; font-size: 15px; color: var(--s-text); cursor: pointer; transition: .2s;
}
.s-tab:hover { border-color: var(--s-line-strong); color: var(--s-primary); }
.s-tab.on { background: var(--s-primary); border-color: var(--s-primary); color: var(--s-white); font-weight: 600; }
.s-tab-num { margin-left: 6px; font-size: 12px; opacity: .75; }

/* 分类面板：只有当前分类可见（切换纯前端，零请求） */
.s-pane { display: none; }
.s-pane.on { display: block; }

/* 产品卡：三列（复用 .s-card 的边框/阴影），角标绝对定位在右上 */
.s-cards.s-cards-3 { grid-template-columns: repeat(3, 1fr); }
/* 五列（/vhost 每个 TAB 5 个方案，一行排满）：卡片变窄，收紧内边距与标题字号 */
.s-cards.s-cards-5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
/* 同一行卡片等高（网格项默认拉伸）：内部改用纵向 flex，购买按钮统一吸底对齐 */
.s-cards.s-cards-5 { align-items: stretch; }
.s-cards.s-cards-5 .s-card { display: flex; flex-direction: column; padding: 18px 14px; }
.s-cards.s-cards-5 .s-card > p { margin-bottom: 12px; }
.s-cards.s-cards-5 .s-hcard-specs { margin-bottom: 16px; }
.s-cards.s-cards-5 .s-card .s-btn-block { margin-top: auto; }
.s-cards.s-cards-5 .s-card h3 { font-size: 15px; }
.s-cards.s-cards-5 .s-card p { min-height: 40px; font-size: 13px; }
.s-cards.s-cards-5 .s-hcard-specs p { color: var(--s-spec); font-size: 12.5px; line-height: 1.95; }
.s-cards.s-cards-5 .s-hcard-price b { font-size: 22px; }

.s-hcard { position: relative; }
.s-hcard-badge {
  position: absolute; top: -10px; right: 14px; padding: 2px 10px;
  background: var(--s-badge); color: var(--s-white); border-radius: 999px; font-size: 12px; line-height: 18px;
}
.s-hcard .s-hcard-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 10px 0 16px; color: var(--s-primary); }
.s-hcard .s-hcard-price b { font-size: 26px; }
.s-hcard .s-hcard-price b::before { content: '￥'; font-size: 15px; font-weight: 400; }
.s-hcard .s-hcard-price span { color: var(--s-muted); font-size: 13px; }
.s-hcard .s-hcard-price s { color: var(--s-faint); font-size: 13px; }
/* 非数字价格（如「面议」）：不显示自动加的 ￥ 前缀 */
.s-hcard .s-hcard-price.is-text b::before { content: none; }
.s-hcard-specs { margin: 0 0 18px; }
.s-hcard-specs p { margin: 0; min-height: 0; color: var(--s-spec); font-size: 13px; line-height: 2; }

/* 没有产品时的占位文案 */
.s-empty { padding: 44px 0; text-align: center; color: var(--s-muted); }
.s-empty a { color: var(--s-primary); }

@media (max-width: 980px) {
  .s-cards.s-cards-3 { grid-template-columns: repeat(2, 1fr); }
  .s-cards.s-cards-5 { grid-template-columns: repeat(3, 1fr); }
  .s-hero.s-hero-sm h1 { font-size: 26px; }
}
@media (max-width: 640px) {
  .s-cards.s-cards-3 { grid-template-columns: 1fr; }
  .s-cards.s-cards-5 { grid-template-columns: repeat(2, 1fr); }
  .s-tabs { justify-content: flex-start; }
}

/* ==========================================================================
   套餐参数对比表（/sql 数据库、/yunhost 云主机 共用）：地区/线路 TAB + 参数表
   模板：app/view/index/sql.php、app/view/index/yunhost.php
   ========================================================================== */
.plan-tabs { margin-bottom: 22px; }
/* TAB 下的副标题（机房 / 地区说明） */
.plan-note { margin-bottom: 14px; color: var(--s-muted); font-size: 14px; }
/* 参数对比表：横向滚动 + 首列固定视觉（表头浅底、价格列高亮） */
.plan-table-wrap { overflow-x: auto; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-white); }
.plan-table { width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; }
.plan-table th, .plan-table td { padding: 11px 14px; border-bottom: 1px solid var(--s-line); text-align: left; }
.plan-table thead th { background: var(--s-surface); color: var(--s-text-2); font-weight: 600; }
.plan-table thead th:not(:first-child) { text-align: center; }
.plan-table tbody th { width: 130px; background: var(--s-surface); color: var(--s-text-2); font-weight: 600; }
.plan-table td { text-align: center; color: var(--s-muted); }
.plan-table .plan-price { color: var(--s-primary); font-weight: 600; font-size: 15px; }
.plan-table .plan-yes { color: var(--s-success-text); }
.plan-table .plan-no { color: var(--s-disabled); }
.plan-table tr:hover td { background: var(--s-surface); }
.plan-table tbody tr:last-child th, .plan-table tbody tr:last-child td { border-bottom: 0; }
.plan-table .plan-buy { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--s-primary); color: var(--s-white); font-size: 13px; }
.plan-table .plan-buy:hover { background: var(--s-primary-d); color: var(--s-white); }
@media (max-width: 640px) {
  .plan-table tbody th { width: 100px; }
}

/* ==========================================================================
   产品参数行的三档色阶（放在文件末尾，确保覆盖前面所有同类规则）
   勾 ✓ = 深色文字 + 绿色勾；圆点（普通参数）= 中间色；叉 ✗ = 最浅灰
   ========================================================================== */
/* 三档色阶：符号（✓ / ✗ / ·）直接作为文本写在 <p> 里，不再用 <i> 与伪元素；
      ★结构为 div.s-hcard-specs > p（p 自带默认 margin，已归零）；符号是行首第一个字符，天然同列对齐 */
.s-hcard-specs p,
.s-cards.s-cards-3 .s-hcard-specs p,
.s-cards.s-cards-5 .s-hcard-specs p {
  margin: 0; min-height: 0; color: var(--s-spec); font-size: 13px; line-height: 2;
}
/* ① 有功能的行（✓）：文字为稍深蓝（站点蓝系，比主色 var(--s-primary) 沉一档） */
.s-hcard-specs p.has-mark,
.s-cards.s-cards-3 .s-hcard-specs p.has-mark,
.s-cards.s-cards-5 .s-hcard-specs p.has-mark { color: var(--s-primary-dd); }
/* ③ 没有功能的行（✗）：整行最浅灰 */
.s-hcard-specs p.is-no,
.s-cards.s-cards-3 .s-hcard-specs p.is-no,
.s-cards.s-cards-5 .s-hcard-specs p.is-no { color: var(--s-faint); }