/* ============================================================
   Surge官网 · base.css
   设计令牌 / 重置 / 排版 / 按钮 / 头部导航 / 页脚 / 通用元件
   视觉纪律:硬直角、零圆角、零投影、零渐变卡片;分区靠细白虚线;
   全站唯一花纹 = 黄黑 45° 斜纹(仅:当前导航项、当前 tab 标记、
   首推卡顶部条、文末引导卡顶部条);发光只给首页闪电主干一处。
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  /* 背景层级 */
  --bg:#060C16;
  --bg-deep:#040810;
  --bg-panel:#0B1424;
  --bg-panel2:#101B30;
  /* 描边与电路走线 */
  --border:#223148;
  --dash:rgba(234,241,251,.30);
  --dash-soft:rgba(234,241,251,.16);
  --btn-border:rgba(234,241,251,.32);
  /* 强调色:高压警示黄 */
  --accent:#FFD500;
  --accent-dark:#C7A200;
  /* 文字 */
  --text:#EAF1FB;
  --text-muted:#8A99B4;
  /* 语义色 */
  --success:#34D17B;
  --warn:#FFB020;
  --error:#FF5347;
  /* 闪电专用(仅首页 Hero) */
  --bolt-core:#F4F9FF;
  --bolt-branch:#D8E4F5;
  /* 半透明衬底 */
  --panel-glass:rgba(11,20,36,.66);
  --panel-glass-soft:rgba(11,20,36,.55);
  --chip-bg:rgba(6,12,22,.5);
  --peek-bg:rgba(4,8,16,.78);
  --veil-bg:rgba(4,8,16,.72);
  --plate-line:rgba(6,12,22,.55);
  /* 唯一花纹:黄黑 45° 斜纹(白名单内使用) */
  --stripe:repeating-linear-gradient(45deg,var(--accent) 0 13px,var(--bg) 13px 26px);
  --stripe-thin:repeating-linear-gradient(45deg,var(--accent) 0 6px,var(--bg) 6px 12px);
  /* 字体 */
  --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;
  /* 布局 */
  --nav-h:64px;
  --maxw:1200px;
  --gutter:40px;
}
@media (max-width:760px){
  :root{ --gutter:16px; }
}

/* ---------- 重置 ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 14px);
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
code{ font-family:var(--font-mono); }
::selection{ background:var(--accent); color:var(--bg); }
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
[hidden]{ display:none !important; }
html.nav-open{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* ---------- 布局 ---------- */
.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sec{
  padding-top:72px;
  padding-bottom:72px;
}
.sec--line{ border-top:1px dashed var(--dash); }
@media (max-width:760px){
  .sec{ padding-top:48px; padding-bottom:48px; }
}

/* ---------- 标题区 ---------- */
.sec-head{ margin-bottom:28px; }
.sec-kicker{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--text-muted);
  margin-bottom:12px;
}
.sec-kicker i{ width:6px; height:6px; background:var(--accent); flex:none; }
.sec-title{
  font-family:var(--font-display);
  font-size:clamp(24px,3.2vw,32px);
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.3;
}
.sec-title strong{ color:var(--accent); font-weight:800; }
.sec-desc{
  margin-top:10px;
  color:var(--text-muted);
  font-size:13.5px;
  line-height:1.8;
  max-width:680px;
}
.sec-desc strong{ color:var(--text); font-weight:600; }

.lead{ font-size:15px; line-height:1.9; color:var(--text-muted); }
.lead strong{ color:var(--text); font-weight:600; }
.mono{ font-family:var(--font-mono); }

/* ---------- 正文排版(教程/协议/文章) ---------- */
.prose{ font-size:14px; line-height:1.85; }
.prose > *:first-child{ margin-top:0; }
.prose p{ margin:0 0 16px; }
.prose h2{
  font-size:20px;
  font-weight:800;
  line-height:1.4;
  margin:38px 0 14px;
  padding-left:12px;
  border-left:5px solid var(--accent);
}
.prose h3{
  font-size:16px;
  font-weight:700;
  margin:26px 0 10px;
  display:flex; align-items:center; gap:8px;
}
.prose h3::before{
  content:"";
  width:7px; height:7px;
  background:var(--accent);
  flex:none;
}
.prose h4{ font-size:14px; font-weight:700; margin:20px 0 8px; }
.prose ul{ margin:0 0 16px; }
.prose ul li{ position:relative; padding-left:18px; margin-bottom:8px; }
.prose ul li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:6px; height:6px;
  background:var(--accent);
}
.prose ol{ counter-reset:step; margin:0 0 16px; }
.prose ol li{
  counter-increment:step;
  position:relative;
  padding-left:46px;
  margin-bottom:10px;
}
.prose ol li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:2px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--accent);
  border:1px dashed var(--dash);
  padding:2px 5px;
}
.prose pre{
  background:var(--bg-deep);
  border:1px solid var(--border);
  padding:14px 16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 0 16px;
}
.prose pre code{
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.7;
  color:var(--text);
  background:none;
  padding:0;
}
.prose code{
  font-family:var(--font-mono);
  font-size:.92em;
  color:var(--accent);
  background:var(--chip-bg);
  padding:1px 5px;
}
.prose blockquote{
  border-left:3px solid var(--accent);
  background:var(--bg-panel);
  padding:10px 16px;
  margin:0 0 16px;
  color:var(--text-muted);
}
.prose a{ color:var(--accent); border-bottom:1px dashed var(--dash); }
.prose a:hover{ border-bottom-color:var(--accent); }
.prose hr{ border:0; border-top:1px dashed var(--dash-soft); margin:28px 0; }
.prose .table-wrap{ margin:0 0 16px; }

