/* ==========================================================================
   Clash知识库 · 设计系统基座(base.css)
   调性:深夜老药铺疑难问诊处——乌木深棕打底、全站直角、1px 细实线、
   纸纹颗粒噪点、衬线大字标题、米白正文宽行距。无发光、无投影。
   ========================================================================== */

/* ---------- 设计令牌(全站唯一配色/字体来源) ---------- */
:root{
  /* 底色与面板 */
  --bg:#221810;                 /* 乌木底 */
  --bg-panel:#2D2117;           /* 深胡桃面板 */
  --paper:#F2E7D3;              /* 米白笺纸(简报 bgPanel2) */
  --paper-back:#D8C6A4;         /* 笺纸背层 */
  /* 描边 */
  --border:#4C3A28;
  --border-strong:#6B5236;
  --border-soft:#38291A;
  /* 强调色:赭红 */
  --accent:#B4432A;
  --accent-dark:#8A2D1B;
  /* 文字 */
  --text:#EFE5D0;               /* 米白 */
  --text-muted:#B3A184;         /* 灰褐 */
  /* 语义色 */
  --success:#7C9864;
  --warn:#C9973F;
  --error:#CE5138;
  /* 木材(百子柜材质) */
  --wood-a:#3E2C1A;
  --wood-b:#2D1F12;
  --wood-c:#211508;
  --wood-x:#44311D;
  --wood-alt-a:#37261B;
  --wood-alt-b:#291B10;
  --beam-a:#2E2010;
  --beam-b:#1B1107;
  --frame-line:#0D0804;
  --cavity-hi:#1A120A;
  --cavity:#110B05;
  --cavity-lo:#090502;
  /* 铜件 */
  --copper-hi:#E8BC78;
  --copper:#B0793F;
  --copper-lo:#57391B;
  /* 笺纸上的墨色 */
  --ink:#2A1D11;
  --ink-soft:#5E4A30;
  --ink-faint:#8A7150;
  /* 地板与抽屉唇 */
  --floor-a:#211710;
  --floor-b:#140D06;
  --lip-a:#7A5630;
  --lip-b:#4A3319;
  /* 透明叠层 */
  --sheen:rgba(255,244,222,.06);
  --sheen-soft:rgba(255,244,222,.035);
  --shade:rgba(0,0,0,.14);
  --grain:rgba(0,0,0,.1);
  --hairline:rgba(255,244,222,.05);
  --wash-warm:rgba(201,151,63,.08);
  --wash-red:rgba(180,67,42,.06);
  --wash-ok:rgba(124,152,100,.08);
  --wash-err:rgba(206,81,56,.08);
  --clear:rgba(255,244,222,0);
  --seam:rgba(0,0,0,.18);
  --cave-top:rgba(0,0,0,.62);
  --cave-side:rgba(0,0,0,.45);
  --cave-clear:rgba(0,0,0,0);
  --chip-bg:rgba(45,33,23,.62);
  --head-bg:rgba(34,24,16,.94);
  --menu-hover:rgba(179,161,132,.09);
  --paper-edge:rgba(74,58,40,.55);
  --seal-ring:rgba(242,231,211,.55);
  --tear:rgba(180,67,42,.45);
  --ghost-hover:rgba(179,161,132,.07);
  --tag-hi:rgba(255,255,255,.3);
  --tag-lo:rgba(0,0,0,.05);
  --plaque-bg:rgba(0,0,0,.28);
  --slip-line:rgba(42,29,17,.18);
  --veil:rgba(9,5,2,.62);
  /* 字体 */
  --font-display: Georgia, "Times New Roman", "Songti SC", "STSong", "STZhongsong", "SimSun", "PMingLiU", "Hiragino Mincho ProN", "Yu Mincho", "Batang", serif;
  --font-body: "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans SC", monospace;
  /* 纸纹噪点(小尺寸平铺) */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  /* 布局 */
  --wrap:1160px;
  --gutter:clamp(16px, 4vw, 40px);
  --head-h:64px;
  /* 圆角:全站直角 */
  --radius:0;
}

