/* ============================================================
   Clash配置教程 · 设计系统基础层
   「模块合成器面板」深炭硬件风:直角、1px 描边、丝印文字
   语义色(琥珀/水鸭青/信号红)只允许出现在跳线、插孔亮圈、LED 指示点
   ============================================================ */

:root{
  /* 面板底色层次 */
  --bg:#1A1B1A;
  --panel:#222423;
  --panel2:#2B2D2B;
  --hole:#111311;

  /* 描边与金属件 */
  --border:#3C3F3C;
  --edge:#4F524E;
  --metal:#787B74;
  --metal-dark:#4A4D48;

  /* 丝印文字 */
  --text:#EFEAD8;
  --text-soft:#CFCABB;
  --muted:#A6A295;

  /* 语义色(仅限跳线 / 插孔亮圈 / LED 点) */
  --amber:#E4A93A;
  --teal:#2FAF9B;
  --red:#D94A3A;
  --accent:#2FAF9B;
  --accent-dark:#1F8474;
  --ok:var(--teal);
  --warn:var(--amber);
  --err:var(--red);

  /* 投影与纹理 */
  --key-shadow:rgba(0,0,0,.55);
  --cable-shadow:rgba(0,0,0,.45);
  --silk-dot:rgba(239,234,216,.035);

  /* 字体 */
  --font-display:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;

  /* 形状与节奏 */
  --radius:0;
  --gutter:clamp(16px,4vw,28px);
  --head-h:60px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
html.nav-open{overflow:hidden}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img,svg{max-width:100%}
img{height:auto}
button{font-family:inherit;color:inherit}
::selection{background:var(--text);color:var(--bg)}
:focus-visible{outline:1px solid var(--text);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- 排版 ---------- */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.25}
.page-t{
  font-size:clamp(28px,3.4vw,40px);
  font-weight:800;
  letter-spacing:.05em;
}
.kicker{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
strong{color:var(--text);font-weight:600}

/* 行内代码:超长订阅 URL / 安装包文件名必须可折行 */
code{
  font-family:var(--font-mono);
  font-size:.9em;
  background:var(--panel2);
  border:1px solid var(--border);
  padding:1px 6px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
pre{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
pre code{
  display:block;
  background:none;
  border:0;
  padding:0;
  overflow-wrap:normal;
  word-break:normal;
  white-space:pre;
}

/* ---------- 版心与区块节奏 ---------- */
/* 铁律:版心永远保留左右内边距;区块节奏类只声明纵向 padding */
.wrap{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap > *{min-width:0}
.sec{
  padding-top:64px;
  padding-bottom:64px;
}
@media (max-width:760px){
  .sec{padding-top:44px;padding-bottom:44px}
}

/* 装饰性微倾斜类在窄屏一律回正,防包围盒撑破视口 */
@media (max-width:640px){
  [class*="tilt"]{transform:none!important}
}

/* ---------- 通用 LED 指示点 ---------- */
.led-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--metal-dark);
  flex-shrink:0;
}
.led-dot--teal{background:var(--teal)}
.led-dot--amber{background:var(--amber)}
.led-dot--red{background:var(--red)}

/* ---------- 按键(拨杆开关式按钮) ---------- */
.key{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  padding:14px 26px;
  border-radius:var(--radius);
  cursor:pointer;
  transition:transform .12s ease;
}
.key:hover{transform:translateY(-1px)}
.key:active{transform:translateY(1px)}
.key--primary{
  background:var(--text);
  color:var(--bg);
  border:1px solid var(--text);
  box-shadow:0 3px 0 var(--key-shadow);
}
.key--ghost{
  background:var(--panel2);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:0 3px 0 var(--key-shadow);
}
.key--ghost:hover{border-color:var(--edge)}
.key--sm{
  font-size:13px;
  padding:9px 16px;
  gap:9px;
}
.lever{
  display:inline-block;
  width:6px;
  height:16px;
  border-radius:var(--radius);
  flex-shrink:0;
}
.key--sm .lever{height:12px;width:5px}
.key--primary .lever{background:var(--bg)}
.key--ghost .lever{background:var(--muted)}

/* ---------- 品牌铭牌(header/footer 共用) ---------- */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.brand-logo{
  display:block;
  width:26px;
  height:26px;
  flex-shrink:0;
}
.brand-name{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  white-space:nowrap;
}

/* ---------- 顶部导航(胶囊高亮形态) ---------- */
.top{
  position:sticky;
  top:0;
  z-index:90;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.top-in{
  height:var(--head-h);
  display:flex;
  align-items:center;
  gap:24px;
  padding-inline:28px;
}
.top-nav{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  min-width:0;
}
.top-nav a{
  font-size:13px;
  color:var(--muted);
  padding:6px 13px;
  border:1px solid transparent;
  border-radius:var(--radius);
  white-space:nowrap;
  transition:color .15s ease;
}
.top-nav a:hover{color:var(--text)}
.top-nav a[aria-current="page"]{
  color:var(--text);
  background:var(--panel2);
  border-color:var(--border);
}

.top-tools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.lang-box{position:relative}
.lang{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--panel);
  padding:6px 12px;
  cursor:pointer;
  border-radius:var(--radius);
  white-space:nowrap;
}
.lang:hover{color:var(--text)}
.lang-menu{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:150px;
  background:var(--panel);
  border:1px solid var(--edge);
  box-shadow:0 3px 0 var(--key-shadow);
  z-index:95;
}
.lang-box.open .lang-menu{display:block}
.lang-menu a{
  display:block;
  padding:11px 14px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  border-top:1px solid var(--border);
}
.lang-menu li:first-child a{border-top:0}
.lang-menu a:hover{color:var(--text);background:var(--panel2)}
.lang-menu a[aria-current="true"]{color:var(--text)}

/* 汉堡按钮:触达面积 ≥44px,窄屏才显示 */
.hamb{
  display:none;
  min-width:44px;
  min-height:44px;
  align-items:center;
  justify-content:center;
  background:var(--panel);
  border:1px solid var(--border);
  cursor:pointer;
  padding:0;
}
.hamb-i{display:block}
.hamb-i i{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  margin:4px 0;
}

/* 移动端抽屉:实色背景、整行可点、可内部滚动 */
.top-drawer{display:none}

@media (max-width:920px){
  .top-in{gap:12px;padding-inline:var(--gutter)}
  .top-nav{display:none}
  /* 桌面端靠 .top-nav 的 auto 边距推右,窄屏收起后工具区自己补 */
  .top-tools{margin-left:auto}
  .lang{min-height:44px;display:inline-flex;align-items:center}
  .hamb{display:inline-flex}
  .top-drawer{
    display:none;
    position:fixed;
    top:var(--head-h);
    left:0;
    right:0;
    z-index:85;
    background:var(--panel);
    border-bottom:1px solid var(--edge);
    max-height:calc(100dvh - var(--head-h));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .top-drawer.open{display:block}
  .top-drawer a{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:48px;
    padding:13px var(--gutter);
    font-size:15px;
    color:var(--text);
    border-top:1px solid var(--border);
  }
  .top-drawer a:first-child{border-top:0}
  .top-drawer a[aria-current="page"],
  .top-drawer a.is-now{
    background:var(--panel2);
  }
  .drawer-cut{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.22em;
    color:var(--muted);
    padding:16px var(--gutter) 6px;
    border-top:1px solid var(--border);
  }
  .top-drawer .drawer-lang{
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--muted);
  }
  .top-drawer .drawer-lang.is-now{color:var(--text)}
}

/* ---------- 机架单元分区头(左端 LED 圆点 + 丝印标题) ---------- */
.sec-head{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--border);
  background:var(--panel);
  padding:13px 20px;
  margin-bottom:24px;
}
.sec-code{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--muted);
  flex-shrink:0;
}
.sec-title{
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text);
}
.sec-note{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
  text-align:right;
}
@media (max-width:640px){
  .sec-note{display:none}
}

