/* ============================================================
   clashf.com · 「海雾玻璃」设计系统 · 基础层
   近白冷调底 + 半透明磨砂白面板 + 细浅蓝描边 + 深海蓝点睛
   ============================================================ */

:root{
  /* —— 色彩令牌 —— */
  --fog-bg:#F5F8FA;               /* 全站底色 */
  --fog-panel:#FDFEFF;            /* 实心面板 */
  --fog-panel-2:#EBF2F7;          /* 次级面板 / 浅蓝底 */
  --fog-line:#CBDDE9;             /* 描边与分隔线 */
  --fog-accent:#3E7CA6;           /* 海雾蓝(强调) */
  --fog-deep:#17456B;             /* 深海蓝(主按钮/链接/指示条) */
  --fog-ink:#22313D;              /* 主文字 */
  --fog-ink-soft:#5E7484;         /* 次要文字 */
  --fog-ok:#2E8B6E;
  --fog-warn:#B07C1F;
  --fog-err:#C0504D;
  --fog-paper:#FFFFFF;            /* 纯白(按钮文字等) */
  --fog-glass:rgba(255,255,255,.66);       /* 磨砂玻璃卡片 */
  --fog-glass-firm:rgba(253,254,255,.86);  /* 更实的玻璃(头部/移动菜单) */
  --fog-veil:rgba(23,69,107,.32);          /* 移动菜单遮罩 */
  --fog-dot:#22313D;                       /* Hero 点阵纹理基色(低透明度使用) */

  /* —— 字体令牌 —— */
  --font-display:'Inter','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Inter','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* —— 形状与节奏 —— */
  --radius-xs:6px;
  --radius-s:10px;
  --radius-m:12px;
  --radius-l:14px;
  --radius-pill:999px;
  --wrap-max:1080px;
  --gutter:clamp(16px, 4vw, 28px);
  --topbar-h:64px;
  --shadow-mist:0 1px 2px rgba(23,69,107,.05), 0 8px 22px rgba(23,69,107,.06);
  --shadow-float:0 4px 10px rgba(23,69,107,.10), 0 14px 34px rgba(23,69,107,.12);
}

/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;}
ul[class],ol[class]{padding-left:0;list-style:none;}
img,svg,video{max-width:100%;height:auto;display:inline-block;vertical-align:middle;}
button,input,select,textarea{font:inherit;color:inherit;}
[hidden]{display:none !important;}
html.nav-open{overflow:hidden;}

body{
  background:var(--fog-bg);
  color:var(--fog-ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

::selection{background:var(--fog-panel-2);color:var(--fog-deep);}

:focus-visible{outline:2px solid var(--fog-accent);outline-offset:2px;border-radius:2px;}

/* ============ 版心与节奏 ============ */
.wrap{
  max-width:var(--wrap-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
/* 区块节奏:只声明纵向,严禁 padding 简写清掉横向 */
.strata{padding-top:68px;padding-bottom:68px;}
.strata-tight{padding-top:40px;padding-bottom:40px;}
.strata + .strata{border-top:1px solid var(--fog-line);}

.hairline{border:none;border-top:1px solid var(--fog-line);margin-top:32px;margin-bottom:32px;}

/* ============ 排版 ============ */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.28;color:var(--fog-ink);font-weight:700;}
h1{font-size:clamp(1.9rem, 4.4vw, 2.75rem);letter-spacing:-.015em;}
h2{font-size:clamp(1.4rem, 3vw, 1.85rem);letter-spacing:-.01em;}
h3{font-size:clamp(1.08rem, 2.2vw, 1.25rem);}
h4{font-size:1rem;}
p{margin-top:.9em;margin-bottom:.9em;}
small{font-size:.82rem;color:var(--fog-ink-soft);}
strong{color:var(--fog-deep);font-weight:700;}

a{color:var(--fog-deep);text-decoration:none;transition:color .18s ease;}
a:hover{color:var(--fog-accent);}
.textlink{text-decoration:underline;text-decoration-color:var(--fog-line);text-underline-offset:4px;}
.textlink:hover{text-decoration-color:var(--fog-accent);}

code{
  font-family:var(--font-mono);
  font-size:.86em;
  background:var(--fog-panel-2);
  border:1px solid var(--fog-line);
  border-radius:var(--radius-xs);
  padding-top:1px;padding-bottom:1px;padding-left:6px;padding-right:6px;
}
pre{overflow-x:auto;}
pre code{background:none;border:none;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;}

.sect-head{max-width:720px;margin-bottom:34px;}
.sect-kicker{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fog-accent);
  margin-bottom:10px;
}
.sect-lede{color:var(--fog-ink-soft);font-size:.98rem;}

.mono{font-family:var(--font-mono);}
.muted{color:var(--fog-ink-soft);}

/* ============ 栅格工具 ============ */
.cols{display:grid;gap:20px;}
.cols > *{min-width:0;}
.cols-2{grid-template-columns:repeat(2, minmax(0,1fr));}
.cols-3{grid-template-columns:repeat(3, minmax(0,1fr));}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
  font-size:.95rem;
  line-height:1;
  border-radius:var(--radius-s);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  padding-top:13px;padding-bottom:13px;padding-left:24px;padding-right:24px;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn svg{flex-shrink:0;}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;}

.btn-solid{background:var(--fog-deep);color:var(--fog-paper);}
.btn-solid:hover{background:var(--fog-accent);color:var(--fog-paper);}
.btn-solid:active{background:var(--fog-deep);}

.btn-ghost{background:var(--fog-glass);border-color:var(--fog-line);color:var(--fog-deep);}
.btn-ghost:hover{border-color:var(--fog-accent);background:var(--fog-panel-2);color:var(--fog-deep);}

.btn-sm{padding-top:9px;padding-bottom:9px;padding-left:16px;padding-right:16px;font-size:.85rem;}
.btn-lg{padding-top:15px;padding-bottom:15px;padding-left:30px;padding-right:30px;font-size:1.02rem;}

/* ============ 磨砂面板 / 卡片 ============ */
.pane{
  background:var(--fog-glass);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--fog-line);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-mist);
}
.pane-solid{
  background:var(--fog-panel);
  border:1px solid var(--fog-line);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-mist);
}
.pane-pad{padding-top:24px;padding-bottom:24px;padding-left:26px;padding-right:26px;}

