/* ==========================================================================
   美洽帮助中心 · 第三版（接诊台 / 接诊单）
   设计：灰蓝底 + 纸面卡片 + 工单元素（单号、红章、留言/回复分栏）
   ========================================================================== */

:root {
  --ink: #232A45;
  --mut: #6B7394;
  --pri: #1880FF;
  --bg: #F4F6FB;
  --paper: #FFFFFF;
  --edge: #E5E9F2;
  --stamp: #E65A4F;
  --askbg: #F7F8FC;
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", -apple-system, "SF Pro", Arial, "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.75;
}
a { color: var(--pri); text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ---------- 顶条 ---------- */
.topline { background: var(--paper); border-bottom: 1px solid var(--edge); }
.topline__in { max-width: 1120px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; }
.topline__home { font-size: 14px; color: var(--mut); }
.topline__home:hover { color: var(--pri); }
.topline__name { font-size: 14px; font-weight: 600; }

/* ---------- 搜索区 ---------- */
.seekhero { max-width: 1120px; margin: 0 auto; padding: 56px 20px 30px; text-align: center; }
.seekhero h1 { font-size: 34px; line-height: 1.3; }
.seekhero__sub { margin-top: 10px; color: var(--mut); font-size: 15px; }
.seekbar { margin: 26px auto 0; max-width: 640px; display: flex; background: var(--paper); border: 1px solid var(--edge); border-radius: 999px; padding: 6px; }
.seekbar input {
  flex: 1; border: 0; outline: 0; background: transparent; padding: 10px 18px;
  font-size: 15px; font-family: inherit; color: var(--ink);
}
.seekbar button {
  border: 0; background: var(--pri); color: #fff; font-size: 15px;
  padding: 10px 26px; border-radius: 999px; cursor: pointer; font-family: inherit;
}
.seekbar button:hover { opacity: .88; }

/* ---------- 搜索结果 ---------- */
.seekresult, #boardWrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.hit__sum { color: var(--mut); font-size: 14px; margin: 6px 0 12px; }
.hit__none { background: var(--paper); border: 1px dashed var(--edge); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--mut); }
.hit {
  display: flex; align-items: center; gap: 12px; background: var(--paper);
  border: 1px solid var(--edge); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px;
  color: var(--ink); transition: border-color .15s;
}
.hit:hover { border-color: var(--pri); }
.hit__cat { flex-shrink: 0; font-size: 12px; color: var(--pri); background: #EAF3FF; border-radius: 6px; padding: 2px 8px; }
.hit__q { flex: 1; font-size: 15px; }
.hit__kind { flex-shrink: 0; font-size: 12px; color: var(--mut); }

/* ---------- 板块标题 ---------- */
.blk { font-size: 22px; margin: 40px 0 18px; }

/* ---------- 分类卡 ---------- */
.cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.catcard {
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.catcard:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(35, 42, 69, .07); }
.catcard__n { font-size: 16px; font-weight: 600; }
.catcard__d { font-size: 13px; color: var(--mut); min-height: 40px; }
.catcard__c { font-size: 12px; color: var(--pri); }

/* ---------- 热门 ---------- */
.hot__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hotitem {
  display: flex; align-items: center; gap: 10px; background: var(--paper);
  border: 1px solid var(--edge); border-radius: 10px; padding: 12px 16px; color: var(--ink); font-size: 15px;
}
.hotitem:hover { border-color: var(--pri); }
.hotitem__tag { flex-shrink: 0; font-size: 12px; color: var(--pri); background: #EAF3FF; border-radius: 6px; padding: 2px 8px; }
.hotitem__q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 分类墙 ---------- */
.catwall { margin-top: 34px; }
.catwall__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.catwall__head h3 { font-size: 19px; }
.catwall__head span { font-size: 13px; color: var(--mut); }
.catwall__more {
  margin-top: 10px; border: 1px solid var(--edge); background: var(--paper); color: var(--mut);
  font-size: 13px; padding: 8px 18px; border-radius: 999px; cursor: pointer; font-family: inherit;
}
.catwall__more:hover { color: var(--pri); border-color: var(--pri); }

/* ---------- 文章页通用 ---------- */
.sheet { max-width: 860px; margin: 0 auto; padding: 24px 20px 10px; }
.loading, .oops { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius); padding: 40px; text-align: center; color: var(--mut); }
.oops h2 { color: var(--ink); margin-bottom: 8px; }
.crumb { font-size: 13px; color: var(--mut); margin-bottom: 14px; display: flex; gap: 8px; }
.crumb i { font-style: normal; opacity: .5; }
.crumb a:hover { color: var(--pri); }
.paper { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius); }
.chip { font-size: 12px; color: var(--pri); background: #EAF3FF; border-radius: 6px; padding: 3px 10px; }
.goback { display: inline-block; margin: 18px 0 30px; font-size: 14px; color: var(--mut); }
.goback:hover { color: var(--pri); }

/* ---------- 详解（hub） ---------- */
.paper--hub { padding: 38px 44px; }
.paper__head h1 { font-size: 27px; line-height: 1.4; margin: 12px 0 10px; }
.lede { color: var(--mut); font-size: 15px; }
.paper__meta { margin-top: 14px; display: flex; gap: 16px; font-size: 13px; color: var(--mut); border-bottom: 1px dashed var(--edge); padding-bottom: 18px; }
.toc { margin: 20px 0; background: var(--askbg); border-radius: 10px; padding: 16px 20px; font-size: 14px; }
.toc b { display: block; margin-bottom: 8px; }
.toc li { margin: 4px 0; }
.paper__body { font-size: 15.5px; }
.paper__body h2 { font-size: 20px; margin: 30px 0 12px; padding-left: 10px; border-left: 4px solid var(--pri); }
.paper__body h3 { font-size: 16.5px; margin: 20px 0 8px; }
.paper__body p { margin: 10px 0; }
.paper__body ul, .paper__body ol { margin: 10px 0 10px 22px; }
.paper__body ul li { list-style: disc; margin: 6px 0; }
.paper__body ol li { list-style: decimal; margin: 6px 0; }
.paper__body .memo { background: #FFF8E6; border: 1px solid #F3E3AE; border-radius: 10px; padding: 12px 16px; font-size: 14px; margin: 14px 0; }
.paper__body .memo b { color: #9A7418; }

/* ---------- 配图 ---------- */
.shot { margin: 16px 0; }
.shot img { width: 100%; height: auto; border: 1px solid var(--edge); border-radius: 10px; }
.shot figcaption { font-size: 12.5px; color: var(--mut); text-align: center; margin-top: 6px; }

/* ---------- 接诊单 ---------- */
.paper--ticket { overflow: hidden; }
.ticket__bar {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, #EAF3FF, #F7FAFF);
  border-bottom: 1px dashed var(--edge); padding: 14px 22px; position: relative;
}
.ticket__no { font-size: 15px; font-weight: 700; letter-spacing: .5px; font-family: Consolas, "Courier New", monospace; }
.ticket__stamp {
  margin-left: auto; color: var(--stamp); border: 2px solid var(--stamp); border-radius: 8px;
  font-size: 13px; font-weight: 700; padding: 2px 10px; transform: rotate(6deg); opacity: .85;
}
.ticket__ask { margin: 20px 22px 0; background: var(--askbg); border-radius: 10px; padding: 16px 18px; }
.ticket__ask b { display: block; font-size: 13px; color: var(--mut); margin-bottom: 6px; }
.ticket__ask p { font-size: 16.5px; line-height: 1.7; }
.ticket__reply { margin: 16px 22px 0; border-left: 3px solid var(--pri); padding: 4px 0 4px 16px; }
.ticket__reply > b { display: block; font-size: 13px; color: var(--pri); margin-bottom: 6px; }
.ticket__ans p { font-size: 15.5px; }
.ticket__more { margin-top: 14px; background: #F0F7FF; border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.ticket__more span { color: var(--mut); display: block; }
.ticket__more a { font-weight: 600; }
.ticket__foot {
  margin-top: 20px; border-top: 1px dashed var(--edge); padding: 12px 22px;
  display: flex; gap: 24px; font-size: 13px; color: var(--mut);
}

/* ---------- 关联条目 ---------- */
.also { margin-top: 18px; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius); padding: 20px 22px; }
.also h4 { font-size: 15px; margin-bottom: 10px; }
.also ul li { margin: 6px 0; font-size: 14.5px; }
.also ul li a { color: var(--ink); }
.also ul li a:hover { color: var(--pri); }
.also__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.also__card { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--edge); border-radius: 10px; padding: 12px 14px; color: var(--ink); font-size: 14.5px; }
.also__card span { font-size: 12px; color: var(--pri); }
.also__card:hover { border-color: var(--pri); }

/* ---------- 页脚 ---------- */
.helpfoot { max-width: 1120px; margin: 40px auto 0; padding: 24px 20px 36px; text-align: center; font-size: 13px; color: var(--mut); }

/* ---------- 窄屏 ---------- */
@media (max-width: 860px) {
  .cats__grid { grid-template-columns: repeat(2, 1fr); }
  .hot__list, .also__grid { grid-template-columns: 1fr; }
  .paper--hub { padding: 24px 20px; }
  .seekhero h1 { font-size: 26px; }
}