/* =========================================================
   Service Page · Final CSS
   - 左右图标统一：img 引用 svg + filter 品牌色
   - 3 块结构：H1(隐藏) / 主视觉双栏 / 服务流程
   Requires: --brand
========================================================= */

/* ========== 基础 ========== */
.service.page-section{
  padding:56px 0 78px;
  background:#fff;
}

/* SEO H1：只给搜索引擎，不占视觉 */
.service-h1{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path: inset(50%);
  white-space:nowrap;
  border:0;
}

/* ========== 统一宽度线 ========== */
.service-main-inner,
.service-flow{
  width:100%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

/* 区块间距 */
.service-main{ margin-top:14px; }
.service-flow{ margin-top:54px; }

/* ========== 主视觉双栏 ========== */
.service-main-inner{
  display:grid;
  grid-template-columns: minmax(0,1.45fr) minmax(0,1fr);
  gap:18px;
  align-items:stretch;
}

/* ========== 面板基础 ========== */
.service-panel{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  overflow:hidden;
}

.service-panel-body{
  padding:20px 18px;
}

/* ========== 标题体系（弱化，无品牌线） ========== */
.service-tt{
  font-size:16px;
  font-weight:650;
  line-height:1.25;
  color:rgba(15,23,42,.86);
}

.service-sub{
  margin-top:8px;
  font-size:13.5px;
  line-height:1.8;
  color:rgba(15,23,42,.56);
}

.service-sec-title{
  margin-bottom:18px;
}

/* =========================================================
   左侧：服务能力及保障
========================================================= */
.service-caps{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.cap-item{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
}

.cap-ico{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(46,49,146,.06);
  border:1px solid rgba(46,49,146,.12);
}

/* 左侧 svg（img 引用）统一品牌色 */
.cap-ico img{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
}

.cap-bd{ min-width:0; }

.cap-tt{
  font-size:14.5px;
  font-weight:720;
  color:#0f172a;
}

.cap-desc{
  margin-top:4px;
  font-size:13.5px;
  line-height:1.7;
  color:rgba(15,23,42,.68);
}

/* 保障标签 */
.service-badges{
  list-style:none;
  margin:16px 0 0;
  padding:16px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  border-top:1px dashed rgba(15,23,42,.12);
}

.service-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  font-size:13px;
  font-weight:650;
  color:rgba(15,23,42,.74);
}

.service-badge:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--brand);
}

