/* ==========================================================================
   VPNWI · base.css
   Design tokens, reset, typography, header, footer, buttons, surfaces,
   reveal transitions. Loaded by every page in every language directory.
   ========================================================================== */

:root{
  /* ---- 表面三级 ---- */
  --bg:#EAE7F4;
  --bg-hi:#F7F5FD;
  --bg-deep:#E1DCEF;
  --bg-panel:#FFFFFF;
  --bg-panel-2:#DFDAEE;
  --bg-bar:#F1EFF9;
  --bg-body:#F9F8FD;
  --bg-subtle:#F3F1FA;
  --bg-inset:#EDEBF6;
  --hero-bg:radial-gradient(135% 96% at 50% -8%,#F8F6FE 0%,#EAE7F4 46%,#E2DDEF 100%);
  --head-bg:rgba(238,235,247,.86);

  /* ---- 描边 ---- */
  --border:#CFC9E3;
  --border-soft:#E5E1F1;
  --line-soft:rgba(11,95,107,.10);

  /* ---- 强调色对 ---- */
  --accent:#0B5F6B;
  --accent-dark:#06414A;
  --accent-2:#3FB8A6;
  --tint-accent:rgba(11,95,107,.07);
  --tint-accent-2:rgba(63,184,166,.26);
  --accent-ring:rgba(11,95,107,.22);

  /* ---- 文字 ---- */
  --text:#1A1B2E;
  --text-muted:#5C5F78;
  --text-faint:#8A8CA6;

  /* ---- 语义色 ---- */
  --success:#1E8E6A;
  --warn:#B8860B;
  --error:#C1432E;
  --success-halo:rgba(30,142,106,.16);

  /* ---- 旗帜色（装置内取页面色板） ---- */
  --flag-red:#C1432E;
  --flag-navy:#25406F;
  --flag-white:#FFFFFF;

  /* ---- 纹理与光晕 ---- */
  --dot:rgba(11,95,107,.11);
  --halo:rgba(63,184,166,.22);
  --mask-solid:#000;
  --grid-line:rgba(11,95,107,.06);

  /* ---- 投影 ---- */
  --shadow-1:0 1px 2px rgba(11,95,107,.05),0 8px 20px -12px rgba(11,95,107,.16);
  --shadow-2:0 2px 0 rgba(255,255,255,.9) inset,0 20px 44px -22px rgba(11,95,107,.30);
  --shadow-win:0 2px 0 rgba(255,255,255,.92) inset,0 30px 70px -30px rgba(11,95,107,.34);
  --shadow-cta:0 12px 24px -12px rgba(11,95,107,.55);
  --tray-hi:rgba(255,255,255,.85);
  --switch-inset:rgba(6,65,74,.30);
  --knob-shadow:0 1px 2px rgba(6,65,74,.40);

  /* ---- 字体栈 ---- */
  --font-display:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans SC",monospace;

  /* ---- 尺寸 ---- */
  --wrap:1240px;
  --head-h:60px;
  --gutter:32px;
  --r-s:8px;
  --r-m:10px;
  --r-l:14px;
  --r-xl:20px;
  --r-pill:999px;
}

/* ============================ reset ============================ */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 18px);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--accent);}
img,svg{display:block;}
img{max-width:100%;height:auto;}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;}
table{border-collapse:collapse;border-spacing:0;}
strong,b{font-weight:600;}

/* 长不可断串（订阅链接 / 文件名）就地防溢出 */
code,kbd,samp{overflow-wrap:anywhere;word-break:break-word;}

/* 焦点可见（键盘） */
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-s);
}
.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;
}

/* ============================ 布局 ============================ */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding-inline:var(--gutter);
}
/* 区块节奏只声明纵向，禁止 padding:Y 0 简写 */
.sec{padding-top:76px;padding-bottom:76px;}
.sec-tight{padding-top:48px;padding-bottom:48px;}
.sec-loose{padding-top:96px;padding-bottom:96px;}
.sec-bg-panel{background:var(--bg-hi);}
.sec-bg-deep{background:var(--bg-deep);}
/* 含绝对定位装饰的区块：横向裁切，防 375px 撑宽 */
.clip-x{overflow-x:clip;position:relative;}
.stack>*+*{margin-top:16px;}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.demo-col{min-width:0;}
.demo-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:10px;
}

