/* 全站 chrome 样式单源（Wave 3B fix loop R=1，Option A）
 * index.njk + about.njk 共同 <link> 引用本文件
 * 模板：yiou-about
 * chrome 类：btn, btn-ghost, btn-lg, btn-primary, btn-sm, dot, foot-col, foot-grid, foot-meta, ico-btn, nav, nav-actions, nav-brand, nav-brand-mark, nav-primary, nav-row, subnav, subnav-inner
 */

.nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.85);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--border)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 clamp(16px,4vw,32px);max-width:var(--max-grid);margin:0 auto}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:600}
.nav-brand-mark{width:22px;height:22px;background:#000;border:1px solid var(--fg);display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;border-radius:4px}
.nav-primary{display:flex;align-items:center;gap:6px}
.nav-primary a{padding:8px 12px;color:var(--fg-2);font-size:14px;border-radius:4px}
.nav-primary a[aria-current="page"]{color:var(--fg)}
.nav-primary a:hover{color:var(--fg)}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-actions .ico-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:6px;color:var(--fg-2)}
.nav-actions .ico-btn:hover{background:var(--surface-2);color:var(--fg)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:var(--radius-btn);font-weight:600;font-size:14px;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.btn-primary{background:var(--cta);color:var(--cta-fg);border-color:var(--cta)}
.btn-primary:hover{background:#F5F5F5}
.btn-primary:active{background:#E5E5E5}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-lg{height:48px;padding:0 22px;font-size:15px}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
.subnav{border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav-inner{display:flex;gap:4px;padding:0 clamp(16px,4vw,32px);max-width:var(--max-grid);margin:0 auto;height:44px;align-items:center}
.subnav a{color:var(--fg-3);font-size:13px;padding:8px 12px;border-bottom:2px solid transparent;white-space:nowrap}
.subnav a:hover{color:var(--fg-2)}
.subnav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--fg)}
.subnav .dot{margin:0 6px;color:var(--fg-5)}
.foot-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:32px;margin-bottom:28px}
.foot-col h5{color:var(--fg-2);font-size:13px;font-weight:600;margin-bottom:14px;letter-spacing:.04em;text-transform:uppercase}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot-col a:hover{color:var(--fg-2)}
.foot-meta{padding-top:18px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot-meta .nav-brand-mark{width:18px;height:18px;font-size:11px}
.mobile-cta .btn-lg{height:44px;font-size:14px;padding:0 12px}
@media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}
.nav-primary{display:none}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr 1fr}}