/* ============================================================================
   docs.css —— 文档中心（索引页 + 文章页共用）
   依赖 /assets/tokens.css 提供的颜色与字体变量
   ============================================================================ */

:root{
  --doc-bg:#EFF1FA;          /* 文档区专属的淡紫底，和商城区做区分 */
  --doc-card:#FFFFFF;
  --doc-line:#E6E9F2;
  --doc-line-2:#F0F2F8;
  --doc-head:#EEF0FA;        /* 表头底色 */
  --doc-sh:0 2px 12px rgba(28,38,92,.05);
  --doc-sh-h:0 8px 24px rgba(28,38,92,.10);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);background:var(--doc-bg);color:var(--ink-2);
  -webkit-font-smoothing:antialiased;font-size:15px;line-height:1.75;
}
h1,h2,h3{letter-spacing:-.022em;font-weight:800;line-height:1.25;color:var(--ink)}
a{color:var(--blue);text-decoration:none}
button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer}
img{max-width:100%;display:block}
.wrap{max-width:880px;margin:0 auto;padding:0 24px}

/* ---------------- 顶栏 ---------------- */
nav.dnav{
  background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--doc-line);position:sticky;top:0;z-index:100;
}
.dnav-in{max-width:880px;margin:0 auto;height:60px;padding:0 24px;display:flex;align-items:center;gap:8px}
.dbrand{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink-2)}
.dbrand span{color:var(--cyan)}
.dnav-sp{flex:1}
.dnav-a{font-size:13px;font-weight:600;color:var(--gray-1);padding:8px 12px;border-radius:8px;
  transition:background .18s var(--ease),color .18s var(--ease)}
.dnav-a:hover{background:#E9EDFA;color:var(--blue-d)}

/* ---------------- 索引页头部 + 搜索 ---------------- */
.dhead{padding:36px 0 24px}
.dhead .eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.dhead h1{font-size:32px;margin-bottom:10px}
.dhead p{font-size:15px;color:var(--gray-2);max-width:60ch}

.searchbar{display:flex;gap:12px;padding:0 0 28px}
.searchbox{
  flex:1;position:relative;background:var(--doc-card);border-radius:12px;
  box-shadow:var(--doc-sh);display:flex;align-items:center;
}
.searchbox svg{position:absolute;left:18px;width:19px;height:19px;stroke:var(--gray-3);
  fill:none;stroke-width:2;pointer-events:none}
.searchbox input{
  width:100%;border:none;outline:none;background:none;padding:16px 18px 16px 50px;
  font-family:inherit;font-size:15px;color:var(--ink-2);border-radius:12px;
}
.searchbox input::placeholder{color:var(--gray-3)}
.searchbox:focus-within{box-shadow:0 0 0 2px var(--blue),var(--doc-sh)}
.searchbtn{
  flex-shrink:0;background:var(--blue);color:#fff;border-radius:12px;padding:0 28px;
  font-size:15px;font-weight:700;transition:background .18s var(--ease);
}
.searchbtn:hover{background:var(--blue-d)}

/* ---------------- 分类筛选 ---------------- */
.cats{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:20px}
.cat{
  background:var(--doc-card);border:1px solid var(--doc-line);border-radius:100px;
  padding:7px 16px;font-size:13px;font-weight:600;color:var(--gray-1);
  transition:all .18s var(--ease);
}
.cat:hover{border-color:var(--blue-line)}
.cat.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------------- 文章卡片列表 ---------------- */
.doclist{display:grid;gap:16px;padding-bottom:40px}
.doccard{
  display:flex;align-items:center;gap:20px;background:var(--doc-card);border-radius:16px;
  padding:20px;box-shadow:var(--doc-sh);transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.doccard:hover{box-shadow:var(--doc-sh-h);transform:translateY(-2px)}
.thumb{
  width:132px;height:100px;border-radius:12px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,#DDE3F5,#C9D3EE);
  display:flex;align-items:center;justify-content:center;
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb svg{width:38px;height:38px;stroke:#7B88B8;fill:none;stroke-width:1.6}
.docinfo{min-width:0;flex:1}
.doctitle{display:block;font-size:17px;font-weight:800;color:var(--ink);line-height:1.4;margin-bottom:12px;letter-spacing:-.015em}
.doccard:hover .doctitle{color:var(--blue-d)}
.docmeta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--gray-3)}
.tag{
  background:#E9F1FE;color:var(--blue-d);border-radius:6px;padding:4px 12px;
  font-size:12.5px;font-weight:700;
}
.docmeta .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.noresult{background:var(--doc-card);border-radius:16px;padding:40px 24px;text-align:center;
  color:var(--gray-3);font-size:14px;box-shadow:var(--doc-sh)}

/* ---------------- 文章页 ---------------- */
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:24px 0 0;font-size:13.5px;color:var(--gray-2)}
.crumb a{color:var(--gray-2)}
.crumb a:hover{color:var(--blue)}
.crumb .sep{color:var(--gray-3);font-size:12px}
.crumb .cur{color:var(--ink-2)}

.arthead{padding:20px 0 24px;border-bottom:1px solid var(--doc-line);margin-bottom:32px}
.arthead h1{font-size:34px;line-height:1.25;margin-bottom:18px}
.artmeta{display:flex;flex-wrap:wrap;gap:24px;font-size:14px;color:var(--gray-2)}
.artmeta div{display:flex;align-items:center;gap:8px}
.artmeta svg{width:17px;height:17px;stroke:var(--gray-3);fill:none;stroke-width:1.7}

.art section{margin-bottom:40px}
.art h2{
  font-size:22px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--doc-line);
}
.art h3{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.art p{margin-bottom:16px;color:var(--gray-1)}
.art p:last-child{margin-bottom:0}
.art ul{list-style:none;margin-bottom:16px}
.art ul li{position:relative;padding-left:22px;margin-bottom:10px;color:var(--gray-1)}
.art ul li::before{content:'';position:absolute;left:5px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--blue-line)}