/* 中文关键词防断词：只包 2~4 个汉字 */
.no-break{white-space:nowrap;}

/* 装饰性微倾斜：窄屏一律归零 */
.tilt{transform:rotate(-.45deg);}
.tilt-r{transform:rotate(.5deg);}

/* ============================ 排版 ============================ */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);}
h1{
  font-weight:800;
  font-size:clamp(52px,4.4vw,72px);
  line-height:1.08;
  letter-spacing:-.03em;
}
h2{
  font-weight:800;
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.2;
  letter-spacing:-.025em;
}
h3{
  font-weight:700;
  font-size:clamp(18px,1.6vw,21px);
  line-height:1.35;
  letter-spacing:-.015em;
}
h4{font-weight:700;font-size:16px;line-height:1.4;letter-spacing:-.01em;}
/* 标题元素自身严禁 flex/grid（span 包裹会裂成窄柱） */
h1,h2,h3,h4{display:block;text-wrap:balance;}
.lead{font-size:18px;line-height:1.7;color:var(--text-muted);}
.muted{color:var(--text-muted);}
.faint{color:var(--text-faint);}
.mono{font-family:var(--font-mono);}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}

.sec-head{max-width:760px;margin:0 auto 38px;text-align:center;}
.sec-head-left{margin-left:0;text-align:left;}
.sec-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
.sec-title{margin:0;}
.sec-lead{margin-top:12px;font-size:16px;line-height:1.7;color:var(--text-muted);}

/* ============================ 按钮 ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;border-radius:var(--r-m);
  font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,color .16s ease,background-color .16s ease;
}
.btn svg{width:15px;height:15px;flex:none;}
.btn-primary{
  color:var(--flag-white);
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 100%);
  box-shadow:var(--shadow-cta);
}
.btn-primary:hover{color:var(--flag-white);transform:translateY(-1px);box-shadow:0 18px 32px -14px rgba(11,95,107,.62);}
.btn-ghost{
  color:var(--text);background:var(--bg-panel);
  border-color:var(--border);box-shadow:var(--shadow-1);
}
.btn-ghost:hover{border-color:var(--accent-ring);color:var(--accent);}
.btn-secondary{
  color:var(--text);background:var(--bg-subtle);
  border-color:var(--border);box-shadow:var(--shadow-1);
}
.btn-secondary:hover{border-color:var(--accent-ring);color:var(--accent);background:var(--bg-panel);}
.btn-sm{height:38px;padding:0 16px;font-size:13.5px;border-radius:var(--r-s);}
.btn-sm svg{width:13px;height:13px;}
.btn-block{width:100%;}
.btn[aria-disabled="true"],.btn.is-disabled{opacity:.5;pointer-events:none;box-shadow:none;}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}

/* ============================ 表面 / 卡片 ============================ */
.card{
  background:var(--bg-panel);border:1px solid var(--border-soft);
  border-radius:var(--r-m);box-shadow:var(--shadow-1);
}
.panel{
  background:var(--bg-panel);border:1px solid var(--border);
  border-radius:var(--r-l);box-shadow:var(--shadow-2);
}
.panel-pad{padding:22px 24px;}
.hairline{border-top:1px solid var(--border-soft);margin:22px 0;}

