/* ============================================================
   VPNYS · base.css
   设计令牌 / Reset / 排版 / 按钮 / 头部导航 / 页脚 / 通用面板
   主题:通行清单(Pass List)— 冷彩底策略
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  /* 颜色 — 冷彩底 */
  --bg:#E3E4F4;
  --bg-panel:#F4F5FC;
  --bg-panel-2:#D7DAEF;
  --bg-veil:rgba(227,228,244,.86);
  --border:#C4C8E3;
  --line:rgba(196,200,227,.7);
  --accent:#1B2047;
  --accent-dark:#0F1230;
  --text:#12162E;
  --text-muted:#5A6080;
  --success:#1E9A69;
  --warn:#D9931B;
  --error:#D4463A;
  --hl:#3A78E8;
  --success-soft:rgba(30,154,105,.14);
  --warn-soft:rgba(217,147,27,.16);
  --error-soft:rgba(212,70,58,.12);
  --glow:rgba(150,214,236,.55);
  --dot:rgba(18,22,46,.08);

  /* 旗帜色 */
  --flag-red:#D2302C;
  --flag-blue:#2C4A9C;
  --flag-white:#FFFFFF;
  --flag-green:#2F8F4E;

  /* 投影 */
  --shadow-near:0 1px 2px rgba(18,22,46,.10),0 4px 10px -2px rgba(18,22,46,.12);
  --shadow-far:0 38px 72px -26px rgba(18,22,46,.34);
  --shadow-card:0 1px 2px rgba(18,22,46,.06),0 10px 28px -14px rgba(18,22,46,.2);

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

  /* 圆角 */
  --r:6px;
  --r-sm:4px;
  --r-pill:999px;

  /* 布局 */
  --nav-h:72px;
  --peek:56px;
  --gutter:40px;
  --container:1280px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 14px);
  scroll-behavior:smooth;
}
body{
  margin:0;
  font:400 16px/1.55 var(--font-body);
  color:var(--text);
  background-color:var(--bg);
  background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);
  background-size:22px 22px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);line-height:1.2;color:var(--text)}
p{margin:0}
button{
  font:inherit;cursor:pointer;background:none;border:0;color:inherit;padding:0;
}
input,select,textarea{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
code{
  font-family:var(--font-mono);
  font-size:.92em;
  overflow-wrap:anywhere;
  word-break:break-word;
}
pre{
  overflow-x:auto;max-width:100%;
  background:var(--accent);color:var(--bg-panel);
  border-radius:var(--r);
  padding:18px 20px;
  font-family:var(--font-mono);
  font-size:13.5px;line-height:1.6;
}
pre code{background:none;color:inherit;padding:0;overflow-wrap:normal}
blockquote{margin:0}
:focus-visible{outline:2px solid var(--hl);outline-offset:2px}
::selection{background:var(--hl);color:var(--bg-panel)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* 中文关键词防断词(桌面 nowrap,窄屏放开) */
.no-break{white-space:nowrap}

/* ---------- 版心 ---------- */
.wrap{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-inline:var(--gutter);
}

/* ---------- 区块节奏(只声明纵向,禁止 Y 0 简写) ---------- */
.sec{padding-top:88px;padding-bottom:88px}
.sec--tight{padding-top:56px;padding-bottom:56px}
.sec__head{max-width:760px;margin-bottom:40px}
.sec__kicker{
  display:inline-flex;align-items:center;gap:8px;
  font:600 12px/1 var(--font-mono);letter-spacing:.08em;
  color:var(--text-muted);text-transform:uppercase;
}
.sec__kicker::before{content:"";width:18px;height:2px;background:var(--hl);border-radius:1px}
.sec__title{
  margin-top:12px;
  font-size:clamp(30px,4vw,44px);
  font-weight:900;letter-spacing:-.02em;line-height:1.15;
  text-wrap:balance;
}
.sec__desc{margin-top:14px;font-size:16.5px;line-height:1.65;color:var(--text-muted);max-width:640px}

/* ---------- 排版 ---------- */
.lead-p{font-size:17px;line-height:1.65;color:var(--text-muted)}
.lead-p strong{color:var(--text);font-weight:700}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;border-radius:var(--r);
  font-weight:700;font-size:15px;line-height:1;
  border:1.5px solid transparent;
  transition:background-color .15s,border-color .15s,color .15s,transform .15s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:var(--bg-panel);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--accent)}
