/* =========================================================
   Clash正版官网 · 设计系统基础层
   「正版鉴定证书」纸墨印三元风:米白象牙纸底、墨黑正文、
   茶金细线分层,朱砂红只落在印章 / 验证对勾 / 主下载按钮。
   全站直角、零圆角、零渐变、零发光。
   ========================================================= */

/* ---------- 设计令牌 ---------- */
:root{
  /* 纸 */
  --paper:#F6F1E3;         /* 页面底:米白象牙纸 */
  --paper-panel:#FCF8ED;   /* 面板层:暖白纸面 */
  --paper-deep:#EFE7D2;    /* 加深层:压色纸 */
  /* 线 */
  --line-gold:#D8C79A;     /* 茶金细线(唯一分层线) */
  /* 印 */
  --seal-red:#BF3122;      /* 朱砂红:仅印章/对勾/主下载按钮 */
  --seal-red-deep:#93231A; /* 朱砂深:主下载按钮 hover */
  /* 墨 */
  --ink:#1F1A12;           /* 正文墨黑 */
  --ink-muted:#6E6553;     /* 次要墨灰 */
  /* 语义 */
  --state-ok:#4F6B3D;
  --state-warn:#A5761C;
  --state-err:#8A1F16;
  /* 字 */
  --font-display:Georgia,'Times New Roman','Songti SC','Noto Serif CJK SC','SimSun',serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Courier New',monospace;
  /* 形 */
  --r0:0;                                          /* 全站直角 */
  --shadow-paper:0 22px 46px -22px rgba(31,26,18,.24); /* 唯一一层纸影 */
  --gutter:28px;                                   /* 版心左右留白 */
  --page-max:1300px;
  --topbar-h:64px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
body{
  background:var(--paper);
  color:var(--ink);
  font:16px/1.9 var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:inline-block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--line-gold);color:var(--ink)}
:target{scroll-margin-top:16px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 抽屉菜单展开时锁死背景滚动 */
html.nav-open{overflow:hidden}

/* ---------- 代码与长串防溢出(窄屏惯犯就地防死) ---------- */
code,kbd{font-family:var(--font-mono);font-size:.88em;overflow-wrap:anywhere}
code{background:var(--paper-deep);border:1px solid var(--line-gold);padding:1px 6px}
pre{
  font-family:var(--font-mono);
  background:var(--paper-deep);
  border:1px solid var(--line-gold);
  padding:16px 18px;
  font-size:13px;
  line-height:1.75;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 0 1.4em;
}
pre code{background:none;border:0;padding:0;overflow-wrap:normal;white-space:pre}

/* ---------- 版心与区块节奏 ---------- */
.gz-wrap{
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--gutter); /* 任何断点都不许归零 */
}
/* 区块节奏只声明纵向,严禁 padding:Y 0 简写覆盖版心横向留白 */
.gz-sec{padding-top:64px;padding-bottom:64px}
.gz-sec-tight{padding-top:36px;padding-bottom:36px}
.gz-clipx{overflow-x:clip} /* 含绝对定位装饰的区块加它 */

/* 通用网格(子项一律 min-width:0 防撑爆) */
.gz-grid{display:grid;gap:18px}
.gz-grid>*{min-width:0}
.gz-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gz-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- 排版 ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.35;letter-spacing:.05em}

/* 区块题头(公文卷宗式:衬线编号 + 碑帖题额) */
.gz-sechead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.gz-secno{font-family:var(--font-display);font-size:14px;letter-spacing:.3em;color:var(--ink-muted);flex-shrink:0}
.gz-sectitle{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.22em}
.gz-secsub{margin-top:8px;font-size:13.5px;color:var(--ink-muted);letter-spacing:.06em}

/* 「查看全部 →」式行尾链接 */
.gz-more{font-size:13.5px;letter-spacing:.14em;color:var(--ink-muted)}
.gz-more::after{content:" →"}
.gz-more:hover{color:var(--ink)}

/* ---------- 按钮 ---------- */
.gz-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 22px;
  border-radius:var(--r0);
  font-size:15px;letter-spacing:.14em;text-indent:.14em;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
/* 主下载按钮:全站朱砂红三落点之一 */
.gz-btn-main{background:var(--seal-red);color:var(--paper-panel);font-weight:700}
.gz-btn-main:hover{background:var(--seal-red-deep)}
/* 次按钮:墨色细框 */
.gz-btn-ghost{border:1px solid var(--ink);color:var(--ink)}
.gz-btn-ghost:hover{background:var(--paper-deep)}
/* 弱按钮:茶金细框 */
.gz-btn-line{border:1px solid var(--line-gold);color:var(--ink-muted);height:40px;font-size:13.5px}
.gz-btn-line:hover{color:var(--ink);border-color:var(--ink-muted)}
/* 小尺寸修饰 */
.gz-btn-s{height:40px;font-size:13.5px;padding:0 16px}