/* ============================ 顶部导航 ============================ */
.site-head{
  position:sticky;top:0;z-index:60;
  height:var(--head-h);
  background:var(--head-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-soft);
}
.head-row{height:100%;display:flex;align-items:center;gap:20px;}
.brand{display:flex;align-items:center;gap:9px;flex:none;}
.brand-mark{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;
  background:var(--bg-panel);border:1px solid var(--border-soft);
  box-shadow:var(--shadow-1);
}
.brand-mark img{width:22px;height:22px;}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:-.02em;}
.brand-cn{
  font-size:12px;font-weight:500;color:var(--text-faint);letter-spacing:.02em;
  padding-left:9px;border-left:1px solid var(--border);
}
.main-nav{display:flex;align-items:center;gap:2px;margin-left:6px;min-width:0;}
/* 导航 ul 自身必须 flex，否则 li 逐行堆成竖列 */
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.nav-list li{display:flex;}
.nav-item{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;
  border-radius:var(--r-s);font-size:13px;font-weight:500;color:var(--text-muted);
  white-space:nowrap;
  transition:color .15s ease,background-color .15s ease;
}
.nav-item svg{width:15px;height:15px;flex:none;opacity:.85;}
.nav-item:hover{color:var(--text);background:var(--bg-panel);}
.nav-item.is-active{color:var(--accent);background:var(--bg-panel);box-shadow:var(--shadow-1);}
.nav-item.is-active svg{opacity:1;}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none;}
.btn-login{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:0 16px;
  border-radius:9px;border:1px solid var(--border);background:var(--bg-panel);
  font-size:13px;font-weight:600;color:var(--text);box-shadow:var(--shadow-1);
  white-space:nowrap;
  transition:border-color .15s ease,color .15s ease;
}
.btn-login:hover{border-color:var(--accent-ring);color:var(--accent);}

/* 语言切换 */
.lang-switch{position:relative;}
.lang-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:34px;min-width:44px;padding:0 10px;
  border-radius:9px;font-size:12.5px;color:var(--text-muted);
  transition:color .15s ease,background-color .15s ease;
}
.lang-btn:hover{color:var(--text);background:var(--bg-panel);}
.lang-btn .lang-globe{width:13px;height:13px;flex:none;color:var(--text-faint);}
.lang-btn .lang-caret{width:11px;height:11px;flex:none;color:var(--text-faint);}
.lang-label{white-space:nowrap;}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:5;
  min-width:158px;padding:6px;
  background:var(--bg-panel);border:1px solid var(--border);
  border-radius:var(--r-m);box-shadow:var(--shadow-2);
}
.lang-menu[hidden]{display:none;}
.lang-menu a{
  display:flex;align-items:center;min-height:34px;padding:0 10px;
  border-radius:var(--r-s);font-size:13px;color:var(--text-muted);
}
.lang-menu a:hover{background:var(--bg-subtle);color:var(--text);}
.lang-menu a[aria-current="true"]{color:var(--accent);font-weight:600;background:var(--tint-accent);}

/* 汉堡与抽屉 */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;border-radius:var(--r-s);
  border:1px solid var(--border);background:var(--bg-panel);color:var(--text);
  box-shadow:var(--shadow-1);
}
.nav-toggle svg{width:18px;height:18px;}
.mobile-drawer{
  display:none;
  position:fixed;left:0;right:0;top:var(--head-h);z-index:3;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-2);
  max-height:calc(100dvh - var(--head-h));
  overflow-y:auto;overscroll-behavior:contain;
  padding:10px var(--gutter) 22px;
}
.mobile-drawer.is-open{display:block;}
.drawer-list,.drawer-lang{list-style:none;margin:0;padding:0;}
.drawer-list a,.drawer-lang a{
  display:flex;width:100%;align-items:center;gap:10px;
  min-height:46px;padding:11px 4px;
  border-bottom:1px solid var(--border-soft);
  font-size:15px;color:var(--text);
}
.drawer-list a svg{width:16px;height:16px;flex:none;color:var(--accent);}
.drawer-lang{margin-top:12px;}
.drawer-lang a{font-size:14px;color:var(--text-muted);}
.drawer-lang a[aria-current="true"]{color:var(--accent);font-weight:600;}
.nav-veil{
  display:none;
  position:fixed;left:0;right:0;top:var(--head-h);height:100vh;height:100dvh;
  z-index:1;background:rgba(26,27,46,.36);
}
.nav-veil.is-open{display:block;}
html.nav-open{overflow:hidden;}

