/* =========================================================
   V2Ray官方中文网 · deepdoc.css
   问题诊断手册页:文档页头 / 章节排版 / 排查清单 / 诊断步骤 / 相关页面
   ========================================================= */

/* ---------- 文档页头 ---------- */
.doc-hero{padding:44px 0 8px}

.doc-hero__panel{
  position:relative;
  border-radius:var(--r-card);
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-back);
  padding:48px 52px 42px;
  overflow:hidden;
}
.doc-hero__panel::before{
  content:"";
  position:absolute;
  top:-140px;
  right:-140px;
  width:380px;
  height:380px;
  border-radius:50%;
  background:radial-gradient(circle,var(--accent-mist) 0%,transparent 68%);
  pointer-events:none;
}

.doc-hero__title{
  margin:20px 0 14px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(28px,3vw,42px);
  line-height:1.16;
  letter-spacing:-.02em;
  color:var(--ink);
  max-width:22em;
}

.doc-hero__lead{
  margin:0 0 24px;
  max-width:48em;
  font-size:16px;
  line-height:1.8;
  color:var(--ink-muted);
}
.doc-hero__lead strong{color:var(--ink)}
.doc-hero__lead a{
  color:var(--accent-dark);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:rgba(196,55,18,.35);
  text-underline-offset:3px;
}

.doc-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.doc-meta li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:0 14px;
  border-radius:var(--r-pill);
  border:1.5px solid var(--line);
  background:var(--bg);
  font-size:13px;
  font-weight:600;
  color:var(--ink-muted);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.doc-meta svg{
  width:14px;
  height:14px;
  color:var(--accent);
  flex:none;
}

/* ---------- 章节目录 ---------- */
.doc-toc{margin-top:36px}

/* ---------- 正文与章节 ---------- */
.docbody{padding:44px 0 96px}
.docbody .chapter{margin-top:76px}
.docbody .chapter:first-of-type{margin-top:52px}

.chapter__head{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-bottom:8px;
}
.chapter__no{
  flex:none;
  margin-top:7px;
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--accent);
}
.chapter__head h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(22px,2vw,28px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ink);
}
.chapter__sub{
  margin:0 0 28px;
  padding-left:52px;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-muted);
}

.docbody .chapter h3{
  margin-top:1.9em;
  margin-bottom:.7em;
}

/* 章节内表格:嵌套层级下的横向滚动防御 */
.docbody .chapter .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}

/* ---------- 排查清单 ---------- */
.checklist{
  margin:20px 0 26px;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.checklist li{
  position:relative;
  padding:13px 16px 13px 46px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:14px;
  font-size:14px;
  line-height:1.7;
  color:var(--ink);
  min-width:0;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:17px;
  top:18px;
  width:15px;
  height:15px;
  border-radius:5px;
  border:2px solid var(--teal);
  background:var(--panel);
}
.checklist li strong{color:var(--ink)}
.checklist li .muted{color:var(--ink-muted)}

/* ---------- 诊断步骤 ---------- */
.steps{
  margin:20px 0 26px;
  padding:0;
  list-style:none;
  counter-reset:step;
}
.steps li{
  position:relative;
  counter-increment:step;
  padding:0 0 22px 46px;
  font-size:15px;
  line-height:1.75;
  color:var(--ink);
  min-width:0;
}
.steps li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--accent-tint);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.steps li::after{
  content:"";
  position:absolute;
  left:14px;
  top:34px;
  bottom:2px;
  width:2px;
  background:var(--line);
}
.steps li:last-child::after{display:none}
.steps li strong{color:var(--ink)}

/* ---------- 日志关键字 ---------- */
.logkeys{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 8px;
}
.logkey{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 12px;
  border-radius:var(--r-pill);
  border:1.5px solid var(--line);
  background:var(--bg);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.logkey svg{
  width:12px;
  height:12px;
  color:var(--ok);
  flex:none;
}

/* ---------- 相关页面 ---------- */
.related{
  margin-top:80px;
  padding:34px 38px;
  border-radius:var(--r-card);
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-back);
}
.related__title{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:800;
  color:var(--ink);
}
.related__desc{
  margin:0 0 20px;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-muted);
  max-width:56em;
}
.related__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.related__links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:8px 16px;
  border-radius:var(--r-pill);
  border:1.5px solid var(--line);
  background:var(--bg);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  transition:border-color .18s ease,color .18s ease,transform .18s ease;
}
.related__links a:hover{
  border-color:var(--accent);
  color:var(--accent-dark);
  transform:translateY(-1px);
}
.related__links svg{
  width:14px;
  height:14px;
  color:var(--accent);
  flex:none;
}

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .doc-hero{padding:24px 0 4px}
  .doc-hero__panel{padding:28px 20px 26px;border-radius:var(--r-sheet)}
  .doc-hero__title{margin:16px 0 12px;font-size:clamp(24px,6.4vw,28px)}
  .doc-hero__lead{font-size:14px}

  .doc-meta{gap:8px}
  .doc-meta li{height:32px;padding:0 11px;font-size:12px}

  .doc-toc{margin-top:24px}

  .docbody{padding:32px 0 64px}
  .docbody .chapter{margin-top:52px}
  .docbody .chapter:first-of-type{margin-top:36px}

  .chapter__head{gap:12px}
  .chapter__no{margin-top:5px;font-size:12px}
  .chapter__head h2{font-size:20px}
  .chapter__sub{padding-left:0;margin-bottom:20px;font-size:13px}

  .checklist li{padding:12px 14px 12px 40px}
  .checklist li::before{left:14px;top:16px;width:14px;height:14px}

  .steps li{padding-left:40px}
  .steps li::before{width:26px;height:26px;font-size:12px}
  .steps li::after{left:12px;top:30px}

  .logkey{height:30px;font-size:11px}

  .related{margin-top:52px;padding:24px 18px;border-radius:var(--r-sheet)}
  .related__links a{width:100%;justify-content:flex-start}
}