/* ---------- 按钮 ---------- */
/* 主按钮:深色面板 + 黄描边 + 白字(2026-07-31 用户意见:不用斜纹背景,文字白色) */
.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  background:var(--bg-panel2);
  border:2px solid var(--accent);
  color:var(--text);
  font-size:15px;
  font-weight:700;
  letter-spacing:.1em;
  transition:background .15s linear,color .15s linear;
}
.btn-primary:hover{ background:var(--accent); color:var(--bg); }
.btn-secondary{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 20px;
  border:1px solid var(--btn-border);
  background:var(--panel-glass-soft);
  color:var(--text);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.06em;
  transition:border-color .15s linear,color .15s linear;
}
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }
.btn-sm{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  border:1px solid var(--btn-border);
  color:var(--text);
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  transition:border-color .15s linear,color .15s linear,background .15s linear;
}
.btn-sm:hover{ border-color:var(--accent); color:var(--accent); }
.btn-sm--solid{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);
  font-weight:700;
}
.btn-sm--solid:hover{ background:var(--text); border-color:var(--text); color:var(--bg); }

/* ---------- 图标基类 ---------- */
.ico{
  width:14px; height:14px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:square; stroke-linejoin:miter;
}
.ico-caret{ width:10px; height:10px; }

/* ---------- 顶部导航 ---------- */
.site-nav{
  position:sticky; top:0; z-index:30;
  height:var(--nav-h);
  display:flex; align-items:center;
  padding:0 var(--gutter);
  background:var(--bg);
  border-bottom:1px dashed var(--dash);
}
.site-nav--overlay{
  position:absolute; left:0; right:0;
  background:transparent;
}
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand-logo{ width:30px; height:30px; display:block; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.3; }
.brand-text strong{ font-size:15px; font-weight:800; letter-spacing:.04em; }
.brand-text em{
  font-style:normal;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.16em;
  color:var(--text-muted);
}
.nav-links{
  display:flex; align-items:stretch; gap:2px;
  margin-left:auto;
  align-self:stretch;
}
.nav-item{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  padding:0 12px;
  font-size:13px;
  color:var(--text-muted);
  white-space:nowrap;
  transition:color .15s linear;
}
.nav-item:hover{ color:var(--text); }
.nav-item.is-active{ color:var(--text); }
.nav-item.is-active::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:0;
  height:4px;
  background:var(--stripe-thin);
}
.nav-sep{
  width:0; height:20px;
  align-self:center;
  border-left:1px dashed var(--dash);
  margin:0 10px;
  flex:none;
}
.nav-tools{ display:flex; align-items:center; gap:4px; flex:none; }
.lang-switch{ position:relative; }
.lang-switch summary{
  list-style:none;
  display:inline-flex; align-items:center; gap:6px;
  min-height:36px;
  padding:8px 11px;
  font-size:13px;
  color:var(--text-muted);
  cursor:pointer; user-select:none;
  transition:color .15s linear;
}
.lang-switch summary::-webkit-details-marker{ display:none; }
.lang-switch summary:hover,
.lang-switch[open] summary{ color:var(--text); }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:40;
  min-width:150px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  padding:6px 0;
}
.lang-menu li a{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px;
  font-size:13px;
  color:var(--text-muted);
  white-space:nowrap;
  transition:color .15s linear,background .15s linear;
}
.lang-menu li a::before{
  content:"";
  width:6px; height:6px; flex:none;
  background:transparent;
}
.lang-menu li a:hover{ background:var(--bg-panel2); color:var(--text); }
.lang-menu li.is-current a{ color:var(--text); }
.lang-menu li.is-current a::before{ background:var(--accent); }
.nav-burger{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  color:var(--text-muted);
  transition:color .15s linear;
}
.nav-burger:hover{ color:var(--text); }
.nav-burger svg{ width:20px; height:20px; }
.nav-burger .ico-close{ display:none; }
html.nav-open .nav-burger .ico-open{ display:none; }
html.nav-open .nav-burger .ico-close{ display:block; }
.nav-veil{
  position:fixed; inset:var(--nav-h) 0 0 0;
  background:var(--veil-bg);
  opacity:0; visibility:hidden;
  transition:opacity .18s linear,visibility .18s linear;
  z-index:24;
}
@media (max-width:960px){
  .nav-links{
    position:fixed;
    top:var(--nav-h); left:0; right:0;
    display:block;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    padding:10px var(--gutter) 16px;
    max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateY(-8px);
    opacity:0; visibility:hidden;
    transition:transform .18s linear,opacity .18s linear,visibility .18s linear;
    z-index:26;
  }
  html.nav-open .nav-links{
    transform:none;
    opacity:1; visibility:visible;
  }
  html.nav-open .nav-veil{ opacity:1; visibility:visible; }
  .nav-item{
    display:flex;
    width:100%;
    min-height:48px;
    padding:0 10px;
    font-size:14px;
    border-bottom:1px dashed var(--dash-soft);
  }
  .nav-item:last-of-type{ border-bottom:0; }
  .nav-item.is-active::after{
    left:0; right:auto; bottom:12px; top:12px;
    width:4px; height:auto;
  }
  .nav-sep{ display:none; }
  .nav-tools{ margin-left:auto; }
  .nav-burger{ display:inline-flex; }
  .lang-switch summary{ min-height:44px; }
  .lang-menu{ z-index:40; }
  .lang-menu li a{ min-height:44px; }
}