.btn--login{
  height:38px;padding:0 18px;font-size:14px;
  background:var(--accent);color:var(--bg-panel);
  border-color:var(--accent);border-radius:var(--r-pill);
}
.btn--login:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn--sm{height:36px;padding:0 14px;font-size:13px;border-radius:var(--r-sm)}
.btn--block{width:100%}
.btn--light{background:var(--bg-panel);color:var(--accent);border-color:var(--bg-panel)}
.btn--light:hover{background:var(--bg);border-color:var(--bg)}

/* ---------- 头部导航(header.js 注入) ---------- */
#site-header{position:sticky;top:0;z-index:200}
.top{
  position:relative;z-index:130;
  height:var(--nav-h);
  background:var(--bg-veil);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.top__in{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;margin-right:12px;flex-shrink:0}
.brand img{width:32px;height:32px;flex-shrink:0}
.brand__name{font:900 19px/1 var(--font-display);letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.nav{display:flex;align-items:center;gap:2px}
.nav a{
  display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:var(--r-pill);
  font-weight:600;font-size:15px;color:var(--text-muted);
  white-space:nowrap;
  transition:background-color .15s,color .15s;
}
.nav a:hover{color:var(--text)}
.nav a.is-on{background:var(--bg-panel-2);color:var(--text)}
.top__right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}

/* 语言切换 */
.lang-wrap{position:relative}
.lang{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;padding:8px 12px;
  font-size:14px;font-weight:600;color:var(--text-muted);
  border-radius:var(--r-pill);
  transition:color .15s,background-color .15s;
}
.lang:hover{color:var(--text)}
.lang svg{flex-shrink:0;transition:transform .15s}
.lang[aria-expanded="true"] svg{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:30;
  min-width:158px;padding:6px;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-near);
  display:none;
}
.lang-menu.is-open{display:block}
.lang-menu a{
  display:flex;align-items:center;justify-content:space-between;
  min-height:38px;padding:9px 12px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;color:var(--text-muted);
}
.lang-menu a:hover{background:var(--bg-panel-2);color:var(--text)}
.lang-menu a.is-cur{color:var(--text);background:var(--bg-panel-2)}
.lang-menu a.is-cur::after{content:"✓";font-size:12px;color:var(--success)}

/* 汉堡按钮 */
.hamb{
  display:none;
  min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
  border-radius:var(--r);
  color:var(--text);
}
.hamb span{display:block;width:20px;height:2px;background:currentColor;border-radius:1px;transition:transform .2s,opacity .2s}
.hamb span + span{margin-top:5px}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 移动端抽屉(实色背景,整行可点) */
.drawer{
  position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:120;
  background:var(--bg);
  padding:14px var(--gutter) 36px;
  overflow-y:auto;overscroll-behavior:contain;
  display:none;
}
.drawer.is-open{display:block}
.drawer a{
  display:flex;align-items:center;width:100%;
  min-height:48px;padding:13px 12px;
  font-size:16px;font-weight:600;color:var(--text);
  border-bottom:1px solid var(--line);
}
.drawer a:hover{color:var(--accent)}
.drawer a.is-on{color:var(--accent);font-weight:800}
.drawer__lang{margin-top:22px}
.drawer__lang h3{
  font:600 12px/1 var(--font-mono);letter-spacing:.06em;
  color:var(--text-muted);margin:0 0 8px;padding:0 12px;
}
.drawer__lang a{color:var(--text-muted);font-size:15px}
.drawer__lang a.is-cur{color:var(--text)}
.drawer-veil{
  position:fixed;inset:0;z-index:110;
  background:rgba(15,18,48,.35);
  display:none;
}
.drawer-veil.is-open{display:block}
html.nav-open{overflow:hidden}