/* ---------- 复位与文档基底 ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html.nav-open{overflow:hidden;}                 /* 移动端抽屉展开时锁死背景滚动 */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::after{                                    /* 全站纸纹颗粒 */
  content:"";
  position:fixed;
  inset:0;
  background-image:var(--noise);
  background-size:140px 140px;
  opacity:.05;
  pointer-events:none;
  z-index:90;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;height:auto;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
::selection{background:var(--accent);color:var(--paper);}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible{outline:1px solid var(--warn);outline-offset:3px;}

/* ---------- 排版基底 ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--text);
  line-height:1.3;
  letter-spacing:.04em;
}
code{font-family:var(--font-mono);}

/* 平铺型正文(教程/文章/深文档) */
.prose{font-size:15px;line-height:1.95;color:var(--text);}
.prose p{margin:0 0 1.2em;}
.prose h2{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:27px;
  letter-spacing:.08em;
  margin:2.1em 0 .9em;
}
.prose h2::before{content:"";width:8px;height:8px;background:var(--accent);flex-shrink:0;}
.prose h3{font-size:20px;letter-spacing:.06em;margin:1.8em 0 .7em;}
.prose h4{font-size:16px;margin:1.5em 0 .6em;}
.prose a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:4px;
  transition:color .15s ease;
}
.prose a:hover{color:var(--warn);}
.prose ul{margin:0 0 1.2em;}
.prose ul li{position:relative;padding-left:20px;margin-bottom:.45em;line-height:1.9;}
.prose ul li::before{
  content:"";
  position:absolute;
  left:0;top:.68em;
  width:6px;height:6px;
  background:var(--accent);
  flex-shrink:0;
}
.prose ol{margin:0 0 1.2em;padding-left:1.6em;}
.prose ol li{margin-bottom:.45em;line-height:1.9;}
.prose code{
  font-size:.88em;
  background:var(--chip-bg);
  border:1px solid var(--border);
  padding:2px 7px;
  color:var(--warn);
  word-break:break-all;
}
.prose pre{
  background:var(--cavity);
  border:1px solid var(--border);
  padding:18px 20px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 0 1.4em;
  font-size:13px;
  line-height:1.8;
}
.prose pre code{background:none;border:none;padding:0;color:var(--text);font-size:inherit;word-break:normal;}
.prose blockquote{
  border-left:3px solid var(--copper);
  padding:4px 0 4px 18px;
  margin:0 0 1.4em;
  color:var(--text-muted);
}
.prose hr{border:none;border-top:1px solid var(--border);margin:2em 0;}
.prose img{border:1px solid var(--border);}

/* ---------- 布局基件 ---------- */
.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);   /* 防贴边铁律:任何断点都不许清零 */
}
.sec{padding-top:72px;padding-bottom:72px;}   /* 只声明纵向,严禁横向简写 */
.sec-line{border-top:1px solid var(--border);}
.sec-head{margin-bottom:36px;}
.sec-head h2{font-size:clamp(28px, 4vw, 38px);letter-spacing:.08em;margin-top:16px;}
.sec-head h2 em{font-style:normal;color:var(--accent);}
.lead{margin-top:12px;max-width:62ch;font-size:15px;line-height:1.95;color:var(--text-muted);}

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--text-muted);
}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--accent);flex-shrink:0;}

.actions{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap;}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;}
.chips li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--text-muted);
  border:1px solid var(--border);
  background:var(--chip-bg);
  padding:6px 12px;
  max-width:100%;
  overflow:hidden;
}
.chips li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--copper);flex-shrink:0;}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:15px;
  letter-spacing:.08em;
  padding:14px 26px;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn svg{width:15px;height:15px;display:block;flex-shrink:0;}
.btn-primary{background:var(--accent);border-color:var(--accent-dark);color:var(--paper);}
.btn-primary:hover{background:var(--accent-dark);}
.btn-ghost{border-color:var(--border-strong);color:var(--text);}
.btn-ghost:hover{border-color:var(--text-muted);background:var(--ghost-hover);}
.btn-sm{padding:9px 16px;font-size:13px;}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;}

