/* =============================================================
   VPNEM —— base.css
   设计令牌 / reset / 排版 / 按钮 / 头部 / 页脚 / 通用容器
   主题:线路日程台(cool-tinted 冰紫底 · 南瓜橙强调)
   ============================================================= */

:root{
  /* —— 底色与面板(基底 / 面板 / 凹槽 三级) —— */
  --bg:#EAE8F7;
  --bg-panel:#F7F6FD;
  --bg-panel2:#DEDBF1;
  --border:#CFCBE6;

  /* —— 强调色(唯一强调色 + 一个渐变伴色) —— */
  --accent:#DB7420;
  --accent-dark:#B85A12;
  --accent-2:#F2A54A;
  --relay:#7E6BD9;

  /* —— 文字 —— */
  --text:#1F1D33;
  --muted:#5E5A7A;
  --white:#FFFFFF;

  /* —— 语义色 —— */
  --success:#2E9E6B;
  --warn:#B9880E;
  --error:#C8394A;

  /* —— 首屏渐变与半透明 tint —— */
  --hero-top:#F1EFFA;
  --hero-bottom:#E4E1F3;
  --tint-apricot-40:rgba(242,165,74,.40);
  --tint-apricot-18:rgba(242,165,74,.18);
  --tint-bg-0:rgba(234,232,247,0);
  --tint-accent-12:rgba(219,116,32,.12);
  --tint-accent-28:rgba(219,116,32,.28);
  --tint-violet-10:rgba(126,107,217,.10);
  --tint-ink-04:rgba(31,29,51,.04);
  --tint-ink-06:rgba(31,29,51,.06);
  --tint-success-14:rgba(46,158,107,.14);
  --tint-error-14:rgba(200,57,74,.14);
  --tint-white-14:rgba(255,255,255,.14);
  --tint-white-30:rgba(255,255,255,.30);
  --tint-white-60:rgba(255,255,255,.60);
  --tint-white-70:rgba(255,255,255,.70);

  /* —— 旗帜色 —— */
  --flag-white:#FFFFFF;
  --flag-jp:#BC002D;
  --flag-hk:#DE2910;
  --flag-sg:#EF3340;
  --flag-us-red:#B22234;
  --flag-us-blue:#3C3B6E;
  --flag-ca:#D52B1E;

  /* —— 圆角 —— */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:12px;
  --r-lg:14px;
  --r-pill:999px;

  /* —— 版心与节奏 —— */
  --gutter:40px;
  --maxw:1280px;
  --sec-y:72px;
  --toc-top:14px;
  --toc-anchor-offset:92px;

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

*{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--toc-anchor-offset);
}
html.nav-open{overflow:hidden}
body{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
svg{display:block}
img{max-width:100%;height:auto}
b,strong{font-weight:700}
button{font:inherit;color:inherit}
[hidden]{display:none}

/* —— 长串防破版:订阅链接 / 安装包文件名 —— */
code{
  font-family:var(--font-mono);
  font-size:.92em;
  overflow-wrap:anywhere;
  word-break:break-word;
}
pre{
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.65;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:16px;
  overflow-x:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}
pre code{overflow-wrap:normal;white-space:pre}

/* —— 版心与排版 —— */
.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.no-break{white-space:nowrap}
.clip-x{overflow-x:clip;max-width:100%}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-0.02em;
}
h1{font-size:clamp(34px,5vw,64px);line-height:1.08}
h2{font-size:clamp(26px,3.2vw,38px)}
h3{font-size:clamp(19px,2vw,22px)}
h4{font-size:17px}
p{font-size:17px;line-height:1.72}
.mono{font-family:var(--font-mono)}

/* —— 键盘焦点可见 —— */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* =============================================================
   按钮
   ============================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:52px;
  padding:0 26px;
  border:1px solid transparent;
  border-radius:var(--r-md);
  font-size:16px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-primary{
  background:linear-gradient(135deg,var(--accent-2) 0%,var(--accent) 100%);
  color:var(--white);
  box-shadow:0 12px 26px var(--tint-accent-28),inset 0 1px 0 var(--tint-white-30);
}
.btn-primary:hover{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%)}
.btn-secondary{
  background:var(--tint-white-70);
  border-color:var(--border);
  color:var(--text);
  box-shadow:inset 0 1px 0 var(--white);
}
.btn-secondary:hover{background:var(--white)}
.btn-quiet{
  background:transparent;
  border-color:var(--border);
  color:var(--muted);
}
.btn-quiet:hover{color:var(--text);background:var(--tint-white-60)}
.btn-small{height:40px;padding:0 16px;font-size:14px;border-radius:var(--r-sm)}
.btn-small svg{width:14px;height:14px}
.btn[disabled],
.btn.is-disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
}

/* =============================================================
   头部(header.js 注入)
   ============================================================= */