/* ---------- 页脚(footer.js 注入) ---------- */
.site-footer{
  border-top:1px solid var(--border);
  background:var(--bg-panel);
  margin-top:88px;
}
.site-footer__in{
  padding-top:56px;
  padding-bottom:28px;
  display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:40px;
}
.site-footer__brand .brand img{width:28px;height:28px}
.site-footer__desc{margin-top:12px;font-size:14px;line-height:1.65;color:var(--text-muted);max-width:360px}
.site-footer__trust{
  margin-top:16px;
  display:flex;flex-wrap:wrap;gap:6px 16px;
  font-size:12.5px;font-weight:600;color:var(--text-muted);
}
.site-footer__trust li{display:inline-flex;align-items:center;gap:5px}
.site-footer__trust svg{flex-shrink:0;color:var(--success)}
.site-footer h4{
  font:600 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);margin:6px 0 14px;
}
.site-footer__links li + li{margin-top:2px}
.site-footer__links a{
  display:inline-block;padding:5px 0;
  font-size:14.5px;font-weight:600;color:var(--text);
}
.site-footer__links a:hover{color:var(--accent)}
.site-footer__hot{display:flex;flex-wrap:wrap;gap:8px}
.site-footer__hot a{
  display:inline-flex;align-items:center;
  padding:7px 12px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--bg);
  font-size:13px;font-weight:600;color:var(--text-muted);
  transition:color .15s,border-color .15s;
}
.site-footer__hot a:hover{color:var(--text);border-color:var(--accent)}
.site-footer__bottom{
  border-top:1px solid var(--line);
  margin-top:36px;
  padding-top:20px;
  padding-bottom:26px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;
  font-size:13px;color:var(--text-muted);
}
.site-footer__langs{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;font-weight:600}
.site-footer__langs a{color:var(--text-muted);padding:4px 0}
.site-footer__langs a:hover{color:var(--text)}
.site-footer__langs a.is-cur{color:var(--text)}
.site-footer__legal{display:flex;flex-wrap:wrap;gap:18px;margin-left:auto}
.site-footer__legal a{font-weight:600;color:var(--text-muted);padding:4px 0}
.site-footer__legal a:hover{color:var(--text)}

/* ---------- 通用卡片/面板 ---------- */
.panel{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-card);
}
.slot{background:var(--bg-panel-2);border-radius:var(--r-sm)}

/* ---------- 徽章/胶囊 ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  height:24px;padding:0 10px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;letter-spacing:.02em;
  background:var(--bg-panel-2);color:var(--text);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.badge--ok{background:var(--success-soft);color:var(--success)}
.badge--warn{background:var(--warn-soft);color:var(--warn)}
.badge--err{background:var(--error-soft);color:var(--error)}
.badge--hl{background:var(--hl);color:var(--bg-panel)}

/* ---------- 滚动淡入(reveal.js 配合;默认可见,隐藏态只在 .pending) ---------- */
.reveal{transition:opacity .5s ease,transform .5s ease}
.reveal.pending{opacity:0;transform:translateY(16px)}
.reveal.shown{opacity:1;transform:none}

/* ---------- 线路状态容器(servers.js 注入,必须夹住网格) ---------- */
#server-status{overflow:hidden}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .site-footer__in{grid-template-columns:1.4fr 1fr;gap:32px}
}
@media (max-width:900px){
  .nav{display:none}
  .hamb{display:inline-flex}
  .top__in{gap:12px}
}
@media (max-width:768px){
  :root{--gutter:20px}
  .sec{padding-top:56px;padding-bottom:56px}
  .sec__head{margin-bottom:28px}
  .site-footer__in{grid-template-columns:1fr;gap:28px}
  .site-footer__legal{margin-left:0}
  .top__in{gap:8px}
  .lang{padding:8px 9px}
}
@media (max-width:640px){
  :root{--gutter:16px}
  .no-break{white-space:normal}
  /* 装饰性微倾斜在窄屏一律归零,防包围盒横向撑破 */
  .tilt,[class*="tilt-"]{transform:none!important}
  .btn{height:46px;padding:0 18px}
  .btn--sm{height:36px;padding:0 12px}
  .brand__name{font-size:17px}
  .top__in{gap:6px}
  .brand{margin-right:0;gap:8px}
  .lang{padding:8px 8px}
  .btn--login{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.pending{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}