/* ============================================================
   Clash官网 · clashlatest.com
   base.css —— 设计令牌 / reset / 排版 / 按钮 / 头部 / 页脚 / 通用面板 / reveal / 响应式
   设计方向:「深夜国际航站楼翻页告示牌」——暖倾向深炭底,石墨字牌拼块,
   小圆角 + 中缝线 + 极轻内阴影,全站拒绝发光与渐变,琥珀只落在
   状态灯 / 当前行高亮 / 主下载按钮。
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  /* 色板 */
  --c-bg:#131110;
  --c-panel:#1E1B17;
  --c-panel2:#282319;
  --c-border:#3A342A;
  --c-accent:#FFAD1F;
  --c-accent-dark:#C87F00;
  --c-text:#F2EAD8;
  --c-muted:#9C9284;
  --c-success:#7DBE6E;
  --c-warn:#FFAD1F;
  --c-error:#E05A4E;

  /* 半透明层(墨/纸) */
  --ink-30:rgba(0,0,0,.30);
  --ink-45:rgba(0,0,0,.45);
  --ink-60:rgba(0,0,0,.60);
  --paper-03:rgba(242,234,216,.03);
  --paper-06:rgba(242,234,216,.06);
  --paper-82:rgba(242,234,216,.82);

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

  /* 圆角 */
  --radius-tile:6px;
  --radius-panel:12px;
  --radius-btn:8px;
  --radius-pill:999px;

  /* 阴影(字牌厚度 / 告示牌 / 主按钮 / 下拉) */
  --shadow-tile:inset 0 1px 0 var(--paper-03), inset 0 -6px 10px -6px var(--ink-45);
  --shadow-board:0 1px 0 var(--paper-03), 0 24px 48px -12px var(--ink-60);
  --shadow-btn:0 2px 0 var(--c-accent-dark), 0 12px 24px -8px var(--ink-60);
  --shadow-drop:0 16px 32px -8px var(--ink-60);

  /* 布局 */
  --wrap:1360px;
  --gutter:40px;
  --head-h:64px;
  --ease:cubic-bezier(.4,0,.2,1);
}

@media (max-width:920px){
  :root{--gutter:28px;}
}
@media (max-width:640px){
  :root{--gutter:20px;}
}
@media (max-width:420px){
  :root{--gutter:16px;}
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
html,body{background:var(--c-bg);color:var(--c-text);font-family:var(--font-body);}

/* 牌面横线纹理:每 72px 一道极轻分隔,呼应告示牌行距 */
body{
  min-height:100vh;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 71px,
    var(--paper-03) 71px,
    var(--paper-03) 72px
  );
}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer;}
img,svg{max-width:100%;}
code,pre,kbd,samp{font-family:var(--font-mono);}
ul,ol{padding-left:1.2em;}
table{border-collapse:collapse;}

::selection{background:var(--c-accent);color:var(--c-bg);}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;}

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

/* ---------- 版心与区块节奏 ---------- */
/* 铁律:版心永远保留左右内边距;区块节奏类只声明纵向 padding。 */
.wrap{
  max-width:var(--wrap);
  margin-left:auto;
  margin-right:auto;
  padding-inline:var(--gutter);
}
.wrap > *{min-width:0;}

.sec{padding-top:72px;padding-bottom:72px;}
.sec--tight{padding-top:48px;padding-bottom:48px;}
.sec--panel{background:var(--c-panel);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);}

@media (max-width:640px){
  .sec{padding-top:52px;padding-bottom:52px;}
  .sec--tight{padding-top:36px;padding-bottom:36px;}
}

/* ---------- 排版 ---------- */
h1,h2,h3,h4{font-weight:700;line-height:1.3;overflow-wrap:break-word;}

/* 区块小标(kicker):琥珀短杠 + 等宽小字,全站统一的"报站"开头 */
.kicker{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--c-muted);
  display:flex;
  align-items:center;
  gap:10px;
}
.kicker::before{
  content:"";
  width:14px;height:3px;flex-shrink:0;
  background:var(--c-accent);
  border-radius:var(--radius-pill);
}
.kicker--accent{color:var(--c-accent);}

