/* ============================================================
   Clash新手指南 · 「组装式图解说明书」设计系统 —— 基础层
   纸面线稿风:暖米白纸底 / 2px 近黑粗描边 / 全站直角
   零投影 · 零渐变 · 零光晕
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  --paper:#F5EFE2;          /* 纸底 */
  --panel:#FBF7EC;          /* 面板一级 */
  --panel-2:#EDE4CF;        /* 面板二级 */
  --ink:#17130E;            /* 近黑描边 / 主文字 */
  --ink-soft:#5F574A;       /* 次要文字 */
  --accent:#F25C05;         /* 警示橙 */
  --accent-deep:#C24503;    /* 警示橙(按下/悬停) */
  --ok:#2E7D46;             /* 成功 */
  --warn:#F25C05;           /* 警告 */
  --err:#B3261E;            /* 错误 */
  --font-display:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','Inter','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Courier New',monospace;
  --line:2px;               /* 全站描边粗细 */
  --gutter:24px;            /* 版心左右留白 */
  --head-h:70px;            /* 页头高度 */
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
html.nav-open{overflow:hidden;}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
img,svg{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:none;}
table{border-collapse:collapse;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* ---------- 排版 ---------- */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.25;}
.kicker{
  font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);
  letter-spacing:.14em;margin-bottom:10px;
}
.sec-title{font-size:clamp(26px,3vw,38px);font-weight:900;letter-spacing:.01em;}
.sec-lead{margin-top:10px;font-size:15px;line-height:1.85;color:var(--ink-soft);max-width:640px;}

/* 行内 code:超长订阅 URL / 安装包文件名必须可断行(窄屏防溢出) */
:not(pre)>code{
  font-family:var(--font-mono);font-size:.88em;
  background:var(--panel);border:1px solid var(--ink);
  padding:1px 6px;overflow-wrap:anywhere;
}
pre{
  border:var(--line) solid var(--ink);background:var(--panel);
  padding:14px 18px;margin:16px 0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
}
pre code{
  font-family:var(--font-mono);font-size:13px;line-height:1.7;
  background:none;border:none;padding:0;white-space:pre;
}

/* ---------- 版心 / 区块节奏 ---------- */
/* 铁律:任何断点下 .wrap 都保留左右内边距,严禁归零 */
.wrap{max-width:1160px;margin-inline:auto;padding-inline:var(--gutter);}
/* 铁律:区块节奏只声明纵向 padding,禁止 padding:Y 0 简写 */
.sec{padding-top:72px;padding-bottom:72px;position:relative;overflow-x:clip;}
.sec-alt{background:var(--panel);border-top:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);}
.sec-head{margin-bottom:34px;}

/* ---------- 说明书裁切角标记 ---------- */
.crop{position:fixed;width:18px;height:18px;z-index:60;pointer-events:none;}
.crop-tl{top:10px;left:10px;border-top:var(--line) solid var(--ink);border-left:var(--line) solid var(--ink);}
.crop-tr{top:10px;right:10px;border-top:var(--line) solid var(--ink);border-right:var(--line) solid var(--ink);}
.crop-bl{bottom:10px;left:10px;border-bottom:var(--line) solid var(--ink);border-left:var(--line) solid var(--ink);}
.crop-br{bottom:10px;right:10px;border-bottom:var(--line) solid var(--ink);border-right:var(--line) solid var(--ink);}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:900;font-size:16px;
  padding:13px 26px;border:var(--line) solid var(--ink);
  cursor:pointer;
}
.btn-main{background:var(--accent);color:var(--ink);}
.btn-main:hover{background:var(--accent-deep);}
.btn-sub{background:var(--panel);color:var(--ink);}
.btn-sub:hover{background:var(--panel-2);}
.btn .arr{font-family:var(--font-mono);font-weight:700;}
.btn-s{padding:9px 16px;font-size:14px;}

/* ---------- 通用面板 ---------- */
.panel{border:var(--line) solid var(--ink);background:var(--panel);padding:20px 22px;min-width:0;}
.panel-2{background:var(--panel-2);}

