/* ==========================================================================
   设计令牌 —— 与 DcPosMobile/res/values/colors.xml 对齐
   规矩：层级强弱只用「颜色深浅 + 字号」表达，全文字重 400（不使用加粗），
        不使用纯黑，标签用红色。
   ========================================================================== */
:root{
  --primary:#F97316; --primary-deep:#EA580C; --primary-tint:#FFF1E8; --primary-soft:#FFE7D6;
  --red:#E11D48; --red-bg:#FEE2E2; --red-text:#9F1239;
  --green:#16A34A; --green-bg:#DCFCE7; --green-text:#15803D;
  --amber-bg:#FEF3C7; --amber-text:#B45309;
  --text:#1F2937; --text-2:#6B7280; --text-3:#9CA3AF;
  --border:#E5E7EB; --line:#F1F2F4; --bg:#F5F6F8; --card:#FFFFFF;
  --top:60px; --side:268px;
  --shadow:0 1px 2px rgba(31,41,55,.04), 0 6px 16px rgba(31,41,55,.05);
  --shadow-lg:0 2px 6px rgba(31,41,55,.05), 0 14px 32px rgba(31,41,55,.08);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Segoe UI",sans-serif;
  font-weight:400; font-size:15px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,b,strong,th,mark{ font-weight:400; }
a{ color:var(--primary-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }

/* ------------------------------ 顶栏 ------------------------------ */
.top{
  position:fixed; inset:0 0 auto 0; height:var(--top); z-index:60;
  display:flex; align-items:center; gap:14px; padding:0 20px;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand .mk{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  color:#fff; display:grid; place-items:center; font-size:15px; letter-spacing:.5px;
}
.brand .tt{ font-size:15px; color:var(--text); white-space:nowrap; }
.brand .tt i{ font-style:normal; color:var(--text-3); font-size:13px; margin-left:6px; }

.search{ position:relative; flex:1 1 auto; max-width:420px; }
.search input{
  width:100%; height:38px; padding:0 84px 0 36px; border-radius:10px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  font:inherit; font-size:14px;
}
.search input::placeholder{ color:var(--text-3); }
.search input:focus{ border-color:var(--primary-soft); box-shadow:0 0 0 3px rgba(249,115,22,.10); outline:none; }
.search .ico{ position:absolute; left:12px; top:9px; color:var(--text-3); pointer-events:none; }
.search kbd{
  position:absolute; right:8px; top:8px; padding:1px 7px; border-radius:6px;
  border:1px solid var(--border); background:var(--bg); color:var(--text-3); font-size:11px;
}
.search .cnt{ display:none; position:absolute; right:10px; top:9px; font-size:12px; color:var(--text-2); }
.search.on .cnt{ display:block; }
.search.on kbd{ display:none; }

.top .menu{ display:none; width:38px; height:38px; border:1px solid var(--border); background:#fff;
  border-radius:10px; color:var(--text-2); font-size:16px; cursor:pointer; }
.top .ver{ flex:none; font-size:12px; color:var(--text-3); }

/* 阅读进度 */
.bar{ position:fixed; top:0; left:0; height:2px; z-index:70; width:0; background:var(--primary); transition:width .1s linear; }

/* ------------------------------ 布局 ------------------------------ */
.wrap{ display:flex; align-items:flex-start; padding-top:var(--top); }

.side{
  position:sticky; top:var(--top); flex:none; width:var(--side);
  height:calc(100vh - var(--top)); overflow-y:auto; overscroll-behavior:contain;
  padding:22px 12px 60px 20px; border-right:1px solid var(--border); background:#fff;
}
.side::-webkit-scrollbar{ width:8px; }
.side::-webkit-scrollbar-thumb{ background:#E3E6EA; border-radius:8px; }
.side .grp{ margin:0 0 4px; padding:14px 10px 6px; font-size:12px; color:var(--text-3); letter-spacing:1px; }
.side nav a{
  display:flex; gap:9px; align-items:baseline; padding:7px 10px; border-radius:8px;
  color:var(--text-2); font-size:14px; line-height:1.5;
}
.side nav a i{ font-style:normal; font-size:12px; color:var(--text-3); flex:none; width:18px; }
.side nav a:hover{ background:var(--bg); color:var(--text); text-decoration:none; }
.side nav a.on{ background:var(--primary-tint); color:var(--primary-deep); }
.side nav a.on i{ color:var(--primary); }
.side nav a.dim{ opacity:.34; }
.side .foot{ margin:18px 10px 0; padding-top:14px; border-top:1px dashed var(--border);
  font-size:12px; color:var(--text-3); line-height:1.7; }

.main{ flex:1 1 auto; min-width:0; padding:26px 34px 90px; }
.main .inner{ max-width:900px; margin:0 auto; }

/* ------------------------------ 首屏 ------------------------------ */
.hero{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:30px 32px; box-shadow:var(--shadow); margin-bottom:22px;
}
.hero .pill{
  display:inline-block; font-size:12px; color:var(--primary-deep);
  background:var(--primary-tint); border:1px solid var(--primary-soft);
  border-radius:999px; padding:3px 12px; letter-spacing:.4px;
}
.hero h1{ font-size:29px; line-height:1.35; margin:14px 0 8px; letter-spacing:.5px; }
.hero p{ margin:0; color:var(--text-2); }
.hero .rule{ width:56px; height:3px; border-radius:2px; background:var(--primary); margin:18px 0 20px; }
.quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.quick a{
  display:block; padding:14px 16px; border:1px solid var(--border); border-radius:12px;
  background:#fff; box-shadow:var(--shadow); color:var(--text);
}
.quick a:hover{ text-decoration:none; border-color:var(--primary-soft); transform:translateY(-1px); }
.quick a .t{ font-size:14px; }
.quick a .d{ font-size:12.5px; color:var(--text-3); line-height:1.6; }
.quick a .d:before{ content:"— "; color:var(--primary-soft); }

/* ------------------------------ 章节 ------------------------------ */
section.doc{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:26px 30px 28px; margin-bottom:20px; box-shadow:var(--shadow);
  scroll-margin-top:calc(var(--top) + 14px);
}
section.doc.hide{ display:none; }
section.doc.dim{ opacity:.32; }
h2.t{
  font-size:21px; margin:0 0 4px; display:flex; align-items:baseline; gap:10px;
  scroll-margin-top:calc(var(--top) + 14px);
}
h2.t .no{ font-size:13px; color:var(--primary); letter-spacing:1px; flex:none; }
h2.t .lnk{ font-size:13px; color:var(--text-3); opacity:0; flex:none; }
h2.t:hover .lnk{ opacity:1; }
.lead{ color:var(--text-2); margin:2px 0 18px; padding-bottom:16px; border-bottom:1px solid var(--line); }
h3.s{ font-size:15.5px; margin:24px 0 10px; color:var(--text); }
h3.s:before{ content:"— "; color:var(--primary-soft); }
p{ margin:0 0 12px; }
ul.dot{ margin:0 0 14px; padding:0; list-style:none; }
ul.dot li{ position:relative; padding-left:16px; margin-bottom:7px; }
ul.dot li:before{ content:""; position:absolute; left:2px; top:.68em; width:5px; height:5px;
  border-radius:50%; background:var(--primary); }
.small{ font-size:13px; color:var(--text-2); }

/* 标签 */
.tag{ display:inline-block; font-size:12.5px; line-height:1.7; padding:1px 8px; border-radius:6px;
  margin-right:5px; white-space:nowrap; }
.tag.red{ background:var(--red-bg); color:var(--red-text); }
.tag.amber{ background:var(--amber-bg); color:var(--amber-text); }
.tag.green{ background:var(--green-bg); color:var(--green-text); }
.tag.gray{ background:var(--line); color:var(--text-2); }
.tag.brand{ background:var(--primary-tint); color:var(--primary-deep); }

/* 提示块 */
.note,.warn{ border-radius:0 10px 10px 0; padding:13px 18px; margin:0 0 16px; font-size:14px; }
.note{ border-left:3px solid var(--primary); background:var(--primary-tint); }
.warn{ border-left:3px solid var(--red); background:var(--red-bg); }
.note .hd,.warn .hd{ display:block; margin-bottom:2px; }
.note .hd{ color:var(--primary-deep); }
.warn .hd{ color:var(--red); }

/* 表格 */
.tw{ overflow-x:auto; margin:0 0 16px; }
table{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
th,td{ border-bottom:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
thead th{ color:var(--text-2); font-size:13px; background:#FAFBFC; border-bottom:1px solid var(--border); }
td.c,th.c{ text-align:center; width:56px; }
.yes{ color:var(--green); }
.no{ color:var(--text-3); }

/* 截图 */
.shots{ display:grid; gap:16px; margin:0 0 18px; }
.shots.c2{ grid-template-columns:repeat(2,1fr); }
.shots.c3{ grid-template-columns:repeat(3,1fr); }
.shots.one{ justify-items:center; }
.shots.one figure{ width:min(320px,72%); }
/* 两张竖屏手机图并排：按内容列收窄，别让 1:2.1 的长图撑成一面墙。
   内容区约 560px，2×250+16(gap) = 516 刚好放得下。 */
.shots.ph{ grid-template-columns:repeat(2,minmax(0,250px)); justify-content:center; }
figure{ margin:0; }
figure img{ display:block; width:100%; border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-lg); background:#fff; }
figcaption{ font-size:13px; color:var(--text-2); margin-top:8px; line-height:1.65; }
figcaption b{ color:var(--primary-deep); }
figcaption .em{ color:var(--text-3); }

/* ------------------------------ 流程图 ------------------------------ */
/* 一条主线横向排开，窄屏自动转竖向、箭头跟着转向下。
   只画「线」不堆色块：白底 + 1px 边 + 主色细箭头。 */
.flow{ display:flex; align-items:stretch; margin:2px 0 22px; }
.flow .n{
  flex:1 1 0; min-width:0; padding:13px 14px 12px;
  background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
}
.flow .n .k{ display:block; font-size:11px; color:var(--primary); letter-spacing:1.5px; }
.flow .n .h{ display:block; font-size:15px; margin:2px 0 4px; }
.flow .n .d{ display:block; font-size:12.5px; color:var(--text-2); line-height:1.6; }
.flow .n .d span{ display:block; }
.flow .a{ flex:none; width:34px; position:relative; opacity:.55; }
.flow .a:before{ content:""; position:absolute; left:4px; right:9px; top:50%; height:1px; background:var(--primary); }
.flow .a:after{
  content:""; position:absolute; right:5px; top:50%; margin-top:-3px;
  border-left:5px solid var(--primary);
  border-top:3px solid transparent; border-bottom:3px solid transparent;
}
/* 分叉对照：几路并排（三选一 / 多处分支），窄屏叠成一列 */
.picks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:2px 0 20px; }
.picks .p{
  background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  padding:13px 14px 12px;
}
.picks .p .h{ display:block; font-size:15px; margin:0 0 7px; }
.picks .p .h em{ font-style:normal; font-size:11px; color:var(--primary); letter-spacing:1.5px; margin-right:7px; }
.picks .p .r{ display:block; font-size:12.5px; color:var(--text-2); line-height:1.7; }
.picks .p .f{
  display:block; margin-top:9px; padding-top:9px; border-top:1px dashed var(--line);
  font-size:12.5px; color:var(--text-3); line-height:1.7;
}
.picks .p .f:before{ content:"卡点 · "; color:var(--red); }

/* 章节内的流程图索引 */
.idx{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 18px; }
.idx a{
  border:1px solid var(--border); border-radius:11px; background:#fff; box-shadow:var(--shadow);
  padding:11px 14px; font-size:14px; color:var(--text);
}
.idx a:hover{ text-decoration:none; border-color:var(--primary-soft); }
.idx a em{ font-style:normal; font-size:11px; color:var(--primary); letter-spacing:1.5px; margin-right:8px; }
.idx a span{ display:block; font-size:12.5px; color:var(--text-2); }


/* 步骤 */
ol.steps{ counter-reset:s; margin:0 0 16px; padding:0; list-style:none; }
ol.steps li{ counter-increment:s; position:relative; padding:0 0 16px 44px; }
ol.steps li:before{
  content:counter(s); position:absolute; left:0; top:1px; width:28px; height:28px;
  border-radius:50%; background:var(--primary-tint); color:var(--primary-deep);
  font-size:14px; text-align:center; line-height:28px;
}
ol.steps li:after{ content:""; position:absolute; left:13.5px; top:33px; bottom:4px; width:1px; background:var(--primary-soft); }
ol.steps li:last-child:after{ display:none; }
ol.steps li .t{ font-size:15px; }
ol.steps li .d{ font-size:13.5px; color:var(--text-2); }

/* 键值对 */
.kv div{ padding:9px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.kv div:last-child{ border-bottom:0; }
.kv div em{ font-style:normal; color:var(--text-2); display:inline-block; min-width:96px; }
.kv div span{ color:var(--text-3); font-size:13.5px; }

/* FAQ 折叠 */
details.faq{ border:1px solid var(--border); border-radius:10px; margin-bottom:9px; background:#fff; }
details.faq summary{
  cursor:pointer; padding:12px 16px; font-size:14.5px; list-style:none;
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary:after{ content:"＋"; color:var(--primary); flex:none; }
details.faq[open] summary:after{ content:"−"; }
details.faq[open] summary{ color:var(--primary-deep); }
details.faq .bd{ padding:0 16px 14px; font-size:14px; color:var(--text-2); }
details.faq .bd p{ margin:0 0 8px; }
details.faq .bd p:last-child{ margin:0; }

/* 上一节 / 下一节 */
.pager{ display:flex; gap:12px; margin:4px 0 0; }
.pager a{
  flex:1 1 0; border:1px solid var(--border); border-radius:12px; background:#fff;
  padding:13px 18px; box-shadow:var(--shadow); color:var(--text);
}
.pager a:hover{ text-decoration:none; border-color:var(--primary-soft); }
.pager a .k{ font-size:12px; color:var(--text-3); }
.pager a .v{ font-size:14.5px; }
.pager a.nx{ text-align:right; }
.pager a.off{ visibility:hidden; }

mark{ background:#FFE7A8; color:var(--text); border-radius:3px; padding:0 2px; }
.empty{
  display:none; background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:40px 30px; text-align:center; color:var(--text-2); box-shadow:var(--shadow);
}
.empty b{ display:block; color:var(--text); font-size:16px; margin-bottom:6px; }

/* 回到顶部 */
.up{
  position:fixed; right:22px; bottom:24px; z-index:55; width:42px; height:42px;
  border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--text-2);
  box-shadow:var(--shadow-lg); cursor:pointer; font-size:16px;
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.up.on{ opacity:1; pointer-events:auto; }

.scrim{ display:none; position:fixed; inset:var(--top) 0 0; background:rgba(31,41,55,.34); z-index:40; }

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width:1080px){
  .hero h1{ font-size:25px; }
  .quick{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:980px){
  .top .menu{ display:block; order:-1; }
  .brand .tt i{ display:none; }
  .top .ver{ display:none; }
  .search{ max-width:none; }
  .side{
    position:fixed; top:var(--top); left:0; z-index:50; height:calc(100vh - var(--top));
    transform:translateX(-102%); transition:transform .22s ease; box-shadow:var(--shadow-lg);
    border-right:1px solid var(--border);
  }
  body.nav .side{ transform:none; }
  body.nav .scrim{ display:block; }
  .main{ padding:18px 16px 80px; }
  section.doc{ padding:20px 18px 22px; border-radius:14px; }
  .quick{ grid-template-columns:1fr; }
  .shots.c2,.shots.c3,.shots.ph{ grid-template-columns:1fr; }
  .shots.one figure{ width:min(320px,88%); }
  .hero{ padding:22px 20px; }
  /* 流程图转竖向：线改竖直，箭头朝下；节点压成单行，别让手机屏上一排空卡片 */
  .flow{ flex-direction:column; }
  .flow .a{ width:auto; height:26px; }
  .flow .n{ display:flex; align-items:baseline; gap:10px; padding:11px 14px; }
  .flow .n .k{ flex:none; }
  .flow .n .h{ flex:none; margin:0; }
  .flow .n .d{ flex:1 1 auto; }
  .flow .n .d span{ display:inline; }
  .flow .n .d span + span:before{ content:" · "; color:var(--text-3); }
  .flow .a:before{ left:50%; right:auto; top:4px; bottom:12px; width:1px; height:auto; }
  .flow .a:after{
    right:auto; left:50%; margin-left:-3px; top:auto; bottom:5px; margin-top:0;
    border-top:5px solid var(--primary); border-left:3px solid transparent;
    border-right:3px solid transparent; border-bottom:0;
  }
  .picks{ grid-template-columns:1fr; }
  .idx{ grid-template-columns:1fr; }
}

/* ------------------------------ 打印 ------------------------------ */
@media print{
  body{ background:#fff; font-size:11pt; }
  .top,.side,.bar,.up,.scrim,.pager,.empty{ display:none !important; }
  .wrap{ padding:0; display:block; }
  .main{ padding:0; }
  .main .inner{ max-width:none; }
  section.doc,.hero{ box-shadow:none; border:0; padding:0; margin:0 0 8mm; break-inside:avoid; }
  .shots{ break-inside:avoid; }
  a{ color:inherit; }
}


/* ==========================================================================
   四份文档：侧栏切换器 + 入口卡片（拆分日追加，不改既有规则）
   ========================================================================== */
.docpick{ padding:12px 10px 8px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.docpick .grp{ margin:0 0 6px 10px; }
.docpick a{ display:block; padding:7px 10px; border-radius:8px; font-size:13.5px;
  color:var(--text-2); line-height:1.5; }
.docpick a:hover{ background:var(--line); text-decoration:none; }
.docpick a.on{ background:var(--primary-tint); color:var(--primary-deep); }
.docpick a.all{ color:var(--text-3); font-size:12.5px; }
.docpick a.all:hover{ color:var(--primary-deep); }

.docs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:14px; margin:22px 0 8px; }
.dcard{ display:block; background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:18px; box-shadow:var(--shadow); }
.dcard:hover{ text-decoration:none; border-color:var(--primary-soft); box-shadow:var(--shadow-lg); }
.dcard .k{ display:inline-block; font-size:12px; color:var(--primary-deep);
  background:var(--primary-tint); border-radius:999px; padding:2px 10px; margin-bottom:10px; }
.dcard h3{ margin:0 0 8px; font-size:17px; color:var(--text); }
.dcard p{ margin:0 0 10px; font-size:13.5px; color:var(--text-2); line-height:1.75; }
.dcard .m{ font-size:12.5px; color:var(--text-3); }
.ver{ white-space:nowrap; }