/* =========================================================
   右侧：快捷入口（img + svg，和左侧同一套路）
========================================================= */
.service-links{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.link-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  text-decoration:none;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.link-card:hover{
  transform:translateY(-1px);
  border-color:rgba(46,49,146,.24);
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}

.link-ico{
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(46,49,146,.06);
  border:1px solid rgba(46,49,146,.14);
}

/* 右侧 svg（img 引用）同样染品牌色 */
.link-ico img{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
}

.link-bd{ min-width:0; }

.link-tt{
  display:block;
  font-size:14.5px;
  font-weight:720;
  color:#0f172a;
}

.link-desc{
  display:block;
  margin-top:4px;
  font-size:13.5px;
  line-height:1.7;
  color:rgba(15,23,42,.66);
}

.link-more{
  display:inline-block;
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  color:var(--brand);
}

/* =========================================================
   服务流程
========================================================= */
.service-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.service-step{
  position:relative;
  padding:16px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
}

.service-step-no{
  font-size:13px;
  font-weight:900;
  letter-spacing:.8px;
  color:rgba(46,49,146,.70);
  margin-bottom:10px;
}

.service-step-tt{
  font-size:14.5px;
  font-weight:720;
  color:rgba(15,23,42,.88);
}

.service-step-desc{
  margin-top:6px;
  font-size:13.5px;
  line-height:1.7;
  color:rgba(15,23,42,.66);
}

/* 流程箭头（仅 4 列时显示） */
.service-step:not(:last-child):after{
  content:"";
  position:absolute;
  top:50%;
  right:-9px;
  width:18px;
  height:18px;
  border-top:2px solid rgba(46,49,146,.28);
  border-right:2px solid rgba(46,49,146,.28);
  transform:translateY(-50%) rotate(45deg);
  background:#fff;
}

/* =========================================================
   响应式
========================================================= */
@media (max-width:1200px){
  .service-main-inner{
    grid-template-columns:1fr;
  }
  .service-flow{ margin-top:44px; }
  .service-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .service-step:not(:last-child):after{ display:none; }
}

@media (max-width:768px){
  .service.page-section{ padding:48px 0 66px; }
  .service-flow{ margin-top:34px; }
  .service-panel-body{ padding:18px 16px; }
  .service-steps{ grid-template-columns:1fr; }
}

@media (max-width:480px){
  .service-panel{ border-radius:14px; }
  .link-card{ border-radius:12px; }
  .cap-item{ border-radius:12px; }
}



/* =========================================================
   Service · Micro Interactions (CSS only)
   - 轻微上浮、柔和高亮、键盘可见焦点
   - 尊重 reduced-motion
========================================================= */

/* 统一：过渡节奏 */
.service .service-panel,
.service .cap-item,
.service .link-card,
.service .service-step{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

/* 面板：hover 微浮（很轻） */
@media (hover:hover){
  .service .service-panel:hover{
    transform: translateY(-1px);
    border-color: rgba(46,49,146,.16);
    box-shadow: 0 16px 34px rgba(15,23,42,.06);
  }
}

/* 卡片：hover 更明确一点，但依旧克制 */
@media (hover:hover){
  .service .cap-item:hover,
  .service .link-card:hover,
  .service .service-step:hover{
    border-color: rgba(46,49,146,.24);
    box-shadow: 0 14px 30px rgba(15,23,42,.06);
  }
}

/* 图标底座：hover 跟随强调 */
@media (hover:hover){
  .service .cap-item:hover .cap-ico,
  .service .link-card:hover .link-ico{
    background: rgba(46,49,146,.10);
    border-color: rgba(46,49,146,.26);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.70);
  }
}

/* “查看 →”微动 */
@media (hover:hover){
  .service .link-more{
    transition: transform .18s ease, color .18s ease, opacity .18s ease;
    opacity: .92;
  }
  .service .link-card:hover .link-more{
    transform: translateX(2px);
    opacity: 1;
  }
}

/* 流程：hover 更有“指向性”，但不抢 */
@media (hover:hover){
  .service .service-step:hover{
    background: rgba(46,49,146,.03);
  }
  .service .service-step:hover .service-step-no{
    color: rgba(46,49,146,.82);
  }
}

/* 键盘可访问焦点（很重要） */
.service a.link-card:focus-visible{
  outline: none;
  border-color: rgba(46,49,146,.34);
  box-shadow:
    0 0 0 4px rgba(46,49,146,.14),
    0 12px 26px rgba(15,23,42,.06);
}

/* 点击时轻微压下（触感） */
.service a.link-card:active{
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(15,23,42,.05);
}

/* 动画降级（用户不想动就不动） */
@media (prefers-reduced-motion: reduce){
  .service .service-panel,
  .service .cap-item,
  .service .link-card,
  .service .service-step,
  .service .link-more{
    transition: none !important;
  }
}

/* =================================================
   Service · 服务流程标题居中
================================================= */
.service-flow .service-sec-title{
  text-align:center;
}

.service-flow .service-sec-title .service-tt{
  justify-content:center;
}

.service-flow .service-sec-title .service-sub{
  margin-left:auto;
  margin-right:auto;
}



/* =================================================
   Manual Page · Layout + Cards（封面感 / A4比例 / 4列布局）
   1) 标题左对齐 + 品牌竖条；搜索与标题同一行，右对齐；响应固定宽度
   2) 列表区 4*3（PC默认4列），卡片 A4比例（1:1.414），封面感
   说明：仅用 --brand（你全站已有），其余尽量克制
================================================= */

/* ===== 顶部工具条：标题 + 搜索同一行 ===== */
.manual-hd{margin:0 0 10px;}
.manual-title{
  margin:0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:28px;
  line-height:1.2;
  font-weight:700;
  color:#0f172a;
}

/* 品牌竖条（封面感锚点） */
.manual-title:before{
  content:"";
  width:4px;
  height:24px;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 8px 18px rgba(46,49,146,.18);
}

/* 工具条容器：标题左，搜索右 */
.manual-toolbar{
  margin:14px 0 22px;
  padding:10px 0 14px;
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* 左：标题块（和 toolbar 对齐时用） */
.manual-toolbar .manual-hd{margin:0;}
/* 兼容你当前结构：manual-hd在toolbar上方时，也保持一致 */
.manual-page .manual-hd + .manual-toolbar{margin-top:10px;}

/* 右：搜索区固定宽度（响应式） */
.manual-search{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  width:420px;               /* PC 固定宽度 */
  max-width:48vw;            /* 防止超宽屏挤压 */
}
.manual-search-input{
  flex:1 1 auto;
  min-width:0;
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  font-size:14px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.manual-search-input:focus{
  border-color:rgba(46,49,146,.45);
  box-shadow:0 0 0 4px rgba(46,49,146,.10);
}

.manual-search-clear{
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111827;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .manual-search-clear:hover{
    border-color:rgba(46,49,146,.35);
    box-shadow:0 10px 22px rgba(0,0,0,.08);
    transform:translateY(-1px);
  }
}

/* 右侧 meta（可选） */
.manual-meta{display:none;} /* 你现在没用到，先隐藏避免占位 */

/* ===== 列表：4列布局（响应） ===== */
.manual-list-wrap{margin-top:8px;}
.manual-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr)); /* 4列 */
  gap:18px;
}