.sec-title{
  font-family:var(--font-display);
  font-size:clamp(20px,2.6vw,26px);
  font-weight:700;
  letter-spacing:.02em;
  margin-top:12px;
}
.sec-lede{
  margin-top:12px;
  font-size:14px;
  line-height:1.9;
  color:var(--c-muted);
  max-width:640px;
}

/* ---------- 按钮 ---------- */
.btn-main{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--c-accent);color:var(--c-bg);
  font-size:15px;font-weight:700;letter-spacing:.02em;
  padding:14px 26px;border-radius:var(--radius-btn);
  box-shadow:var(--shadow-btn);
  transition:transform .15s ease,background .15s ease;
}
.btn-main:hover{background:var(--c-accent-dark);transform:translateY(-1px);}
.btn-main svg{width:15px;height:15px;display:block;flex-shrink:0;}
.btn-main .ico{fill:none;stroke:var(--c-bg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.btn-main--s{padding:11px 18px;font-size:14px;}

.btn-sub{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;
  font-size:14px;color:var(--c-text);
  border:1px solid var(--c-border);border-radius:var(--radius-btn);
  transition:border-color .15s ease,background .15s ease;
}
.btn-sub:hover{border-color:var(--c-accent);background:var(--c-panel);}
.btn-sub--s{padding:10px 16px;font-size:13px;}

/* 登机口式次级动作(下载卡里的次要链接) */
.btn-get{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;
  color:var(--c-text);
  background:var(--c-panel2);
  border:1px solid var(--c-border);
  border-radius:var(--radius-tile);
  padding:11px 16px;line-height:1;
  transition:border-color .15s ease,color .15s ease;
}
.btn-get:hover{border-color:var(--c-accent);color:var(--c-accent);}

/* ---------- 头部(由 header.js 注入) ---------- */
.site-head{
  position:sticky;top:0;z-index:70;
  height:var(--head-h);
  border-bottom:1px solid var(--c-border);
  background:var(--c-bg);
}
.head-inner{
  max-width:var(--wrap);height:100%;margin:0 auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;gap:6px;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-mark{width:30px;height:30px;display:block;flex-shrink:0;}
.brand-name{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.04em;white-space:nowrap;}
.brand-name em{font-style:normal;color:var(--c-accent);}

.nav{display:flex;align-items:center;gap:6px;margin-left:auto;}
.nav-link{
  display:inline-block;padding:8px 14px;font-size:14px;color:var(--c-muted);
  border-radius:var(--radius-tile);position:relative;line-height:1;
}
.nav-link:hover{color:var(--c-text);background:var(--c-panel);}
.nav-link[aria-current="page"]{color:var(--c-text);}
.nav-link[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:var(--c-accent);border-radius:var(--radius-pill);
}
.caret{font-size:10px;color:var(--c-muted);}

.nav-more{position:relative;}
.nav-more-btn{font-size:14px;}
.nav-more--on > .nav-more-btn{color:var(--c-text);}
.nav-drop{
  position:absolute;top:calc(100% + 8px);right:0;min-width:148px;
  background:var(--c-panel);border:1px solid var(--c-border);border-radius:var(--radius-tile);
  box-shadow:var(--shadow-drop);padding:6px;z-index:30;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.nav-more:hover .nav-drop,
.nav-more:focus-within .nav-drop,
.nav-more.open .nav-drop{opacity:1;visibility:visible;transform:none;}
.nav-drop a{
  display:block;padding:9px 12px;font-size:13px;color:var(--c-muted);border-radius:var(--radius-tile);
}
.nav-drop a:hover{color:var(--c-text);background:var(--c-panel2);}
.nav-drop a[aria-current="page"]{color:var(--c-text);}

.head-tools{display:flex;align-items:center;gap:10px;margin-left:14px;flex-shrink:0;}

.lang-box{position:relative;}
.lang-btn{
  padding:7px 12px;font-size:13px;color:var(--c-muted);
  border:1px solid var(--c-border);border-radius:var(--radius-tile);line-height:1;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.lang-btn:hover{color:var(--c-text);border-color:var(--c-muted);}
.lang-drop{
  position:absolute;top:calc(100% + 8px);right:0;min-width:132px;
  background:var(--c-panel);border:1px solid var(--c-border);border-radius:var(--radius-tile);
  box-shadow:var(--shadow-drop);padding:6px;z-index:90;
  display:none;
}
.lang-box.open .lang-drop{display:block;}
.lang-drop a{display:block;padding:10px 12px;font-size:13px;color:var(--c-muted);border-radius:var(--radius-tile);}
.lang-drop a:hover{color:var(--c-text);background:var(--c-panel2);}
.lang-drop a.on{color:var(--c-accent);}

/* 汉堡按钮(≥44px 触达面积) */
.nav-burger{
  display:none;
  min-width:44px;min-height:44px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border:1px solid var(--c-border);border-radius:var(--radius-tile);
  flex-shrink:0;
}
.burger-bar{
  display:block;width:18px;height:2px;
  background:var(--c-text);border-radius:var(--radius-pill);
  transition:transform .2s ease,opacity .2s ease;
}
html.nav-open .burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
html.nav-open .burger-bar:nth-child(2){opacity:0;}
html.nav-open .burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* 窄屏:导航收进抽屉(实色不透明底 / 整行可点 / 工具区仍贴最右) */
@media (max-width:920px){
  .nav{
    position:fixed;top:var(--head-h);left:0;right:0;z-index:60;
    display:none;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--c-bg);
    border-bottom:1px solid var(--c-border);
    padding:10px 16px 20px;
    margin-left:0;
    max-height:calc(100dvh - var(--head-h));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  html.nav-open .nav{display:flex;}
  .nav-link{
    display:block;width:100%;
    padding:13px 12px;min-height:44px;
    font-size:15px;line-height:1.2;
  }
  .nav-link[aria-current="page"]::after{left:12px;right:auto;width:26px;bottom:6px;}
  .nav-more{position:static;width:100%;}
  .nav-more-btn{display:none;}
  .nav-drop{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:transparent;border-radius:0;
    padding:8px 0 0;margin-top:8px;min-width:0;
    border-top:1px solid var(--c-border);
  }
  .nav-drop a{padding:13px 12px;min-height:44px;font-size:15px;line-height:1.2;}
  .head-tools{margin-left:auto;}
  .nav-burger{display:inline-flex;}
}

/* ---------- 页脚(由 footer.js 注入) ---------- */
.site-foot{
  border-top:1px solid var(--c-border);
  background:var(--c-panel);
}
.foot-inner{
  max-width:var(--wrap);margin:0 auto;
  padding-top:48px;padding-bottom:36px;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(220px,1.3fr) repeat(3,minmax(150px,1fr));
  gap:36px;
}
.foot-inner > *{min-width:0;}
.foot-desc{
  margin-top:14px;font-size:13px;line-height:1.85;color:var(--c-muted);max-width:300px;
}
.foot-h{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  color:var(--c-muted);font-weight:400;margin-bottom:14px;
}
.foot-col ul{list-style:none;padding:0;}
.foot-col li{margin:0 0 9px;}
.foot-col a{font-size:13px;color:var(--c-muted);line-height:1.6;}
.foot-col a:hover{color:var(--c-text);}
.foot-col a.on{color:var(--c-accent);}

.foot-base{border-top:1px solid var(--c-border);}
.foot-base-inner{
  max-width:var(--wrap);margin:0 auto;
  padding-top:18px;padding-bottom:18px;
  padding-inline:var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 22px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  color:var(--c-muted);
}
.foot-legal{display:flex;flex-wrap:wrap;gap:16px;}
.foot-legal a:hover{color:var(--c-text);}

@media (max-width:920px){
  .foot-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;}
}
@media (max-width:560px){
  .foot-inner{grid-template-columns:minmax(0,1fr);gap:28px;}
}

/* ---------- 通用面板 / 卡片 ---------- */
.panel{
  background:var(--c-panel);
  border:1px solid var(--c-border);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-tile);
  padding:22px;
}
.panel--deep{
  background:var(--c-bg);
  box-shadow:var(--shadow-board);
}

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

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .btn-main{transition:none;}
  .burger-bar{transition:none;}
}