/* ---------- 通用面板 / 卡片 ---------- */
.gz-panel{background:var(--paper-panel);border:1px solid var(--line-gold);padding:26px 28px}
.gz-panel-deep{background:var(--paper-deep);border:1px solid var(--line-gold);padding:26px 28px}
/* 奖状式双线纸面(内框距外框 7px,内容 padding 需 ≥20px) */
.gz-sheet{position:relative;background:var(--paper-panel);border:1px solid var(--line-gold);box-shadow:var(--shadow-paper)}
.gz-sheet::before{content:"";position:absolute;inset:7px;border:1px solid var(--line-gold);pointer-events:none}

/* 装饰性微倾斜:只许用在小尺寸印记类元素上,窄屏一律回正 */
.gz-tilt{transform:rotate(-2deg)}

/* ---------- 正文排版(.prose:教程/文章/深文档正文容器) ---------- */
.prose{max-width:820px}
.prose h2{font-size:24px;letter-spacing:.12em;margin:2.4em 0 .9em;padding-bottom:.45em;border-bottom:1px solid var(--line-gold)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18.5px;letter-spacing:.08em;margin:1.9em 0 .7em}
.prose p{margin:0 0 1.15em}
.prose ul{margin:0 0 1.3em}
.prose ul>li{position:relative;padding-left:20px;margin-bottom:.55em}
.prose ul>li::before{content:"";position:absolute;left:2px;top:.78em;width:7px;height:7px;background:var(--line-gold)}
.prose ol{counter-reset:gzstep;margin:0 0 1.3em}
.prose ol>li{position:relative;counter-increment:gzstep;padding-left:42px;margin-bottom:.95em}
.prose ol>li::before{
  content:counter(gzstep);
  position:absolute;left:0;top:.18em;
  width:27px;height:27px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);
  font-family:var(--font-display);font-size:13.5px;
}
.prose blockquote{border-left:3px solid var(--line-gold);padding:.2em 0 .2em 18px;color:var(--ink-muted);margin:0 0 1.3em}
.prose a{border-bottom:1px solid var(--line-gold);padding-bottom:1px}
.prose a:hover{color:var(--ink);border-bottom-color:var(--ink-muted)}
.prose img{display:block;margin:1.4em 0;border:1px solid var(--line-gold)}

/* ---------- 头部(header.js 注入 #site-header) ---------- */
.gz-topbar{position:relative;z-index:50;border-bottom:1px solid var(--line-gold);background:var(--paper)}
.gz-topbar-in{
  max-width:var(--page-max);margin:0 auto;
  height:var(--topbar-h);
  display:flex;align-items:center;
  padding:0 var(--gutter);
}
.gz-brand{display:flex;align-items:center;gap:10px;min-width:0}
.gz-brand-logo{width:26px;height:26px;flex-shrink:0}
.gz-brand-name{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:.1em;white-space:nowrap}

/* 导航:胶囊/色块高亮形态(直角色块) */
.gz-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.gz-nav a{
  display:block;padding:7px 14px;
  font-size:14px;color:var(--ink-muted);
  border:1px solid transparent;border-radius:var(--r0);
  letter-spacing:.04em;white-space:nowrap;
}
.gz-nav a:hover{color:var(--ink)}
.gz-nav a.is-on{background:var(--paper-deep);border-color:var(--line-gold);color:var(--ink)}

/* 工具区(语言切换+汉堡):窄屏必须仍贴最右 */
.gz-tools{margin-left:18px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.gz-lang-box{position:relative}
.gz-lang{
  font-family:var(--font-body);font-size:13px;color:var(--ink-muted);
  background:var(--paper-panel);border:1px solid var(--line-gold);border-radius:var(--r0);
  padding:7px 13px;letter-spacing:.06em;min-height:34px;
}
.gz-lang:hover{color:var(--ink)}
.gz-lang-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  min-width:150px;padding:4px 0;
  background:var(--paper-panel);border:1px solid var(--line-gold);
  box-shadow:var(--shadow-paper);
}
.gz-lang-box.is-open .gz-lang-menu{display:block}
.gz-lang-menu a{display:block;padding:9px 16px;font-size:13.5px;color:var(--ink-muted)}
.gz-lang-menu a:hover{background:var(--paper-deep);color:var(--ink)}
.gz-lang-menu a.is-cur{background:var(--paper-deep);color:var(--ink)}