/* ============================ 页脚 ============================ */
.site-foot{
  background:var(--bg-deep);
  border-top:1px solid var(--border);
  padding-top:56px;
  color:var(--text-muted);
}
.foot-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;
  padding-bottom:40px;
}
.foot-brand{min-width:0;}
.foot-desc{margin-top:14px;font-size:13.5px;line-height:1.75;max-width:360px;}
.foot-facts{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;}
.foot-facts li{
  font-family:var(--font-mono);font-size:11px;color:var(--accent);
  background:var(--tint-accent);border:1px solid var(--accent-ring);
  border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap;
}
.foot-col{min-width:0;}
.foot-title{
  font-size:13px;font-weight:700;color:var(--text);letter-spacing:.02em;
  margin:0 0 12px;
}
.foot-links li,.foot-hot li,.foot-lang li{margin-bottom:4px;}
.foot-links a,.foot-hot a,.foot-lang a{
  display:inline-flex;align-items:center;min-height:28px;
  font-size:13.5px;color:var(--text-muted);
}
.foot-hot a{font-size:13px;}
.foot-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 24px;
  padding-top:18px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--border);
  font-size:12.5px;
}
.foot-legal{display:flex;flex-wrap:wrap;gap:18px;}
.foot-legal a{display:inline-flex;align-items:center;min-height:28px;font-size:12.5px;}
.foot-note{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);}

/* ============================ reveal ============================ */
.reveal{transition:opacity .5s ease,transform .5s ease;}
.reveal.pending{opacity:0;transform:translateY(16px);}
.reveal.shown{opacity:1;transform:none;}

/* ============================ 服务端状态槽位 ============================ */
/* 文档流占位 + 裁切，禁止绝对定位 / 负 margin */
#server-status{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  margin:0 0 36px;
  padding:0;
}
#server-status>*{max-width:100%;}
#server-status table{width:100%;}

/* ============================ 响应式 ============================ */
@media (max-width:1080px){
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:28px;}
}
@media (max-width:900px){
  .main-nav{display:none;}
  .brand-cn{display:none;}
  /* 导航收起后工具区必须自己靠右 */
  .head-actions{margin-left:auto;}
  .nav-toggle{display:inline-flex;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px;}
  h1{font-size:clamp(30px,7vw,40px);}
  .sec{padding-top:56px;padding-bottom:56px;}
}
@media (max-width:640px){
  :root{--gutter:18px;}
  .no-break{white-space:normal;}
  .tilt,.tilt-r{transform:none;}
  .head-row{gap:10px;}
  .head-actions{gap:6px;}
  .lang-label{display:none;}
  .lang-btn{padding:0 8px;}
  .btn-row{flex-direction:column;align-items:stretch;}
  .btn-row .btn{width:100%;}
  .foot-grid{grid-template-columns:1fr;gap:24px;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}
  .panel-pad{padding:18px 16px;}
  .sec{padding-top:44px;padding-bottom:44px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal.pending{opacity:1;transform:none;transition:none;}
  .btn{transition:none;}
  .btn-primary:hover{transform:none;}
}

/* lh:local-harden:start */
:is(h1,h2,h3,h4){text-wrap:balance}
:is(p,li,dd,dt,figcaption,blockquote,td,th){text-wrap:pretty}
html[lang|="ko"] body{word-break:keep-all;overflow-wrap:break-word}
html[lang|="ja"] :is(h1,h2,h3,h4){word-break:auto-phrase}
.lh-tscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
@media (max-width:640px){.lh-tscroll :is(th,td){min-width:5.5em}}
@supports (animation-timeline:scroll()){
  .float-cta{animation:lh-fab-in linear both;animation-timeline:scroll(root);animation-range:0 70vh}
}
@keyframes lh-fab-in{0%,45%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}
/* lh:local-harden:end */