/* ---------- SVG 线稿工具类(全站图解共用) ---------- */
.ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;}
.ln-thick{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:square;stroke-linejoin:miter;}
.ln-fill{fill:var(--panel);stroke:var(--ink);stroke-width:2;}
.ln-fill2{fill:var(--panel-2);stroke:var(--ink);stroke-width:2;}
.ln-solid{fill:var(--ink);stroke:none;}
.acc-dash{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:9 7;stroke-linecap:square;}
.acc-fill{fill:var(--accent);stroke:var(--ink);stroke-width:2;stroke-linejoin:miter;}
.acc-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:square;}
.svg-mono{font-family:var(--font-mono);font-size:12px;fill:var(--text,#17130E);fill:var(--ink);}
.svg-mono-s{font-family:var(--font-mono);font-size:10px;fill:var(--ink-soft);}
.svg-bold{font-family:var(--font-display);font-weight:900;font-size:12px;fill:var(--ink);}
.svg-warn-mark{font-family:var(--font-display);font-weight:900;font-size:13px;fill:var(--panel);}

/* ---------- 头部导航(header.js 注入) ---------- */
.site-head{
  position:relative;z-index:80;
  display:flex;align-items:center;gap:26px;
  height:var(--head-h);padding-left:48px;padding-right:48px;
  border-bottom:var(--line) solid var(--ink);
  background:var(--panel);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0;}
.brand-mark{width:34px;height:34px;flex-shrink:0;}
.brand-name{font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:.02em;white-space:nowrap;}
.brand-tag{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);
  border-left:var(--line) solid var(--ink);
  padding-left:12px;margin-left:2px;line-height:1.3;white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto;}
.nav a{font-size:15px;font-weight:500;color:var(--ink-soft);padding-top:4px;padding-bottom:4px;white-space:nowrap;}
.nav a:hover{color:var(--ink);}
.nav a.on{color:var(--ink);font-weight:900;border-bottom:3px solid var(--ink);}

.head-tools{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.lang-box{position:relative;}
.lang-pick{
  font-family:var(--font-body);font-size:13px;font-weight:700;
  border:var(--line) solid var(--ink);background:var(--paper);
  padding:6px 12px;min-height:34px;cursor:pointer;
}
.lang-pick:hover{background:var(--panel-2);}
.lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:150px;
  border:var(--line) solid var(--ink);background:var(--panel);z-index:95;
}
.lang-menu[hidden]{display:none;}
.lang-menu li + li{border-top:1px solid var(--panel-2);}
.lang-menu a{display:block;padding:10px 14px;font-size:13px;font-weight:500;}
.lang-menu a:hover{background:var(--panel-2);}
.lang-menu a.is-now{font-weight:900;background:var(--panel-2);}

.nav-burger{
  display:none;min-width:44px;min-height:44px;
  border:var(--line) solid var(--ink);background:var(--paper);
  cursor:pointer;align-items:center;justify-content:center;
}
.nav-burger:hover{background:var(--panel-2);}
.burger-bars{display:flex;flex-direction:column;gap:5px;width:18px;}
.burger-bars i{display:block;height:2px;background:var(--ink);}

/* 移动端抽屉:实色不透明背景,整行可点,内部可滚且不带动背景 */
.drawer{
  position:absolute;top:100%;left:0;right:0;z-index:90;
  background:var(--panel);
  border-bottom:3px solid var(--ink);
  max-height:calc(100dvh - var(--head-h));
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer[hidden]{display:none;}
.drawer-link{
  display:block;padding:14px var(--gutter);
  font-size:16px;font-weight:700;
  border-top:1px solid var(--panel-2);
}
.drawer-link:hover{background:var(--panel-2);}
.drawer-link.on{border-left:6px solid var(--accent);background:var(--panel-2);font-weight:900;}
.drawer-cap{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);
  letter-spacing:.14em;
  padding:14px var(--gutter) 4px;
  border-top:var(--line) dashed var(--ink);margin-top:6px;
}
.drawer-lang{
  display:block;padding:12px var(--gutter);
  font-size:15px;font-weight:500;
  border-top:1px solid var(--panel-2);
}
.drawer-lang:hover{background:var(--panel-2);}
.drawer-lang.is-now{font-weight:900;background:var(--panel-2);}

/* ---------- 页脚(footer.js 注入) ---------- */
.site-foot{border-top:var(--line) solid var(--ink);background:var(--panel);}
.foot-grid{
  display:grid;grid-template-columns:1.3fr .9fr 1.2fr .7fr;gap:34px;
  padding-top:44px;padding-bottom:36px;
}
.foot-grid>*{min-width:0;}
.foot-brand-row{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;font-size:17px;}
.foot-brand-row img{flex-shrink:0;}
.foot-desc{margin-top:12px;font-size:13px;line-height:1.8;color:var(--ink-soft);}
.foot-code{margin-top:12px;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);letter-spacing:.1em;}
.foot-cap{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-soft);
  border-bottom:var(--line) solid var(--ink);padding-bottom:8px;margin-bottom:10px;
}
.foot-links a{display:block;padding-top:5px;padding-bottom:5px;font-size:14px;color:var(--ink-soft);}
.foot-links a:hover{color:var(--ink);}
.foot-hot{display:flex;flex-wrap:wrap;gap:8px;}
.foot-hot a{
  display:inline-block;border:1px solid var(--ink);background:var(--paper);
  padding:4px 10px;font-size:12px;color:var(--ink-soft);
}
.foot-hot a:hover{background:var(--panel-2);color:var(--ink);}
.foot-base{border-top:var(--line) solid var(--ink);background:var(--panel-2);}
.foot-base-in{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
  padding-top:14px;padding-bottom:14px;font-size:13px;
}
.foot-mono{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);}

