/* ============================================================
   Clash官网2026 · 深空轨道控制台 设计系统
   base.css —— 设计令牌 / reset / 排版 / 按钮 / 头部 / 页脚 / 面板 / reveal
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  /* 底色层次:近黑深蓝打底,面板两级递亮 */
  --void:#070B14;
  --deck-1:#0C1322;
  --deck-2:#111B2E;
  --hairline:#233149;

  /* 全站唯一强调色:炽橙 */
  --ember:#FF7A1A;
  --ember-deep:#D95F00;

  /* 文字:暖白两级 */
  --signal:#F3EDE2;
  --signal-dim:#94A0B4;

  /* 语义色 */
  --ok:#5FBF8A;
  --warn:#F2C14E;
  --err:#E5484D;

  /* 派生透明色(轨道线 / 微光 / 遮蔽) */
  --rail:rgba(243,237,226,.24);
  --rail-soft:rgba(243,237,226,.1);
  --halo-faint:rgba(255,122,26,.07);
  --halo:rgba(255,122,26,.16);
  --halo-strong:rgba(255,122,26,.4);
  --ember-tint:rgba(255,122,26,.12);
  --shade:rgba(3,6,12,.6);

  /* 字体栈 */
  --font-display:Georgia,'Times New Roman','Songti SC','SimSun',serif;
  --font-body:'Inter','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;

  /* 布局 */
  --wrap-max:1120px;
  --gutter:clamp(16px,4vw,32px);
  --header-h:64px;
  --edge:0px; /* 全站直角 */
  --panel-glow:0 0 22px var(--halo-faint);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  overflow-x:clip;
  background:var(--void);
  color:var(--signal);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
}
img,svg{max-width:100%;height:auto}
img{border:0}
button{font:inherit;color:inherit}
a{color:var(--ember);text-decoration:none}
a:hover{color:var(--ember-deep)}
::selection{background:var(--ember);color:var(--void)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
:target{scroll-margin-top:calc(var(--header-h) + 20px)}
html.nav-open{overflow:hidden}

/* ---------- 版心(移动端防贴边铁律:任何断点不许清零左右内边距) ---------- */
.wrap{
  max-width:var(--wrap-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- 区块节奏(纵向 padding 单独声明,禁止 padding:Y 0 简写) ---------- */
.band{
  padding-top:clamp(56px,8vw,96px);
  padding-bottom:clamp(56px,8vw,96px);
}
.band--tight{
  padding-top:clamp(32px,5vw,56px);
  padding-bottom:clamp(32px,5vw,56px);
}

/* ---------- 排版 ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.25;
  color:var(--signal);
  margin:0 0 .6em;
}
h1{font-size:clamp(34px,6vw,52px)}
h2{font-size:clamp(26px,4vw,38px)}
h3{font-size:clamp(19px,2.6vw,24px)}
h4{font-size:17px}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.2em;padding-left:1.4em}
li{margin-bottom:.45em}
strong{color:var(--signal)}
small{color:var(--signal-dim)}
hr{border:0;border-top:1px solid var(--rail);margin:2.4em 0}
.mono{font-family:var(--font-mono)}
.dim{color:var(--signal-dim)}

blockquote{
  margin:1.4em 0;
  padding:14px 20px;
  border-left:2px solid var(--ember);
  background:var(--deck-1);
  color:var(--signal-dim);
}
blockquote p{margin:0}

code{
  font-family:var(--font-mono);
  font-size:.9em;
  color:var(--ember);
  background:var(--deck-2);
  padding:2px 6px;
  border:1px solid var(--hairline);
}
pre{
  margin:1.4em 0;
  padding:18px 20px;
  background:var(--deck-2);
  border:1px solid var(--hairline);
  overflow-x:auto;
  line-height:1.65;
}
pre code{
  background:transparent;
  border:0;
  padding:0;
  color:var(--signal);
  font-size:13.5px;
}

/* 正文长文容器 */
.prose h2{margin-top:2em}
.prose h3{margin-top:1.6em}
.prose li{margin-bottom:.55em}
.prose img{border:1px solid var(--hairline)}

/* ---------- 轨道线标题(1px 暖白线贯穿 + 等宽编号) ---------- */
.orbit-rule{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:clamp(24px,4vw,44px);
}
.orbit-rule .orbit-idx{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.28em;
  color:var(--ember);
  white-space:nowrap;
  flex-shrink:0;
}
.orbit-rule .orbit-title{
  margin:0;
  min-width:0;
  overflow-wrap:break-word;
}
.orbit-rule::after{
  content:"";
  flex:1;
  height:1px;
  min-width:24px;
  background:var(--rail);
  transform:translateY(-6px);
}

/* ---------- Hero(纯排版海报:等宽 kicker + 衬线巨标题渐变) ---------- */
.hero{
  padding-top:clamp(80px,13vh,150px);
  padding-bottom:clamp(56px,9vh,110px);
}
.hero-kicker{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(11px,1.4vw,13px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--signal);
  margin-bottom:clamp(20px,3vh,32px);
}
.hero-kicker b{color:var(--ember);font-weight:500}
.hero-title{
  margin:0 0 clamp(28px,4.5vh,44px);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(46px,9vw,104px);
  line-height:1.05;
  letter-spacing:.005em;
  background-image:linear-gradient(103deg,var(--signal) 32%,var(--ember) 82%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:clamp(24px,4vh,36px);
}
.hero-lede{
  max-width:62ch;
  color:var(--signal-dim);
  font-size:17px;
  line-height:1.85;
}
.hero-lede strong{color:var(--signal)}
.hero-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:clamp(20px,3vh,30px);
  padding:0;
  list-style:none;
}
.hero-chips .chip{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--signal-dim);
  border:1px solid var(--hairline);
  padding:6px 13px;
  white-space:nowrap;
}
/* Hero 视觉装饰容器:配角,空则不占位 */
.hero-visual{margin-top:clamp(36px,5vh,52px);max-width:520px}
.hero-visual:empty{display:none}
.hero-visual img{
  width:100%;
  height:auto;
  border:1px solid var(--hairline);
  opacity:.88;
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 28px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  border-radius:var(--edge);
  border:1px solid var(--hairline);
  background:transparent;
  color:var(--signal);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn svg{flex-shrink:0}
/* 主按钮:炽橙实底 + 暖白 1px 描边 */
.btn--fire{
  background:var(--ember);
  border-color:var(--signal);
  color:var(--void);
  box-shadow:0 0 24px var(--halo);
}
.btn--fire:hover{
  background:var(--ember-deep);
  color:var(--void);
  box-shadow:0 0 30px var(--halo-strong);
}
/* 次按钮:描边 */
.btn--line{
  border-color:var(--rail);
  color:var(--signal);
}
.btn--line:hover{
  border-color:var(--ember);
  color:var(--ember);
}
.btn--mini{padding:9px 18px;font-size:13.5px}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ---------- 头部(header.js 注入) ---------- */
#site-header{min-height:var(--header-h)}
.masthead{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--void);
  border-bottom:1px solid var(--hairline);
}
.masthead-row{
  display:flex;
  align-items:center;
  gap:26px;
  min-height:var(--header-h);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:var(--signal);
  text-decoration:none;
  flex-shrink:0;
}
.brand img{flex-shrink:0;display:block}
.brand-name{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.brand-code{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.3em;
  color:var(--signal-dim);
  border-left:1px solid var(--hairline);
  padding-left:11px;
  white-space:nowrap;
}
/* 导航:tab 式,当前项底部指示条 */
.site-nav{display:flex;gap:2px}
.site-nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:var(--header-h);
  padding-inline:15px;
  font-size:15px;
  color:var(--signal-dim);
  text-decoration:none;
  white-space:nowrap;
}
.site-nav a:hover{color:var(--signal)}
.site-nav a::after{
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  bottom:-1px;
  height:2px;
  background:var(--ember);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s ease;
}
.site-nav a:hover::after{transform:scaleX(.45)}
.site-nav a.on{color:var(--signal)}
.site-nav a.on::after{transform:scaleX(1)}
/* 工具区(语言 + 汉堡):任何断点都贴最右 */
.masthead-tools{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
/* 语言下拉 */
.lang-dock{position:relative}
.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:44px;
  min-height:44px;
  padding:0 13px;
  background:transparent;
  border:1px solid var(--hairline);
  color:var(--signal-dim);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  cursor:pointer;
}
.lang-btn:hover{border-color:var(--ember);color:var(--signal)}
.lang-caret{font-size:10px;flex-shrink:0}
.lang-menu{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:158px;
  margin:0;
  padding:6px 0;
  list-style:none;
  background:var(--deck-2);
  border:1px solid var(--hairline);
  box-shadow:0 16px 34px var(--shade);
  z-index:90;
}
.lang-dock.open .lang-menu{display:block}
.lang-menu a{
  display:block;
  padding:10px 17px;
  font-size:14px;
  color:var(--signal-dim);
  text-decoration:none;
}
.lang-menu a:hover{background:var(--deck-1);color:var(--signal)}
.lang-menu a.now{color:var(--ember)}
/* 汉堡按钮:桌面隐藏 */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  background:transparent;
  border:1px solid var(--hairline);
  color:var(--signal);
  cursor:pointer;
}
.nav-toggle:hover{border-color:var(--ember)}

/* ---------- 页脚(footer.js 注入) ---------- */
.site-foot{
  margin-top:clamp(48px,8vw,88px);
  border-top:1px solid var(--hairline);
  background:var(--deck-1);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.3fr .9fr;
  gap:36px;
  padding-top:clamp(40px,6vw,64px);
  padding-bottom:clamp(32px,5vw,52px);
}
.foot-grid>*{min-width:0}
.foot-brand .brand{margin-bottom:16px}
.foot-intro{
  font-size:14px;
  color:var(--signal-dim);
  max-width:38ch;
  margin-bottom:14px;
}
.foot-coord{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--signal-dim);
  margin:0;
}
.foot-h{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ember);
  margin:0 0 16px;
}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:9px}
.foot-col a{color:var(--signal-dim);font-size:14px;text-decoration:none}
.foot-col a:hover{color:var(--ember)}
.foot-col a.now{color:var(--ember)}
.hotwords{display:flex;flex-wrap:wrap;gap:8px}
.hotwords a{
  font-size:12.5px;
  color:var(--signal-dim);
  border:1px solid var(--hairline);
  padding:5px 11px;
  text-decoration:none;
  white-space:nowrap;
}
.hotwords a:hover{border-color:var(--ember);color:var(--ember)}
.foot-base{border-top:1px solid var(--rail-soft)}
.foot-base-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  padding-top:20px;
  padding-bottom:20px;
}
.foot-base-row p{margin:0;font-size:13px;color:var(--signal-dim)}
.foot-legal a{color:var(--signal-dim);text-decoration:none;margin-left:18px}
.foot-legal a:first-child{margin-left:0}
.foot-legal a:hover{color:var(--ember)}