/* ---------- 顶部导航 ---------- */
#site-header{position:relative;z-index:70;}
.site-head{
  height:var(--head-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  border-bottom:1px solid var(--border);
  background:var(--head-bg);
  position:relative;
  z-index:63;
}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand-mark{width:30px;height:30px;display:block;flex-shrink:0;}
.brand-text{display:flex;flex-direction:column;gap:3px;}
.brand-text b{
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  letter-spacing:.14em;
  line-height:1;
  color:var(--text);
}
.brand-text i{
  font-style:normal;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  line-height:1;
  color:var(--text-muted);
}
.head-right{display:flex;align-items:center;}
.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav>a{
  position:relative;
  padding:8px 13px;
  font-size:14px;
  letter-spacing:.04em;
  color:var(--text-muted);
  transition:color .15s ease;
}
.main-nav>a:hover{color:var(--text);}
.main-nav>a.is-active{color:var(--text);}
.main-nav>a.is-active::after{
  content:"";
  position:absolute;
  left:13px;right:13px;bottom:0;
  height:2px;
  background:var(--accent);
}
.nav-more,.lang{position:relative;padding-bottom:14px;margin-bottom:-14px;}
.more-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 13px;
  font-size:14px;
  letter-spacing:.04em;
  color:var(--text-muted);
  position:relative;
}
.more-btn em,.lang-btn em{font-style:normal;font-size:10px;opacity:.65;}
.nav-more:hover .more-btn,.nav-more:focus-within .more-btn,.nav-more.is-open .more-btn{color:var(--text);}
.more-btn.is-active{color:var(--text);}
.more-btn.is-active::after{
  content:"";
  position:absolute;
  left:13px;right:13px;bottom:0;
  height:2px;
  background:var(--accent);
}
.more-menu,.lang-menu{
  position:absolute;
  top:calc(100% - 6px);
  right:0;
  min-width:150px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  padding:6px;
  display:none;
  flex-direction:column;
  z-index:60;
}
.nav-more:hover .more-menu,.nav-more:focus-within .more-menu,
.nav-more.is-open .more-menu,
.lang:hover .lang-menu,.lang:focus-within .lang-menu,.lang.is-open .lang-menu{display:flex;}
.more-menu a,.lang-menu a{
  display:block;
  padding:9px 12px;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--text-muted);
  white-space:nowrap;
}
.more-menu a:hover,.lang-menu a:hover{background:var(--menu-hover);color:var(--text);}
.more-menu a.is-active{color:var(--text);}
.lang-menu a.is-current{color:var(--warn);}
.lang{margin-left:12px;}
.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--border);
  padding:7px 12px;
  font-size:13px;
  letter-spacing:.05em;
  color:var(--text-muted);
  cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.lang:hover .lang-btn,.lang:focus-within .lang-btn,.lang.is-open .lang-btn{border-color:var(--border-strong);color:var(--text);}

/* 汉堡按钮(默认隐藏,窄屏显示) */
.nav-toggle{
  display:none;
  min-width:44px;
  min-height:44px;
  margin-left:8px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  color:var(--text-muted);
  transition:border-color .15s ease,color .15s ease;
}
.nav-toggle:hover{border-color:var(--border-strong);color:var(--text);}
.nav-toggle svg{width:20px;height:20px;display:block;}

/* 抽屉遮罩:层级必须低于 #site-header(70),抽屉在 header 内部故始终可点 */
.nav-veil{
  display:none;
  position:fixed;
  left:0;right:0;
  top:var(--head-h);
  bottom:0;
  background:var(--veil);
  z-index:60;
}

