/* dtzsmart.com /docs/ — documentation area.
   Loaded after site.css: reuses the site shell (.top, nav, footer, tokens). */

/* ---- 三层壳 ---- */
.doc-shell{
  display:grid;
  grid-template-columns:248px minmax(0,1fr) 210px;
  align-items:start;
  background:#fff;
  border-bottom:1px solid var(--line);
  min-height:calc(100vh - 60px - 172px);
}
.doc-shell.no-toc{grid-template-columns:248px minmax(0,1fr)}

/* ---- 左树 ---- */
.tree{
  position:sticky; top:60px; align-self:start;
  max-height:calc(100vh - 60px); overflow-y:auto;
  padding:24px 14px 32px 18px; background:#FBFCFE;
  border-right:1px solid var(--line);
  font-size:12.5px;
}
.tree .tree-search{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:7px 10px; margin-bottom:16px;
}
.tree .tree-search input{
  border:0; outline:none; background:transparent; width:100%;
  font-family:var(--sans); font-size:12.5px; color:var(--ink);
}
.tree .tree-search input::placeholder{color:var(--ink3)}
.tree .tree-search svg{flex:none; color:var(--ink3)}
.tree .grp{margin:0 0 4px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink3); text-transform:uppercase}
.tree .grp-block{margin-bottom:16px}
.tree a{
  display:block; padding:4px 8px; margin-left:-8px; border-radius:5px;
  color:var(--ink2); text-decoration:none; line-height:1.5;
}
.tree a:hover{color:var(--navy); background:#EDF1FB}
.tree a.cur{color:var(--navy); font-weight:600; background:#EDF1FB}

/* ---- 正文列 ---- */
.doc-main{padding:34px 56px 52px}
.doc-main h1{
  margin:8px 0 10px; font-size:28px; line-height:1.3; letter-spacing:-.01em;
  font-weight:700; color:var(--ink);
}
.crumb{font-size:12px; color:var(--ink3)}
.crumb a{color:var(--ink3); text-decoration:none}
.crumb a:hover{color:var(--navy)}
.crumb span{margin:0 6px; color:#C3CEE4}
.doc-meta{font-size:12px; color:var(--ink3); font-family:var(--mono); letter-spacing:.01em}
.doc-lede{margin:14px 0 26px; font-size:15px; line-height:1.78; color:var(--ink2); max-width:44em}

.prose{font-size:14px; line-height:1.82; color:#33405A; max-width:46em}
.prose h2{
  margin:34px 0 12px; font-size:17px; font-weight:700; color:var(--ink);
  letter-spacing:-.005em; scroll-margin-top:76px;
}
.prose h3{margin:24px 0 8px; font-size:15px; font-weight:600; color:var(--ink)}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px; padding-left:20px}
.prose li{margin-bottom:7px}
.prose b,.prose strong{color:var(--ink); font-weight:600}
.prose code{
  font-family:var(--mono); font-size:12.5px; background:#F3F5F9;
  border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:#1B2C50;
}
.prose a{color:var(--navy); text-decoration:none; border-bottom:1px solid #C6D2EC}
.prose a:hover{border-bottom-color:var(--navy)}

/* 编号步骤 */
.prose ol.steps{list-style:none; padding:0; margin:0 0 20px; counter-reset:st}
.prose ol.steps > li{
  position:relative; padding-left:34px; margin-bottom:12px; counter-increment:st;
}
.prose ol.steps > li::before{
  content:counter(st); position:absolute; left:0; top:2px;
  width:20px; height:20px; border-radius:50%; background:#EDF1FB; color:var(--navy);
  font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center;
}

/* 提示 / 警告 */
.note{
  margin:0 0 20px; padding:12px 14px; border-radius:8px;
  background:#EDF1FB; color:#1A3989; font-size:13px; line-height:1.72;
}
.note b{color:#12295F}
.note.warn{background:#FDF3E7; color:#8A4308}
.note.warn b{color:#6B3306}
.note .lbl{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:4px; opacity:.75;
}

/* 截图位 */
.figure{margin:0 0 20px}
.figure .ph{
  border:1.5px dashed #BCC7DA; border-radius:8px; height:220px;
  background:repeating-linear-gradient(135deg,#FAFBFE 0 10px,#F4F6FB 10px 20px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; color:#93A0B4;
}
.figure figcaption{margin-top:7px; font-size:11.5px; color:var(--ink3)}

/* 视频外链 */
.bili{
  margin:0 0 20px; border:1px solid var(--line); border-radius:10px;
  background:linear-gradient(160deg,#16213A,#0D1A38); color:#fff;
  padding:22px 20px; display:flex; align-items:center; gap:16px; text-decoration:none;
}
.bili:hover{border-color:#3E6FD0}
.bili .play{
  flex:none; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.bili .t{font-size:14px; font-weight:600}
.bili .s{font-size:12px; color:#9FB0CC; margin-top:3px}

/* 相关 / 翻页 */
.related{
  margin:34px 0 0; padding:14px 16px; border-radius:8px; background:#F3F5F9;
  font-size:12.5px;
}
.related .t{font-weight:600; color:var(--ink); margin-bottom:7px}
.related a{display:block; color:var(--navy); text-decoration:none; padding:2px 0}
.related a:hover{text-decoration:underline}

.pager{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0 0}
.pager a{
  display:block; padding:13px 15px; border-radius:9px; background:#F3F5F9;
  text-decoration:none; border:1px solid transparent; transition:.15s;
}
.pager a:hover{border-color:#C3CEE4; background:#fff}
.pager .k{font-size:10.5px; color:var(--ink3); margin-bottom:3px}
.pager .v{font-size:13px; font-weight:600; color:var(--ink)}
.pager a.next{text-align:right}

/* ---- 右侧目录 ---- */
.toc{
  position:sticky; top:60px; align-self:start;
  padding:40px 16px 24px 20px; background:#FBFCFE;
  border-left:1px solid var(--line); font-size:12.5px;
  max-height:calc(100vh - 60px); overflow-y:auto;
}
.toc .t{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink3); text-transform:uppercase; margin-bottom:10px}
.toc a{display:block; padding:3px 0; color:var(--ink2); text-decoration:none; line-height:1.5}
.toc a:hover{color:var(--navy)}
.toc a.on{color:var(--navy)}

/* ---- 索引页 ---- */
.doc-hero{
  background:#fff; border-bottom:1px solid var(--line);
  padding:52px 32px 40px; text-align:center;
}
.doc-hero .eyebrow{margin-bottom:16px}
.doc-hero h1{margin:0 0 14px; font-size:40px; line-height:1.22; letter-spacing:-.02em; font-weight:700}
.doc-hero .sub{margin:0 auto; font-size:16px; line-height:1.7; color:var(--ink2); max-width:38em}
.doc-search{
  position:relative; max-width:722px; margin:26px auto 12px;
}
.doc-search input{
  width:100%; height:54px; border:1px solid var(--line); border-radius:11px;
  background:#fff; padding:0 44px 0 42px; font-family:var(--sans); font-size:15px; color:var(--ink);
  outline:none; transition:.15s;
}
.doc-search input:focus{border-color:#B9C7E6; box-shadow:0 0 0 3px #EDF1FB}
.doc-search input::placeholder{color:var(--ink3)}
.doc-search .i{position:absolute; left:15px; top:17px; color:var(--ink3)}
.doc-search kbd{
  position:absolute; right:14px; top:16px; font-family:var(--mono); font-size:11px;
  color:var(--ink3); background:#F3F5F9; border-radius:5px; padding:2px 7px;
}
.quick{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:4px}
.quick a{
  font-size:11.5px; color:var(--ink2); background:#F3F5F9; border-radius:999px;
  padding:4px 11px; text-decoration:none;
}
.quick a:hover{color:var(--navy); background:#EDF1FB}

.doc-index{padding:36px 32px 52px; background:var(--bg)}
.doc-index .head{display:flex; align-items:baseline; margin-bottom:18px}
.doc-index .head h2{margin:0; font-size:18px; font-weight:600}
.doc-index .head span{margin-left:auto; font-size:12px; color:var(--ink3)}
.topics{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.topic{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px;
  display:flex; flex-direction:column;
}
.topic .top{display:flex; align-items:center; gap:10px; margin-bottom:11px}
.topic .ico{
  width:34px; height:34px; border-radius:8px; background:#EDF1FB; color:var(--navy);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.topic h3{margin:0; font-size:15px; font-weight:600}
.topic .d{margin:0 0 12px; font-size:13px; line-height:1.68; color:var(--ink2)}
.topic .links{margin-top:auto}
.topic .links a{
  display:block; font-size:12.5px; color:var(--navy); text-decoration:none; padding:3px 0;
}
.topic .links a:hover{text-decoration:underline}
.topic .more{margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--ink3)}
.topic.help{background:var(--navy); border-color:var(--navy)}
.topic.help h3{color:#fff}
.topic.help .d{color:#C3CEE4}
.topic.help .links a{color:#fff}
.topic.help .links .mute{color:#8FA8D6}
.topic.help .more{color:#8FA8D6}

/* 搜索结果 */
.sr-wrap{padding:28px 32px 52px; background:var(--bg); min-height:60vh}
.sr-list{max-width:760px}
.sr-item{
  display:block; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; margin-bottom:10px; text-decoration:none;
}
.sr-item:hover{border-color:#C3CEE4}
.sr-item .g{font-family:var(--mono); font-size:10.5px; color:var(--ink3); letter-spacing:.06em; text-transform:uppercase}
.sr-item .t{font-size:14.5px; font-weight:600; color:var(--ink); margin:4px 0 5px}
.sr-item .s{font-size:12.5px; color:var(--ink2); line-height:1.6}
.sr-empty{font-size:14px; color:var(--ink2); padding:20px 0}
.sr-empty b{color:var(--ink)}

/* 文档页脚 */
.doc-foot{background:#fff; border-top:1px solid var(--line); padding:26px 32px; font-size:12px; color:var(--ink3)}
.doc-foot .row{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.doc-foot a{color:var(--ink2); text-decoration:none}
.doc-foot a:hover{color:var(--navy)}
.doc-foot .ver{margin-left:auto; font-family:var(--mono)}

/* ---- 响应式 ---- */
@media (max-width:1120px){
  .doc-shell{grid-template-columns:230px minmax(0,1fr)}
  .toc{display:none}
  .topics{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .doc-shell{display:block}
  .tree{
    position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line);
    padding:14px 16px; display:flex; gap:8px; overflow-x:auto; white-space:nowrap;
  }
  .tree .tree-search{display:none}
  .tree .grp-block{margin:0; display:flex; gap:6px; align-items:center}
  .tree .grp{display:none}
  .tree a{margin:0; background:#F3F5F9; border-radius:6px; padding:5px 10px}
  .doc-main{padding:22px 20px 40px}
  .doc-main h1{font-size:23px}
  .doc-hero{padding:34px 20px 28px}
  .doc-hero h1{font-size:29px}
  .doc-hero .sub{font-size:14px}
  .doc-index{padding:24px 20px 40px}
  .topics{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .sr-wrap{padding:20px}
  .prose{font-size:13.5px}
}