/* 拾链 · 公共样式 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--f-sans);
  font-size:var(--fs-16);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:inherit}
code{font-family:var(--f-mono)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:var(--r-sm)}

.wrap{max-width:var(--w-page);margin:0 auto;padding:0 var(--s-6)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--c-muted)}
.faint{color:var(--c-faint)}
.ta-r{text-align:right}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- 顶栏 ---- */
.nav{position:sticky;top:0;z-index:20;background:var(--c-bg);border-bottom:1px solid var(--c-line)}
.nav-in{display:flex;align-items:center;gap:var(--s-6);height:64px}
.brand{display:flex;align-items:center;gap:10px;font-size:var(--fs-14);font-weight:600;letter-spacing:.01em}
.brand .mark{width:22px;height:22px;display:block;color:var(--c-text)}
.brand .sub{
  font-size:var(--fs-12);font-weight:400;color:var(--c-muted);
  letter-spacing:.08em;padding-left:12px;margin-left:2px;border-left:1px solid var(--c-line);
}
.nav-links{display:flex;align-self:stretch;gap:var(--s-5);margin-left:auto}
.nav-links a{
  display:flex;align-items:center;font-size:var(--fs-14);color:var(--c-muted);
  border-bottom:2px solid transparent;padding-top:2px;transition:color .18s var(--ease);
}
.nav-links a:hover{color:var(--c-text)}
.nav-links a[aria-current="page"]{color:var(--c-text);font-weight:500;border-bottom-color:var(--c-accent)}
.node{display:flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--c-muted);letter-spacing:.02em}

/* ---- 点 ---- */
.dot{width:5px;height:5px;border-radius:50%;background:var(--c-accent);flex:none;display:inline-block}
.dot--off{background:var(--c-faint)}
.dot--square{border-radius:1px;background:var(--c-text)}

/* ---- 按钮 ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;border:1px solid transparent;border-radius:var(--r);
  font-size:var(--fs-14);font-weight:500;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.btn-primary{background:var(--c-primary);color:var(--c-on-primary)}
.btn-primary:hover{background:#2B2B33}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:var(--c-surface);border-color:var(--c-line);color:var(--c-text)}
.btn-ghost:hover{border-color:var(--c-line-strong);background:#FCFCFB}
.btn-sm{height:32px;padding:0 12px;font-size:var(--fs-13);border-radius:var(--r-sm)}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* ---- 链接 ---- */
.link{color:var(--c-accent);border-bottom:1px solid transparent;transition:border-color .18s var(--ease)}
.link:hover{border-bottom-color:var(--c-accent)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:var(--fs-13);color:var(--c-muted)}
.link-arrow:hover{color:var(--c-accent)}
.link-btn{display:inline-flex;align-items:center;min-height:24px;padding:2px 0;font-size:var(--fs-13);color:var(--c-text);border-bottom:1px solid var(--c-line-strong)}
.link-btn:hover{color:var(--c-accent);border-bottom-color:var(--c-accent)}

/* ---- 胶囊 ---- */
.chip{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-pill);
  font-size:var(--fs-13);color:var(--c-text);transition:.18s var(--ease);
}
.chip:hover{border-color:var(--c-line-strong)}
.chip-more{color:var(--c-muted);border-style:dashed;background:transparent}

/* ---- 卡 ---- */
.card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:var(--s-5)}
.card-title{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-14);font-weight:600;letter-spacing:.01em;
}
.card-title .count{
  font-family:var(--f-mono);font-size:var(--fs-12);font-weight:400;
  color:var(--c-muted);padding:1px 6px;border:1px solid var(--c-line);border-radius:var(--r-pill);
}

/* ---- 页脚 ---- */
.foot{margin-top:var(--s-9);border-top:1px solid var(--c-line);padding:var(--s-6) 0 var(--s-7)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);font-size:var(--fs-13);color:var(--c-muted)}
.foot-in .brand{font-size:var(--fs-13);font-weight:500;color:var(--c-text)}
.foot-links{display:flex;gap:var(--s-5)}
.foot-links a{display:inline-flex;align-items:center;min-height:32px}
.foot a:hover{color:var(--c-text)}

@media (max-width:860px){
  .wrap{padding:0 var(--s-5)}
  .nav-in{gap:var(--s-4);height:58px}
  .brand .sub{display:none}
  .node{display:none}
  .nav-links{gap:var(--s-4)}
}
@media (max-width:520px){
  .nav-links a{font-size:var(--fs-13)}
  .nav-in .btn-sm{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