/* ---------- 正文排版(教程/文章) ---------- */
.prose{max-width:760px;min-width:0;}
.prose h2{
  font-size:26px;font-weight:900;margin-top:44px;margin-bottom:14px;
  padding-bottom:8px;border-bottom:var(--line) solid var(--ink);
}
.prose h3{font-size:19px;font-weight:900;margin-top:28px;margin-bottom:10px;}
.prose p{margin-top:12px;margin-bottom:12px;font-size:15px;line-height:1.9;}
.prose strong{font-weight:900;}
.prose a{border-bottom:2px solid var(--accent);}
.prose a:hover{background:var(--panel-2);}
.prose ul{margin-top:12px;margin-bottom:12px;}
.prose ul>li{position:relative;padding-left:20px;margin-top:7px;margin-bottom:7px;font-size:15px;line-height:1.85;}
.prose ul>li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;background:var(--ink);}
.prose ol{margin-top:14px;margin-bottom:14px;counter-reset:proc;}
.prose ol>li{
  position:relative;counter-increment:proc;
  padding-left:44px;margin-top:12px;margin-bottom:12px;
  font-size:15px;line-height:1.85;min-height:30px;
}
.prose ol>li::before{
  content:counter(proc,decimal-leading-zero);
  position:absolute;left:0;top:2px;width:30px;height:26px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:12px;
  background:var(--accent);border:var(--line) solid var(--ink);color:var(--ink);
}
.prose blockquote{
  border:var(--line) solid var(--ink);border-left:6px solid var(--accent);
  background:var(--panel);padding:12px 16px;margin-top:16px;margin-bottom:16px;
  color:var(--ink-soft);
}

/* ---------- 滚动淡入 ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;}
.reveal.shown{opacity:1;transform:none;}

/* ---------- 装饰性微倾斜(只许用在小徽记/印章,禁止长内容容器) ---------- */
.tilt{transform:rotate(-.5deg);}
.tilt-r{transform:rotate(.4deg);}

/* ---------- 响应式 ---------- */
@media (max-width:1160px){
  .site-head{padding-left:var(--gutter);padding-right:var(--gutter);}
  .nav{display:none;}
  /* 铁律:桌面靠 .nav 的 margin-left:auto 推右,收起后工具区自己补 auto */
  .head-tools{margin-left:auto;}
  .nav-burger{display:inline-flex;}
}
@media (max-width:960px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .brand-tag{display:none;}
}
@media (max-width:640px){
  :root{--gutter:16px;}
  .sec{padding-top:52px;padding-bottom:52px;}
  .sec-head{margin-bottom:24px;}
  .crop{width:12px;height:12px;}
  /* 铁律:微倾斜在窄屏一律归零,防包围盒撑破视口 */
  .tilt,.tilt-r{transform:none;}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;}
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}