/* ============ 头部(header.js 注入) ============ */
#site-header{position:sticky;top:0;z-index:100;}
.topbar{
  /* position+z-index:backdrop-filter 让 .topbar 自成层叠上下文,子元素 .tabnav 的 z-index:60 只在内部有效;
     必须把 .topbar 整体提到 .nav-veil(z55) 之上,否则移动端抽屉链接全被遮罩盖住点不动(2026-07-24 真实事故) */
  position:relative;
  z-index:60;
  background:var(--fog-glass-firm);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--fog-line);
}
.topbar-in{
  display:flex;
  align-items:center;
  gap:22px;
  height:var(--topbar-h);
}

.brandmark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  color:var(--fog-ink);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:-.01em;
}
.brandmark:hover{color:var(--fog-deep);}
.brandmark-logo{flex-shrink:0;}

/* tab 式导航:当前项底部指示条 */
.tabnav{
  display:flex;
  align-items:stretch;
  gap:2px;
  margin-left:auto;
  height:var(--topbar-h);
}
.tabnav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:var(--topbar-h);
  padding-left:14px;padding-right:14px;
  font-size:.92rem;
  font-weight:600;
  color:var(--fog-ink-soft);
  white-space:nowrap;
}
.tabnav-link::after{
  content:"";
  position:absolute;
  left:12px;right:12px;bottom:-1px;
  height:2px;
  border-radius:1px;
  background:var(--fog-deep);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s ease, background-color .22s ease;
}
.tabnav-link:hover{color:var(--fog-deep);}
.tabnav-link:hover::after{transform:scaleX(.55);background:var(--fog-accent);}
.tabnav-link.is-here{color:var(--fog-deep);}
.tabnav-link.is-here::after{transform:scaleX(1);background:var(--fog-deep);}

.topbar-side{display:flex;align-items:center;gap:10px;flex-shrink:0;}

/* 语言切换下拉 */
.langbox{position:relative;}
.langbox-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--fog-glass);
  border:1px solid var(--fog-line);
  border-radius:var(--radius-pill);
  color:var(--fog-ink-soft);
  font-size:.84rem;
  font-weight:600;
  cursor:pointer;
  padding-top:8px;padding-bottom:8px;padding-left:14px;padding-right:12px;
  transition:border-color .18s ease, color .18s ease;
}
.langbox-btn:hover{border-color:var(--fog-accent);color:var(--fog-deep);}
.langbox-btn svg{flex-shrink:0;}
.langbox-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:160px;
  margin:0;
  padding-top:6px;padding-bottom:6px;padding-left:6px;padding-right:6px;
  list-style:none;
  background:var(--fog-panel);
  border:1px solid var(--fog-line);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-float);
  z-index:120;
}
.langbox-item{
  display:block;
  padding-top:9px;padding-bottom:9px;padding-left:14px;padding-right:14px;
  border-radius:var(--radius-xs);
  font-size:.88rem;
  color:var(--fog-ink);
}
.langbox-item:hover{background:var(--fog-panel-2);color:var(--fog-deep);}
.langbox-item.is-now{background:var(--fog-panel-2);color:var(--fog-deep);font-weight:700;}