/* 结论 / 提示卡片 */
.card{background:var(--doc-card);border-radius:16px;padding:28px;box-shadow:var(--doc-sh)}
.card .label{font-size:14px;font-weight:700;margin-bottom:16px}
.card .label.ok{color:var(--green)}
.card .label.warn{color:var(--amber)}
.card .lead{font-size:19px;font-weight:700;color:var(--ink-2);line-height:1.6;margin-bottom:16px;letter-spacing:-.015em}
.card.green{background:#EAF7EF;box-shadow:none;border:1px solid #C9E9D5}
.card.green h3{color:#186E31;font-size:20px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #C9E9D5}
.card.green p{color:#26603B}

/* 表格 */
.tablewrap{background:var(--doc-card);border-radius:16px;padding:8px;box-shadow:var(--doc-sh);overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:480px}
th,td{padding:16px 18px;text-align:left;font-size:14.5px;line-height:1.6;border:1px solid var(--doc-line)}
th{background:var(--doc-head);font-weight:700;color:var(--ink);font-size:15px}
td{color:var(--gray-1)}
td:first-child,th:first-child{font-weight:700;color:var(--ink-2)}
tr:hover td{background:#FAFBFE}

/* 数据条 */
.bars{display:grid;gap:16px;margin-bottom:20px}
.bar{background:var(--doc-card);border-radius:16px;padding:22px 24px;box-shadow:var(--doc-sh)}
.bar .k{font-family:var(--mono);font-size:14px;color:var(--gray-2);margin-bottom:6px}
.bar .v{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.025em;margin-bottom:16px}
.bar .track{height:12px;border-radius:100px;background:#EDEFF6;overflow:hidden}
.bar .fill{height:100%;border-radius:100px;transition:width .6s var(--ease)}
.bar .fill.ok{background:#3BAE6E}
.bar .fill.mid{background:#E8A32C}
.bar .fill.bad{background:#D9534F}
.barnote{font-size:14.5px;color:var(--gray-1);line-height:1.8}

/* 要点卡片组 */
.points{display:grid;gap:16px}
.point{background:var(--doc-card);border-radius:16px;padding:22px 24px;box-shadow:var(--doc-sh)}
.point h3{margin-bottom:8px}
.point p{font-size:14.5px;color:var(--gray-2);margin:0}

/* 文章底部 */
.artfoot{border-top:1px solid var(--doc-line);padding-top:28px;margin-top:8px}
.cta-box{
  background:var(--doc-card);border-radius:16px;padding:24px;box-shadow:var(--doc-sh);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.cta-box .t{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px}
.cta-box .s{font-size:13.5px;color:var(--gray-2)}
.cta-btn{
  background:var(--blue);color:#fff;border-radius:10px;padding:13px 26px;font-size:15px;font-weight:700;
  white-space:nowrap;transition:background .18s var(--ease),transform .15s var(--ease);
}
.cta-btn:hover{background:var(--blue-d);transform:translateY(-1px)}

footer.dfoot{padding:32px 0 48px;font-size:13px;color:var(--gray-3);text-align:center;line-height:1.9}
footer.dfoot a{color:var(--gray-2)}
footer.dfoot .sep{margin:0 8px;color:var(--doc-line)}

/* ---------------- 移动端 ---------------- */
@media (max-width:640px){
  .wrap,.dnav-in{padding-left:16px;padding-right:16px}
  .dhead{padding:24px 0 20px}
  .dhead h1{font-size:25px}
  .searchbar{gap:8px}
  .searchbox input{padding:14px 14px 14px 46px;font-size:14px}
  .searchbtn{padding:0 20px;font-size:14px}
  .doccard{gap:14px;padding:16px;align-items:flex-start}
  .thumb{width:96px;height:96px}
  .doctitle{font-size:15.5px;margin-bottom:10px}
  .docmeta{gap:10px;font-size:12px}
  .tag{padding:3px 9px;font-size:11.5px}
  .arthead h1{font-size:25px}
  .artmeta{gap:16px;font-size:13px}
  .art h2{font-size:19px}
  .card{padding:20px}
  .card .lead{font-size:17px}
  .bar{padding:18px}
  .bar .v{font-size:22px}
  .point{padding:18px}
  th,td{padding:12px 14px;font-size:13.5px}
  .cta-box{padding:20px}
  .cta-btn{width:100%;text-align:center}
}

/* ============================================================================
   第二批组件：代码块 / 步骤卡 / 警示卡 / 参考值列表 / 拓扑卡
   ============================================================================ */

/* 代码块 */
pre.code{
  background:#EDEFF9;border-radius:10px;padding:18px 20px;overflow-x:auto;
  font-family:var(--mono);font-size:13.5px;line-height:1.9;color:#3A4055;
  margin-bottom:0;-webkit-overflow-scrolling:touch;
}
pre.code code{font-family:inherit;white-space:pre}
.art p + pre.code{margin-top:-4px}
.art pre.code + p{margin-top:16px}

/* 带标题的代码卡（如：Ubuntu / Debian） */
.codecard{background:var(--doc-card);border-radius:16px;padding:24px;box-shadow:var(--doc-sh);margin-bottom:16px}
.codecard:last-child{margin-bottom:0}
.codecard h3{font-size:16px;font-weight:700;margin-bottom:14px}

/* 步骤卡 */
.stepcards{display:grid;gap:16px}
.stepcard{background:var(--doc-card);border-radius:16px;padding:22px 24px;box-shadow:var(--doc-sh)}
.stepcard .n{font-size:13.5px;color:var(--gray-3);margin-bottom:6px}
.stepcard h3{font-size:16.5px;font-weight:700;margin-bottom:10px}
.stepcard p{font-size:14.5px;color:var(--gray-2);margin:0}

/* 黄色警示卡 */
.card.amber{background:#FDF8E7;border:1px solid #F2E4B8;box-shadow:none}
.card.amber h3{font-size:20px;color:#1a1a2e;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #F2E4B8}
.card.amber p{color:#6B6250}
.card.amber p:last-child{margin-bottom:0}

/* 参考值列表（Ping / Jitter） */
.reflist{background:var(--doc-card);border-radius:16px;padding:24px;box-shadow:var(--doc-sh);margin-bottom:16px}
.reflist:last-child{margin-bottom:0}
.reflist h3{font-size:16px;font-weight:700;margin-bottom:14px}
.reflist ul{list-style:none;margin:0}
.reflist li{padding-left:0;margin-bottom:12px;color:var(--gray-1);font-size:14.5px;line-height:1.7}
.reflist li:last-child{margin-bottom:0}
.reflist li::before{display:none}
.reflist li b{font-family:var(--mono);font-weight:600;color:var(--ink-2);margin-right:2px}

/* 推荐拓扑卡 */
.topo{background:var(--doc-card);border-radius:16px;padding:24px;box-shadow:var(--doc-sh)}
.topo .k{font-size:13.5px;color:var(--gray-3);margin-bottom:10px}
.topo .v{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.015em;line-height:1.5;margin-bottom:14px}
.topo p{font-size:14.5px;color:var(--gray-2);margin:0}

/* 绿色卡片里的多段落 */
.card.green p + p{margin-top:14px}

@media (max-width:640px){
  pre.code{padding:14px 16px;font-size:12.5px}
  .codecard{padding:18px}
  .stepcard{padding:18px}
  .reflist{padding:18px}
  .topo{padding:18px}
  .topo .v{font-size:17px}
  .card.amber h3{font-size:18px}
}

/* 白色卡片内的标题（带分隔线）—— 用于「知识普及」「关于 IP 评分的说明」这类 */
.card > h3{
  font-size:20px;font-weight:800;color:var(--ink);margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--doc-line);letter-spacing:-.015em;
}
.card > h3:first-child{margin-top:0}
.card .label + h3{margin-top:4px}
.card p + p{margin-top:14px}
@media (max-width:640px){ .card > h3{font-size:17px} }