/* ============================================================
   clashservice.com · Clash下载中文网
   「国际空运分拣站」纸面工业风 —— base.css
   设计令牌 / reset / 排版 / 按钮 / 页头页脚 / 通用面板 / reveal
   ============================================================ */

:root{
  /* —— 纸面与油墨 —— */
  --paper:#EDE3CB;          /* 暖米牛皮纸底 */
  --paper-lift:#F5EEDC;     /* 面板亮一档 */
  --paper-deep:#E4D7B8;     /* 面板深一档 */
  --ink:#1A1611;            /* 油墨黑:表格线/大字 */
  --ink-soft:#6F6350;       /* 次要文字 */

  /* —— 货运红(只落在橡皮章/扫描线/主按钮) —— */
  --stamp:#E2261C;
  --stamp-deep:#B01B13;

  /* —— 语义信号色 —— */
  --sig-ok:#1F7A3D;
  --sig-warn:#C77800;
  --sig-err:#9E1410;

  /* —— 字体栈 —— */
  --ft-display:"Noto Sans SC","Inter","Arial Narrow","PingFang SC","Microsoft YaHei",sans-serif;
  --ft-body:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --ft-mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  /* —— 粗黑表格线 —— */
  --rule-3:3px solid var(--ink);
  --rule-2:2px solid var(--ink);

  /* —— 版式 —— */
  --gutter:clamp(16px,4vw,40px);
  --wrap-max:1360px;
  --head-h:64px;
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* 兜底:装饰性出血元素(钢印大字/橡皮章)不得撑出横向滚动条 */
html,body{overflow-x:clip;}
html.nav-open{overflow:hidden;}
body{
  font-family:var(--ft-body);
  color:var(--ink);
  background-color:var(--paper);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:inline-block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
ul,ol{list-style:none;}
pre,code,kbd{font-family:var(--ft-mono);}
pre{overflow-x:auto;}
table{border-collapse:collapse;}

::selection{background:var(--stamp);color:var(--paper-lift);}
:focus-visible{outline:3px solid var(--stamp);outline-offset:2px;}

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

/* ---------- 排版 ---------- */
h1,h2,h3,h4{font-family:var(--ft-display);font-weight:900;line-height:1.25;}
h1{font-size:clamp(32px,4vw,46px);line-height:1.14;letter-spacing:0.01em;}
h2{font-size:clamp(22px,2.6vw,30px);}
h3{font-size:clamp(17px,2vw,21px);}
p{line-height:1.8;}

.mono{font-family:var(--ft-mono);}
.muted{color:var(--ink-soft);}

/* 版心:任何断点都保留左右内边距,严禁归零 */
.wrap{
  max-width:var(--wrap-max);
  margin-left:auto;
  margin-right:auto;
  padding-inline:var(--gutter);
}
/* 区块节奏:只声明纵向,禁止 padding 简写覆盖版心横向留白 */
.strata{
  padding-top:64px;
  padding-bottom:64px;
}

/* 分区抬头(单证栏头式) */
.sec-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  border-bottom:var(--rule-3);
  padding-bottom:14px;
  margin-bottom:28px;
}
.sec-tag{
  font-family:var(--ft-mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  border:var(--rule-2);
  background:var(--paper-lift);
  padding:4px 10px;
  flex-shrink:0;
}
.sec-title{
  font-family:var(--ft-display);
  font-weight:900;
  font-size:clamp(22px,2.6vw,30px);
}
.sec-note{
  font-family:var(--ft-mono);
  font-size:12px;
  color:var(--ink-soft);
  margin-left:auto;
}

/* ---------- 按钮(盖章式:按下位移 2px) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--ft-display);
  font-weight:900;
  font-size:17px;
  letter-spacing:0.04em;
  padding:13px 26px;
  border:var(--rule-3);
  cursor:pointer;
  background:var(--paper-lift);
}
.btn:active{transform:translate(2px,2px);}
.btn svg{display:block;width:16px;height:16px;flex-shrink:0;}
.btn-primary{
  background:var(--stamp);
  color:var(--paper-lift);
}
.btn-primary:hover{background:var(--stamp-deep);}
.btn-ghost{
  background:var(--paper-lift);
  color:var(--ink);
}
.btn-ghost:hover{background:var(--ink);color:var(--paper-lift);}

/* ---------- 通用面板(单证卡) ---------- */
.panel{
  background:var(--paper-lift);
  border:var(--rule-3);
}
.panel-strip{
  background:var(--paper-deep);
  border-bottom:var(--rule-2);
  padding:8px 16px;
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
}
.panel-body{padding:18px 20px;}

/* ---------- 页头:underline-tabs ---------- */
.topbar{
  height:var(--head-h);
  background:var(--paper-lift);
  border-bottom:var(--rule-3);
  display:flex;
  align-items:stretch;
  padding:0 var(--gutter);
  gap:36px;
  position:relative;
  z-index:50;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  min-width:0;
}
.brand-logo{display:block;width:38px;height:38px;flex-shrink:0;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.brand-name{
  font-family:var(--ft-display);
  font-weight:900;
  font-size:18px;
  letter-spacing:0.02em;
  white-space:nowrap;
}
.brand-domain{
  font-family:var(--ft-mono);
  font-size:11px;
  color:var(--ink-soft);
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.tabs{
  display:flex;
  align-items:stretch;
  gap:4px;
  margin-left:auto;
}
.tabs a{
  position:relative;
  display:flex;
  align-items:center;
  padding:0 16px;
  font-size:15px;
  font-weight:700;
}
.tabs a::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:-3px;
  height:4px;
  background:transparent;
}
.tabs a:hover::after{background:var(--ink);}
.tabs a.is-active{color:var(--stamp-deep);}
.tabs a.is-active::after{background:var(--stamp);}

.top-tools{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* 语言切换下拉 */
.lang-dock{position:relative;}
.lang-btn{
  font-family:var(--ft-mono);
  font-size:13px;
  border:var(--rule-2);
  padding:6px 12px;
  background:var(--paper);
  cursor:pointer;
  white-space:nowrap;
}
.lang-btn:hover{background:var(--paper-deep);}
.lang-menu{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  min-width:156px;
  background:var(--paper-lift);
  border:var(--rule-2);
  z-index:70;
}
.lang-menu[hidden]{display:none;}
.lang-menu a{
  display:block;
  padding:10px 14px;
  font-family:var(--ft-mono);
  font-size:13px;
}
.lang-menu a:hover{background:var(--paper-deep);}
.lang-menu a.is-current{
  color:var(--stamp-deep);
  font-weight:700;
  background:var(--paper-deep);
}

/* 汉堡按钮(≥44px 触达) */
.nav-toggle{
  display:none;
  min-width:44px;
  min-height:44px;
  border:var(--rule-2);
  background:var(--paper);
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
}
.nav-toggle-bar{
  display:block;
  width:20px;
  height:3px;
  background:var(--ink);
  flex-shrink:0;
}
html.nav-open .nav-toggle{background:var(--paper-deep);}

/* ---------- 页脚 ---------- */
.site-footer{
  border-top:var(--rule-3);
  background:var(--paper-lift);
  margin-top:72px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 0.9fr 1.3fr 0.9fr;
  gap:36px;
  padding-top:44px;
  padding-bottom:38px;
}
.footer-grid>*{min-width:0;}
.f-brand-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.f-brand-row img{flex-shrink:0;}
.f-about{
  font-size:13.5px;
  line-height:1.8;
  color:var(--ink-soft);
  max-width:38em;
}
.f-title{
  font-family:var(--ft-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:var(--rule-2);
  padding-bottom:8px;
  margin-bottom:12px;
}
.f-col ul li a{
  display:block;
  padding:5px 0;
  font-size:14px;
}
.f-col ul li a:hover{color:var(--stamp-deep);}
.f-hot{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.f-hot a{
  font-family:var(--ft-mono);
  font-size:12px;
  border:var(--rule-2);
  background:var(--paper);
  padding:4px 10px;
  max-width:100%;
  overflow:hidden;
}
.f-hot a:hover{background:var(--paper-deep);}
.footer-baseline{
  border-top:var(--rule-2);
}
.baseline-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-family:var(--ft-mono);
  font-size:12px;
  color:var(--ink-soft);
  padding-top:14px;
  padding-bottom:14px;
}
.baseline-legal{display:flex;gap:18px;flex-wrap:wrap;}
.baseline-legal a:hover{color:var(--stamp-deep);}

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

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .tabs a{padding:0 10px;font-size:14px;}
  .topbar{gap:20px;}
}

@media (max-width:920px){
  .topbar{gap:14px;}
  /* 导航收进抽屉:实色背景、整行可点、锁滚动 */
  .tabs{
    position:fixed;
    top:var(--head-h);
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    gap:0;
    margin-left:0;
    background:var(--paper-lift);
    border-bottom:var(--rule-3);
    max-height:calc(100dvh - var(--head-h));
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:60;
  }
  html.nav-open .tabs{display:flex;}
  .tabs a{
    display:flex;
    align-items:center;
    width:100%;
    min-height:48px;
    padding:14px var(--gutter);
    font-size:16px;
    border-top:2px solid var(--paper-deep);
  }
  .tabs a::after{display:none;}
  .tabs a.is-active{
    border-left:5px solid var(--stamp);
    padding-left:calc(var(--gutter) - 5px);
    background:var(--paper-deep);
  }
  /* 抽屉打开后 .tabs 的 margin-left:auto 失效,工具区自己贴最右 */
  .top-tools{margin-left:auto;}
  .nav-toggle{display:inline-flex;}
}

@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .strata{padding-top:48px;padding-bottom:48px;}
}

@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
  /* 站名较长时允许品牌区收缩折行,避免顶栏把页面顶出横向滚动 */
  .brand{flex-shrink:1;}
  .brand-name{font-size:16px;white-space:normal;line-height:1.12;}
  .brand-domain{display:none;}
  .sec-note{margin-left:0;width:100%;}
  .btn{font-size:15px;padding:12px 20px;}
}