/* ---------- 页脚 ---------- */
.site-footer{
  border-top:1px dashed var(--dash);
  background:var(--bg-deep);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.2fr 1fr;
  gap:32px;
  padding-top:48px;
  padding-bottom:36px;
}
.footer-brand p{
  margin-top:14px;
  font-size:12.5px;
  line-height:1.8;
  color:var(--text-muted);
  max-width:300px;
}
.footer-col h2{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--text-muted);
  margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.footer-col h2::before{
  content:"";
  width:6px; height:6px;
  background:var(--accent);
  flex:none;
}
.footer-col ul li{ margin-bottom:4px; }
.footer-col ul li a{
  display:inline-block;
  padding:4px 0;
  font-size:13px;
  color:var(--text-muted);
  transition:color .15s linear;
}
.footer-col ul li a:hover{ color:var(--accent); }
.footer-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.footer-tags a{
  display:inline-block;
  font-size:12px;
  color:var(--text-muted);
  border:1px dashed var(--dash-soft);
  padding:4px 10px;
  max-width:100%;
  overflow:hidden;
  transition:color .15s linear,border-color .15s linear;
}
.footer-tags a:hover{ color:var(--accent); border-color:var(--dash); }
.footer-langs{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.footer-langs a{
  font-size:12.5px;
  color:var(--text-muted);
  padding:4px 0;
  transition:color .15s linear;
}
.footer-langs a:hover{ color:var(--accent); }
.footer-langs a.is-current{ color:var(--text); }
.footer-langs a.is-current::before{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  background:var(--accent);
  margin-right:7px;
  vertical-align:1px;
}
.footer-legal{
  border-top:1px dashed var(--dash-soft);
  padding-top:16px;
  padding-bottom:20px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--text-muted);
}
.footer-legal a{ color:var(--text-muted); transition:color .15s linear; }
.footer-legal a:hover{ color:var(--accent); }
.footer-legal .spacer{ flex:1; }
@media (max-width:960px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
}

/* ---------- 面板 / 卡片 ---------- */
.panel{
  background:var(--bg-panel);
  border:1px solid var(--border);
  padding:20px 22px;
}
.panel--alt{ background:var(--bg-panel2); }
.panel-title{
  font-size:15px;
  font-weight:700;
  display:flex; align-items:center; gap:8px;
  margin-bottom:10px;
}
.panel-title::before{
  content:"";
  width:7px; height:7px;
  background:var(--accent);
  flex:none;
}

/* ---------- 网格 ---------- */
.grid{ display:grid; gap:16px; }
.grid > *{ min-width:0; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .grid-2,.grid-3{ grid-template-columns:1fr; }
}

/* ---------- 事实胶囊 ---------- */
.chip{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--text-muted);
  border:1px dashed var(--dash-soft);
  background:var(--chip-bg);
  padding:4px 10px;
  max-width:100%;
  overflow:hidden;
}
.chip b{ color:var(--text); font-weight:500; }

/* ---------- 表格 ---------- */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
}
.data-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:13px;
}
.data-table th{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--accent);
  text-align:left;
  padding:10px 14px;
  background:var(--bg-deep);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table td{
  padding:10px 14px;
  border-bottom:1px dashed var(--dash-soft);
  color:var(--text-muted);
  vertical-align:top;
}
.data-table tr:last-child td{ border-bottom:0; }
.data-table td strong{ color:var(--text); font-weight:600; }
.data-table td code{
  font-size:11.5px;
  color:var(--accent);
  background:var(--chip-bg);
  padding:1px 5px;
}

/* ---------- 滚动淡入 ---------- */
.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; }
}