/* ---------- 通用面板单元 ---------- */
.unit{
  border:1px solid var(--border);
  background:var(--panel);
}
.unit-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 20px;
  border-bottom:1px solid var(--border);
}
.unit-code{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--muted);
  flex-shrink:0;
}
.unit-title{
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text);
}
.unit-note{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}
.unit-body{padding:22px 24px}
@media (max-width:640px){
  .unit-body{padding:18px 16px}
  .unit-note{display:none}
}

/* ---------- 卡片网格 ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;
}
.card-grid > *{min-width:0}
@media (max-width:640px){
  .card-grid{grid-template-columns:1fr}
}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:72px;
  border-top:1px solid var(--edge);
  background:var(--panel);
}
.foot-in{
  max-width:1200px;
  margin-inline:auto;
  padding-top:44px;
  padding-bottom:36px;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:1.3fr .9fr 1.4fr;
  gap:40px;
}
.foot-in > *{min-width:0}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
}
.foot-h{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.foot-h--gap{margin-top:26px}
.foot-nav a{
  display:block;
  padding:5px 0;
  font-size:13px;
  color:var(--muted);
}
.foot-nav a:hover{color:var(--text)}
.foot-hot{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.foot-hot a{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--panel2);
  padding:5px 10px;
  max-width:100%;
  overflow:hidden;
}
.foot-hot a:hover{color:var(--text);border-color:var(--edge)}
.foot-langs{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
}
.foot-langs a,
.foot-langs .lang-now{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  padding:4px 0;
}
.foot-langs a:hover{color:var(--text)}
.foot-langs .lang-now{color:var(--text)}
.foot-base{border-top:1px solid var(--border)}
.foot-base-in{
  max-width:1200px;
  margin-inline:auto;
  padding-top:16px;
  padding-bottom:16px;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}
.foot-legal{
  margin-left:auto;
  display:flex;
  gap:16px;
}
.foot-legal a{color:var(--muted)}
.foot-legal a:hover{color:var(--text)}
@media (max-width:860px){
  .foot-in{grid-template-columns:1fr;gap:28px}
  .foot-legal{margin-left:0}
}

/* ---------- 滚动淡入 ---------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
}
.reveal.shown{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}