.topbar{height:72px;position:relative;z-index:6}
.topbar-in{height:100%;display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand-mark{width:28px;height:28px;display:block;flex:none}
.brand-word{
  font-family:var(--font-display);
  font-weight:800;
  font-size:21px;
  letter-spacing:-0.02em;
  line-height:1;
}
.tabs{height:100%}
.tabs ul{
  display:flex;
  align-items:center;
  gap:30px;
  height:100%;
  margin:0;
  padding:0;
  list-style:none;
}
.tabs a{
  position:relative;
  display:flex;
  align-items:center;
  height:72px;
  font-size:15px;
  font-weight:500;
  color:var(--muted);
}
.tabs a:hover{color:var(--text)}
.tabs a.is-active{color:var(--text);font-weight:600}
.tabs a.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:16px;
  height:2px;
  border-radius:2px;
  background:var(--accent);
}
.topbar-end{display:flex;align-items:center;gap:14px}
.btn-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 18px;
  border-radius:var(--r-sm);
  background:var(--tint-white-70);
  border:1px solid var(--border);
  font-size:14px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  box-shadow:inset 0 1px 0 var(--white),0 6px 16px var(--tint-ink-04);
}
.btn-login:hover{background:var(--white)}
.lang-wrap{position:relative}
.lang-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--muted);
  font-size:13.5px;
  cursor:pointer;
  white-space:nowrap;
}
.lang-btn:hover{background:var(--tint-white-70);border-color:var(--border);color:var(--text)}
.lang-btn svg{width:14px;height:14px;flex:none}
.lang-name{white-space:nowrap}
.lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:156px;
  padding:6px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  box-shadow:0 18px 36px var(--tint-ink-06);
  z-index:12;
}
.lang-menu[hidden]{display:none}
.lang-menu a{
  display:flex;
  align-items:center;
  min-height:38px;
  padding:0 12px;
  border-radius:var(--r-xs);
  font-size:14px;
  color:var(--text);
}
.lang-menu a:hover{background:var(--bg-panel2)}
.lang-menu a[aria-current="true"]{color:var(--accent);font-weight:700}
.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  min-width:44px;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--tint-white-70);
  cursor:pointer;
}
.hamburger:hover{background:var(--white)}
.hb-line{display:block;width:18px;height:2px;border-radius:2px;background:var(--text)}
.nav-drawer{display:none}
.drawer-list,
.drawer-langs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.nav-drawer a{
  display:flex;
  align-items:center;
  width:100%;
  min-height:48px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  font-size:16px;
  font-weight:600;
  color:var(--text);
}
.nav-drawer a:hover{background:var(--bg-panel2)}
.nav-drawer a.is-active{color:var(--accent)}
.drawer-title{
  margin:18px 12px 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--muted);
}
.drawer-langs a{font-size:15px;font-weight:500;color:var(--muted)}

/* =============================================================
   页脚(footer.js 注入)
   ============================================================= */
.site-footer{
  background:var(--bg-panel);
  border-top:1px solid var(--border);
  padding-top:56px;
  padding-bottom:28px;
}
.f-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:36px;
}
.f-brand{display:flex;align-items:center;gap:10px}
.f-brand img{width:28px;height:28px;flex:none}
.f-word{
  font-family:var(--font-display);
  font-weight:800;
  font-size:20px;
  letter-spacing:-0.02em;
}
.f-desc{
  margin-top:14px;
  font-size:14.5px;
  line-height:1.72;
  color:var(--muted);
  max-width:36ch;
}
.f-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.f-facts li{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 10px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--white);
  font-size:12.5px;
  color:var(--muted);
  max-width:100%;
  overflow:hidden;
}
.f-col h4{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--muted);
  text-transform:uppercase;
}
.f-col ul{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.f-col a{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  font-size:14.5px;
  color:var(--text);
}
.f-col a:hover{color:var(--accent)}
.f-hot{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.f-hot a{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--white);
  font-size:13px;
  color:var(--muted);
  max-width:100%;
  overflow:hidden;
}
.f-hot a:hover{color:var(--accent);border-color:var(--accent)}
.f-copy{
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 22px;
  font-size:13px;
  color:var(--muted);
}
.f-legal{display:flex;flex-wrap:wrap;gap:8px 20px;margin-left:auto}
.f-legal a{display:inline-flex;align-items:center;min-height:28px;color:var(--muted)}
.f-legal a:hover{color:var(--accent)}

/* =============================================================
   滚动淡入(reveal.js 配套;默认可见,隐藏态只由 .pending 承担)
   ============================================================= */
.reveal{transition:opacity .5s ease,transform .5s ease}
.reveal.pending{opacity:0;transform:translateY(16px)}

/* =============================================================
   线路状态容器夹取(动态组件,必须留在文档流内且不撑破版面)
   ============================================================= */
#server-status{
  position:static;
  display:block;
  overflow:hidden;
  max-width:100%;
  margin:0 0 32px;
}
#server-status > *{max-width:100%}

/* =============================================================
   响应式
   ============================================================= */
@media (max-width:1180px){
  :root{--gutter:32px}
  .topbar-in{gap:24px}
  .tabs ul{gap:20px}
}
@media (max-width:960px){
  :root{--gutter:24px}
  .tabs{display:none}
  .hamburger{display:inline-flex}
  .topbar-end{margin-left:auto}
  .lang-wrap{display:none}
  .nav-drawer{
    position:fixed;
    top:72px;
    left:0;
    right:0;
    bottom:0;
    z-index:8;
    display:none;
    max-height:calc(100dvh - 72px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:14px var(--gutter) 32px;
    background:var(--bg-panel);
    border-top:1px solid var(--border);
    box-shadow:0 24px 40px var(--tint-ink-06);
  }
  html.nav-open .nav-drawer{display:block}
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}
@media (max-width:768px){
  :root{--gutter:20px}
  body{font-size:16.5px}
  p{font-size:16.5px}
  .f-copy{flex-direction:column;align-items:flex-start}
  .f-legal{margin-left:0}
}
@media (max-width:640px){
  :root{--gutter:16px}
  .no-break{white-space:normal}
  .f-grid{grid-template-columns:minmax(0,1fr)}
  .btn{width:100%}
  .btn-small{width:auto}
  .btn-login{padding:0 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .reveal,
  .reveal.pending{opacity:1;transform:none;transition:none}
  *{transition:none !important;animation:none !important}
}