/* ---------- 页脚 ---------- */
.site-foot{border-top:1px solid var(--border);background:var(--bg-panel);}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,.8fr);
  gap:36px;
  padding:56px 0 40px;
}
.foot-grid>*{min-width:0;}
.foot-brand p{margin-top:16px;font-size:13px;line-height:1.9;color:var(--text-muted);max-width:36ch;}
.foot-col h3{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--text-muted);
  margin-bottom:16px;
}
.foot-col h3::before{content:"";width:6px;height:6px;background:var(--copper);flex-shrink:0;}
.foot-col ul{display:flex;flex-direction:column;gap:2px;}
.foot-col li a{
  display:inline-block;
  padding:5px 0;
  font-size:13.5px;
  letter-spacing:.03em;
  color:var(--text-muted);
  transition:color .15s ease;
}
.foot-col li a:hover{color:var(--text);}
.foot-keys{display:flex;flex-wrap:wrap;gap:8px;}
.foot-keys a{
  font-size:12px;
  letter-spacing:.03em;
  color:var(--text-muted);
  border:1px solid var(--border);
  background:var(--chip-bg);
  padding:5px 10px;
  max-width:100%;
  overflow:hidden;
  transition:color .15s ease,border-color .15s ease;
}
.foot-keys a:hover{color:var(--text);border-color:var(--border-strong);}
.foot-langs{display:flex;flex-wrap:wrap;gap:4px 14px;}
.foot-langs a{font-size:13px;color:var(--text-muted);padding:4px 0;transition:color .15s ease;}
.foot-langs a:hover{color:var(--text);}
.foot-langs a.is-current{color:var(--warn);}
.foot-legal{
  border-top:1px solid var(--border);
  padding:18px 0 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px 20px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--text-muted);
}
.foot-legal .copy{font-family:var(--font-mono);letter-spacing:.06em;}
.foot-legal nav{display:flex;gap:18px;flex-wrap:wrap;}
.foot-legal a{color:var(--text-muted);transition:color .15s ease;}
.foot-legal a:hover{color:var(--text);}

/* ---------- 通用面板 ---------- */
.panel{background:var(--bg-panel);border:1px solid var(--border);}
.panel-pad{padding:26px;}
.panel-paper{                       /* 米白笺纸面板:深墨字行文 */
  position:relative;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  color:var(--ink);
}
.panel-paper::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--noise);
  background-size:140px 140px;
  opacity:.06;
  pointer-events:none;
}
.panel-paper>*{position:relative;}
.panel-paper h2,.panel-paper h3,.panel-paper h4{color:var(--ink);}
.panel-paper p{color:var(--ink-soft);}

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

/* ---------- 工具类 ---------- */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- 响应式:平板/手机 ---------- */
@media (max-width:980px){
  .head-right{margin-left:auto;}    /* 工具区贴最右铁律 */
  .main-nav{
    display:none;
    position:fixed;
    top:var(--head-h);
    left:0;right:0;
    z-index:65;
    background:var(--bg-panel);     /* 抽屉面板一律实色,禁半透明 */
    border-bottom:1px solid var(--border-strong);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 0 14px;
    max-height:calc(100dvh - var(--head-h));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  html.nav-open .main-nav{display:flex;}
  html.nav-open .nav-veil{display:block;}
  .main-nav>a{
    display:block;                  /* 整行可点 */
    width:100%;
    padding:13px 24px;
    min-height:44px;
    font-size:15px;
  }
  .main-nav>a.is-active{box-shadow:inset 3px 0 0 var(--accent);}
  .main-nav>a.is-active::after{display:none;}
  .nav-more{padding-bottom:0;margin-bottom:0;}
  .more-btn{display:none;}
  .more-menu{
    position:static;
    display:flex;                   /* 窄屏下「更多」分组平铺展开 */
    min-width:0;
    border:none;
    background:transparent;
    padding:0;
  }
  .more-menu a{
    display:block;                  /* 整行可点 */
    width:100%;
    padding:12px 24px 12px 42px;
    min-height:44px;
    font-size:14px;
    white-space:normal;
  }
  .more-menu a.is-active{box-shadow:inset 3px 0 0 var(--accent);}
  .nav-toggle{display:inline-flex;}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;padding:44px 0 32px;}
}
@media (max-width:640px){
  .sec{padding-top:52px;padding-bottom:52px;}
  .foot-grid{grid-template-columns:minmax(0,1fr);}
  .foot-legal{flex-direction:column;align-items:flex-start;}
}
@media (max-width:560px){
  .site-head{padding:0 14px;}
  .brand-text i{display:none;}
  .lang{margin-left:6px;}
  .lang-btn{padding:7px 9px;font-size:12px;}
  .nav-toggle{margin-left:6px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}