/* 汉堡按钮(≥44px 触达) */
.navburger{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:44px;
  min-height:44px;
  background:none;
  border:1px solid var(--fog-line);
  border-radius:var(--radius-s);
  cursor:pointer;
  flex-shrink:0;
}
.navburger-bar{
  display:block;
  width:18px;
  height:2px;
  border-radius:1px;
  background:var(--fog-deep);
  transition:transform .22s ease, opacity .18s ease;
}
.navburger[aria-expanded="true"] .navburger-bar:nth-child(1){transform:translateY(6px) rotate(45deg);}
.navburger[aria-expanded="true"] .navburger-bar:nth-child(2){opacity:0;}
.navburger[aria-expanded="true"] .navburger-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.nav-veil{
  position:fixed;
  left:0;right:0;bottom:0;
  top:var(--topbar-h);
  background:var(--fog-veil);
  z-index:55;
}

/* ============ 页脚(footer.js 注入) ============ */
.basefoot{
  margin-top:88px;
  border-top:1px solid var(--fog-line);
  background:var(--fog-panel);
}
.basefoot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:34px;
  padding-top:52px;
  padding-bottom:42px;
}
.basefoot-grid > *{min-width:0;}
.basefoot-note{
  margin-top:14px;
  font-size:.86rem;
  color:var(--fog-ink-soft);
  line-height:1.8;
}
.basefoot-col h3{
  font-size:.78rem;
  font-family:var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fog-ink-soft);
  margin-bottom:14px;
  font-weight:600;
}
.basefoot-col ul{margin:0;padding-left:0;list-style:none;}
.basefoot-col li{margin-bottom:9px;}
.basefoot-col a{font-size:.88rem;color:var(--fog-ink);}
.basefoot-col a:hover{color:var(--fog-accent);}
.basefoot-col a.is-now{color:var(--fog-deep);font-weight:700;}
.basefoot-line{border-top:1px solid var(--fog-line);}
.basefoot-legal{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  padding-top:18px;
  padding-bottom:24px;
  font-size:.8rem;
  color:var(--fog-ink-soft);
}

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

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* ============ 响应式 ============ */
@media (max-width: 880px){
  .tabnav{
    position:fixed;
    top:var(--topbar-h);
    left:0;right:0;
    height:auto;
    display:none;
    flex-direction:column;
    gap:0;
    margin-left:0;
    background:#FDFEFF; /* 移动抽屉必须全不透明(2026-07-24 用户拍板),玻璃感只留顶条 */
    border-bottom:1px solid var(--fog-line);
    box-shadow:var(--shadow-float);
    max-height:calc(100dvh - var(--topbar-h));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-top:6px;
    padding-bottom:10px;
    z-index:60;
  }
  .tabnav.is-open{display:flex;}
  /* 整行可点 + 触达高度 ≥44px */
  .tabnav-link{
    display:flex;
    width:100%;
    height:auto;
    min-height:48px;
    align-items:center;
    padding-top:11px;padding-bottom:11px;
    padding-left:var(--gutter);padding-right:var(--gutter);
    border-bottom:1px solid var(--fog-line);
    font-size:.98rem;
  }
  .tabnav-link:last-child{border-bottom:none;}
  .tabnav-link::after{display:none;}
  .tabnav-link.is-here{
    background:var(--fog-panel-2);
    box-shadow:inset 3px 0 0 var(--fog-accent);
  }
  /* 导航收进抽屉后 .tabnav 的 margin-left:auto 失效,工具区自己顶到最右(2026-07-24) */
  .navburger{display:flex;}
  .topbar-side{margin-left:auto;}
  .topbar-in{gap:14px;}
  .basefoot-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}

@media (max-width: 640px){
  .strata{padding-top:48px;padding-bottom:48px;}
  .cols-2,.cols-3{grid-template-columns:minmax(0,1fr);}
  .brandmark-name{font-size:.95rem;}
  .langbox-btn{padding-left:10px;padding-right:9px;}
  .langbox-btn span{display:none;}
  .btn{padding-left:20px;padding-right:20px;}
}

@media (max-width: 560px){
  .basefoot-grid{grid-template-columns:minmax(0,1fr);gap:26px;}
}