/* 帮助中心样式：参考 720 云 wiki 的「顶栏 + 左树 + 正文 + 右目录」版式 */
:root{
  --brand:#2b6cf6;
  --brand-soft:#eef4ff;
  --text:#1f2430;
  --text-2:#5b6474;
  --text-3:#8c95a6;
  --line:#e8ecf3;
  --line-2:#f2f5f9;
  --bg:#f7f8fa;
  --white:#fff;
  --radius:8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--white);color:var(--text);
  font:400 15px/1.9 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- 顶栏 ---------- */
.hd{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line)}
.hd-in{max-width:1440px;margin:0 auto;height:58px;display:flex;align-items:center;gap:26px;padding:0 24px}
.brand{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--brand);color:#fff;font:700 13px/1 Arial;letter-spacing:.5px}
.brand-text{font-weight:600;font-size:16px}
.hd-nav{display:flex;gap:18px;font-size:14px}
.hd-nav a{color:var(--text-2)}
.hd-search{margin-left:auto;position:relative;width:300px;max-width:38vw}
.hd-search input{
  width:100%;height:34px;padding:0 12px 0 32px;border:1px solid var(--line);border-radius:17px;
  background:#fafbfd url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238c95a6' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat 11px center;
  font-size:13px;color:var(--text);outline:none;
}
.hd-search input:focus{border-color:#bcd0fb;background-color:#fff;box-shadow:0 0 0 3px rgba(43,108,246,.08)}
.qres{position:absolute;right:0;top:40px;width:420px;max-width:78vw;max-height:60vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px rgba(20,30,55,.12);padding:6px}
.qres a{display:block;padding:8px 10px;border-radius:6px;color:var(--text);font-size:14px}
.qres a:hover{background:var(--brand-soft);text-decoration:none}
.qres .qcat{font-size:12px;color:var(--text-3);margin-left:6px}
.qres .qempty{padding:10px;color:var(--text-3);font-size:13px}
.m-btn{display:none;height:32px;padding:0 12px;border:1px solid var(--line);background:#fff;border-radius:16px;font-size:13px;color:var(--text-2)}

/* ---------- 布局 ---------- */
.wrap{max-width:1440px;margin:0 auto;display:flex;align-items:flex-start;padding:0 24px}
.side{width:252px;flex:0 0 252px;position:sticky;top:58px;max-height:calc(100vh - 58px);overflow:auto;padding:22px 0 60px;border-right:1px solid var(--line-2)}
.side-in{padding-right:14px}
.main{flex:1 1 auto;min-width:0;max-width:860px;padding:26px 40px 80px}
.toc{width:196px;flex:0 0 196px;position:sticky;top:58px;max-height:calc(100vh - 58px);overflow:auto;padding:28px 0 60px 18px;font-size:13px}

/* ---------- 左树 ---------- */
.cat{margin-bottom:6px}
.cat-t{display:flex;align-items:center;gap:7px;padding:8px 10px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;border-radius:6px;user-select:none}
.cat-t:hover{background:#f6f8fc}
.cat-t .arw{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #9aa4b5;transition:transform .18s;flex:0 0 auto}
.cat.closed .arw{transform:rotate(-90deg)}
.cat ul{list-style:none;margin:2px 0 8px;padding:0 0 0 8px;border-left:1px solid var(--line-2);margin-left:14px}
.cat.closed ul{display:none}
.cat li a{display:block;padding:6px 10px;font-size:14px;color:var(--text-2);border-radius:6px;line-height:1.55}
.cat li a:hover{background:#f6f8fc;color:var(--text);text-decoration:none}
.cat li a.on{background:var(--brand-soft);color:var(--brand);font-weight:500}
.cat li a::before{content:'';display:inline-block;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid #c3cbd9;margin-right:8px;vertical-align:1px;transition:border-left-color .15s}
.cat li a:hover::before,.cat li a.on::before{border-left-color:var(--brand)}

/* ---------- 正文 ---------- */
.crumb{font-size:13px;color:var(--text-3);margin-bottom:14px}
.crumb a{color:var(--text-3)}
.crumb .sp{margin:0 6px}
.doc h1{font-size:28px;line-height:1.4;margin:0 0 24px;font-weight:600;letter-spacing:.2px}
.doc .meta{font-size:12px;color:var(--text-3);border-bottom:1px solid var(--line-2);padding-bottom:14px;margin-bottom:22px}
.doc h2{font-size:20px;margin:36px 0 14px;font-weight:600;padding-left:0;border-left:none}
.doc h2 .h2n{color:var(--brand);margin-right:6px}
.doc h3{font-size:16px;margin:22px 0 8px;font-weight:600;color:var(--text)}
.doc p{margin:10px 0;color:#2c3341}
.doc ul,.doc ol{margin:10px 0;padding-left:22px}
.doc li{margin:6px 0}
.doc strong{font-weight:600}
.doc code{background:#f4f6fa;border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;font:500 13px/1.6 Consolas,Menlo,monospace;color:#2b4a7d}
.doc blockquote{margin:14px 0;padding:10px 14px;background:#fbfcfe;border-left:3px solid #cddbfb;border-radius:0 6px 6px 0;color:var(--text-2);font-size:14px}
.doc blockquote p{margin:4px 0;color:inherit}
.doc .tip,.doc .warn{margin:14px 0;padding:11px 14px;border-radius:6px;font-size:14px;line-height:1.75}
.doc .tip{background:#f2f8f3;border:1px solid #dcefe0;color:#2f6b3d}
.doc .warn{background:#fff8f1;border:1px solid #f6e2c8;color:#8a5a1a}
.doc .tip b,.doc .warn b{font-weight:600}
.doc table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.doc th,.doc td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.doc th{background:#fafbfd;font-weight:600;color:var(--text-2)}
.doc img{max-width:100%;border-radius:6px;border:1px solid var(--line-2)}
.doc figure.shot{margin:16px 0 20px}
.doc figure.shot img{display:block;width:100%;border:1px solid var(--line);border-radius:8px;box-shadow:0 3px 14px rgba(20,30,55,.09)}
.doc figcaption{font-size:13px;color:var(--text-3);text-align:center;margin-top:8px}
.doc .steps{counter-reset:s}
.doc .steps>li{list-style:none;position:relative;padding-left:4px}
.doc .kbd{display:inline-block;border:1px solid #d6dbe4;border-bottom-width:2px;border-radius:4px;padding:0 5px;font-size:12px;background:#fafbfd;font-family:Consolas,monospace}

/* ---------- 上一篇/下一篇 ---------- */
.doc-foot{display:flex;gap:14px;margin-top:44px;padding-top:20px;border-top:1px solid var(--line-2)}
.pn{flex:1;display:block;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius);color:var(--text);font-size:14px;line-height:1.6}
.pn:hover{border-color:#c9d8fb;background:#fafcff;text-decoration:none}
.pn small{display:block;color:var(--text-3);font-size:12px}
.pn.next{text-align:right}
.pn[hidden]{display:none}

/* ---------- 反馈 ---------- */
.feedback{margin-top:22px;font-size:13px;color:var(--text-3);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.feedback button{height:30px;padding:0 14px;border:1px solid var(--line);background:#fff;border-radius:15px;font-size:13px;color:var(--text-2);cursor:pointer}
.feedback button:hover{border-color:#c9d8fb;color:var(--brand)}
#fbTip{color:var(--brand)}

/* ---------- 右侧目录 ---------- */
.toc-t{font-weight:600;color:var(--text-2);margin-bottom:8px;font-size:12px;letter-spacing:.4px}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin:5px 0}
.toc a{display:block;color:var(--text-3);font-size:13px;line-height:1.5;padding-left:10px;border-left:2px solid transparent}
.toc a:hover{color:var(--text);text-decoration:none}
.toc a.on{color:var(--brand);border-left-color:var(--brand)}

/* ---------- 页脚 ---------- */
.ft{border-top:1px solid var(--line-2);padding:18px 24px 30px;text-align:center;font-size:12px;color:var(--text-3)}

/* ---------- 移动端 ---------- */
@media (max-width:1180px){.toc{display:none}}
@media (max-width:900px){
  .hd-in{gap:14px;padding:0 14px}
  .hd-search{width:auto;flex:1;max-width:none}
  .m-btn{display:inline-block}
  .wrap{padding:0 14px}
  .side{display:none;position:fixed;left:0;top:58px;bottom:0;width:78vw;max-width:320px;background:#fff;z-index:40;max-height:none;border-right:1px solid var(--line);padding:14px 12px 40px;box-shadow:12px 0 30px rgba(20,30,55,.1)}
  .side.open{display:block}
  .main{padding:20px 0 60px;max-width:none}
  .doc h1{font-size:23px}
}