/* 汉堡按钮:≥44px,桌面隐藏 */
.gz-burger{
  display:none;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  border:1px solid var(--line-gold);background:var(--paper-panel);color:var(--ink);
}
.gz-burger svg{flex-shrink:0}

/* 移动端抽屉:实色背景、整行可点、可内滚不穿透 */
.gz-drawer{
  display:none;
  position:absolute;top:100%;left:0;right:0;z-index:49;
  background:var(--paper-panel); /* 完全不透明 */
  border-bottom:1px solid var(--line-gold);
  box-shadow:var(--shadow-paper);
  max-height:calc(100dvh - var(--topbar-h));
  overflow-y:auto;
  overscroll-behavior:contain;
}
html.nav-open .gz-drawer{display:block}
.gz-drawer a{
  display:block;width:100%;
  padding:13px var(--gutter);
  min-height:48px;
  font-size:15px;color:var(--ink);
  border-bottom:1px dotted var(--line-gold);
}
.gz-drawer a:hover{background:var(--paper-deep)}
.gz-drawer a.is-on{border-left:3px solid var(--ink);background:var(--paper-deep);padding-left:calc(var(--gutter) - 3px)}
.gz-drawer-label{
  padding:16px var(--gutter) 6px;
  font-family:var(--font-display);font-size:12px;
  letter-spacing:.24em;color:var(--ink-muted);
}
.gz-drawer a.is-cur{color:var(--ink-muted)}

/* ---------- 页脚(footer.js 注入 #site-footer) ---------- */
.gz-footer{margin-top:72px;border-top:3px double var(--line-gold);background:var(--paper-panel);overflow-x:clip}
.gz-footer-in{
  max-width:var(--page-max);margin:0 auto;
  padding-top:46px;padding-bottom:36px;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr) minmax(0,1.2fr) minmax(0,.7fr);
  gap:34px;
}
.gz-footer-in>*{min-width:0}
.gz-foot-tag{margin-top:14px;font-size:13.5px;line-height:2;color:var(--ink-muted);max-width:340px}
.gz-foot-cert{margin-top:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-muted);overflow-wrap:anywhere}
.gz-foot-h{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.26em;color:var(--ink);
  margin-bottom:14px;padding-bottom:8px;
  border-bottom:1px solid var(--line-gold);
}
.gz-foot-col a{display:block;padding:6px 0;font-size:13.5px;color:var(--ink-muted)}
.gz-foot-col a:hover{color:var(--ink)}
.gz-foot-col a.is-cur{color:var(--ink)}
.gz-foot-kw{display:flex;flex-wrap:wrap;gap:7px}
.gz-foot-kw a{
  display:inline-flex;padding:8px 11px;
  border:1px dotted var(--line-gold);
  font-size:12px;color:var(--ink-muted);letter-spacing:.04em;
  max-width:100%;overflow:hidden;
}
.gz-foot-kw a:hover{color:var(--ink);border-style:solid}
.gz-foot-legal{border-top:1px solid var(--line-gold)}
.gz-foot-legal-in{
  max-width:var(--page-max);margin:0 auto;
  padding-top:16px;padding-bottom:16px;
  padding-inline:var(--gutter);
  display:flex;flex-wrap:wrap;gap:8px 24px;
  align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--ink-muted);
}
.gz-foot-law{display:flex;gap:18px;flex-wrap:wrap}
.gz-foot-law a:hover{color:var(--ink)}

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

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .gz-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .gz-footer-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .gz-nav{display:none}
  .gz-lang-box{display:none} /* 语言切换收进抽屉 */
  .gz-burger{display:inline-flex}
  .gz-tools{margin-left:auto} /* 桌面靠 .gz-nav 的 auto 边距,收起后工具区自己补 */
}
@media (max-width:820px){
  :root{--topbar-h:58px}
}
@media (max-width:700px){
  .gz-grid-2,.gz-grid-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  :root{--gutter:16px}
  body{font-size:15px}
  .gz-sec{padding-top:44px;padding-bottom:44px}
  .gz-sec-tight{padding-top:28px;padding-bottom:28px}
  .gz-sectitle{font-size:20px;letter-spacing:.14em}
  .gz-panel,.gz-panel-deep{padding:20px 18px}
  /* 微倾斜装饰在窄屏一律回正,防包围盒横向溢出 */
  .gz-tilt{transform:none}
  .gz-footer-in{grid-template-columns:minmax(0,1fr);gap:26px}
  .gz-foot-legal-in{justify-content:flex-start}
}
@media (max-width:380px){
  .gz-brand-name{font-size:17px;letter-spacing:.06em}
}

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