/* ---------- 通用面板 / 卡片基底(直角 + 1px 描边 + 极微弱炽橙外发光) ---------- */
.panel{
  background:var(--deck-1);
  border:1px solid var(--hairline);
  border-radius:var(--edge);
  box-shadow:var(--panel-glow);
  padding:clamp(20px,3vw,30px);
}
.panel--raised{background:var(--deck-2)}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.card-grid>*{min-width:0}

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

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .brand-code{display:none}
  .nav-toggle{display:inline-flex}
  /* 工具区窄屏仍贴最右(auto 边距在导航收起后必须由自己补上) */
  .masthead-tools{margin-left:auto}
  /* 导航收进抽屉:实色底、整行可点、锁滚动、防穿透 */
  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--deck-1);
    border-bottom:1px solid var(--hairline);
    box-shadow:0 20px 38px var(--shade);
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  html.nav-open .site-nav{display:block}
  .site-nav a{
    display:flex;
    width:100%;
    min-height:48px;
    padding-top:13px;
    padding-bottom:13px;
    padding-inline:var(--gutter);
    border-top:1px solid var(--rail-soft);
    font-size:16px;
  }
  .site-nav a::after{content:none}
  .site-nav a.on{
    color:var(--ember);
    box-shadow:inset 3px 0 0 var(--ember);
  }
}
@media (max-width:640px){
  body{font-size:15px}
  .hero{padding-top:clamp(56px,10vh,90px)}
  .hero-lede{font-size:15.5px}
  .btn{padding:12px 22px}
  .orbit-rule{gap:12px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .foot-base-row{flex-direction:column;align-items:flex-start}
  .masthead-row{gap:14px}
  .brand{min-width:0}
  .brand-name{overflow:hidden;text-overflow:ellipsis}
}

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