/* 响应：4 -> 3 -> 2 -> 1 */
@media (max-width:1200px){
  .manual-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (max-width:992px){
  .manual-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .manual-search{width:360px;max-width:55vw;}
  .manual-title{font-size:24px;}
}
@media (max-width:768px){
  .manual-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding-bottom:12px;
  }
  .manual-search{width:100%;max-width:none;}
  .manual-title{font-size:22px;}
}
@media (max-width:480px){
  .manual-grid{grid-template-columns:1fr;}
}

/* ===== 卡片：A4比例 + 封面感 ===== */
/* 外层 item 不要额外样式，防污染 */
.manual-item{margin:0;}

/* 卡片本体：A4 1:1.414（竖版） */
.manual-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  overflow:hidden;

  aspect-ratio: 1 / 1.414;          /* A4 竖版比例 */
  display:flex;
  flex-direction:column;

  box-shadow:
    0 10px 24px rgba(0,0,0,.06),
    0 1px 0 rgba(255,255,255,.65) inset;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

/* 顶部“封面脊线”品牌元素（更像书封面） */
.manual-card:before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background:linear-gradient(180deg,
    rgba(46,49,146,.95),
    rgba(46,49,146,.55)
  );
  opacity:.95;
}

/* 卡片hover：轻抬升 + 更清晰 */
@media (hover:hover){
  .manual-card:hover{
    transform:translateY(-3px);
    border-color:rgba(46,49,146,.22);
    box-shadow:
      0 18px 36px rgba(0,0,0,.10),
      0 1px 0 rgba(255,255,255,.65) inset;
  }
}

/* 封面区域：占上半部，保持封面感 */
.manual-cover{
  position:relative;
  display:block;
  flex:0 0 58%;                 /* 上半区占比 */
  padding-left:6px;             /* 给左侧脊线让位 */
  overflow:hidden;
  background:linear-gradient(135deg,
    rgba(46,49,146,.08),
    rgba(0,0,0,.02)
  );
}

/* 封面图：完整覆盖，别抖动，别缩放 */
.manual-cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:none;
}

/* 封面层柔光（更像印刷封面） */
.manual-cover:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 60% at 20% 15%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.06));
  pointer-events:none;
}

/* 内容区：下半部 */
.manual-body{
  flex:1 1 auto;
  padding:14px 14px 16px;
  padding-left:20px;           /* 脊线对齐 */
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* 标题：不使用H标签也要像标题 */
.manual-name{
  font-size:20px;
  line-height:1.35;
  font-weight:700;
  color:#0f172a;
  max-height:2.7em;            /* 两行 */
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* 描述：淡一点 */
.manual-desc{
  margin:0;
  font-size:15px;
  color:rgba(15,23,42,.62);
}

/* 按钮区：贴底 */
.manual-actions{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:12px;
}

/* 按钮封面风格 */
.manual-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  text-decoration:none;
  font-size:13px;
  font-weight:650;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}

/* 预览：幽灵按钮 */
.manual-btn--ghost{
  background:#fff;
  border-color:rgba(0,0,0,.10);
  color:#111827;
}
@media (hover:hover){
  .manual-btn--ghost:hover{
    border-color:rgba(46,49,146,.28);
    color:var(--brand);
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(0,0,0,.08);
  }
}

/* 下载：主按钮 */
.manual-btn--primary{
  background:var(--brand);
  color:#fff;
  box-shadow:0 10px 22px rgba(46,49,146,.18);
}
@media (hover:hover){
  .manual-btn--primary:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 28px rgba(46,49,146,.26);
    color:#fff;
  }
}

/* ===== 列表区底部留白（防止贴 footer，利于滚动结束体验） ===== */
.manual-list-wrap{
  padding-bottom:64px;   /* PC 默认 */
}

/* 响应式：小屏稍微收一点 */
@media (max-width:768px){
  .manual-list-wrap{
    padding-bottom:48px;
  }
}
@media (max-width:480px){
  .manual-list-wrap{
    padding-bottom:36px;
  }
}



/* ===== 列表状态提示：居中 + 上下留白 ===== */
.manual-meta{
  margin:50px 0 0px;          /* 上下留白 */
  display:flex;
  min-width:140px;
  align-items:center;
  justify-content:center;      /* 水平居中 */
  font-size:13px;
  color:rgba(15,23,42,.55);
}

.manual-count-tip{
  color:rgba(15,23,42,.62);
  white-space:nowrap;
}

/* ===== 加载提示 ===== */
.manual-loadmore,
.manual-loadend{
  margin:18px 0 0;
  text-align:center;
  color:rgba(15,23,42,.55);
  font-size:13px;
}

/* 修复：内容区层级高于 head 的问题 */
.manual-page{
  position:relative;
  z-index:1;           /* 明确内容层 */
}

/* 如果 toolbar / h1 仍然有异常，再兜底一次 */
.manual-toolbar{
  position:relative;
  z-index:1;
}