/* ============ Topbar ============ */
.topbar{background:var(--dark);color:var(--on-dark);font-size:.72rem;font-weight:500}
.topbar-in{display:flex;align-items:center;gap:1.1rem;padding-block:.45rem}
.topbar .tb-msg{flex:1;min-width:0;text-align:center;line-height:1.45}
.topbar a{color:var(--on-dark);white-space:nowrap}
.topbar a:hover{color:#fff;text-decoration:none}
.topbar .hot{color:#fda4af;font-weight:700}
@media(min-width:700px){.topbar .tb-msg{text-align:left}}
@media(max-width:699px){.topbar .tb-link{display:none}}
/* ============ Header ============ */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.hd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6rem;padding-block:.55rem}
.logo{font-family:var(--fd);font-weight:800;font-size:1.22rem;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.logo:hover{text-decoration:none}
.logo em{font-style:normal;color:var(--brand)}
.hact{display:flex;align-items:center;gap:.15rem}
.icb{position:relative;min-width:2.75rem;height:2.75rem;display:inline-grid;place-items:center;border-radius:999px;color:var(--ink-2);transition:.18s var(--ease)}
.icb:hover{background:var(--brand-soft);color:var(--brand);text-decoration:none}
.icb svg{width:1.3rem;height:1.3rem}
.nbadge{position:absolute;top:1px;right:0;min-width:1.2rem;height:1.2rem;padding:0 .3rem;background:var(--brand);color:#fff;font-size:.64rem;font-weight:800;border-radius:999px;display:grid;place-items:center;border:2px solid #fff}
.account-chip{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:.3rem .85rem .3rem .35rem;font-weight:700;font-size:.85rem;color:var(--ink);min-height:2.75rem}
.account-chip:hover{background:var(--brand-soft);text-decoration:none}
.avatar{width:2rem;height:2rem;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:800;flex:none}
.search{display:flex;align-items:stretch;background:var(--surface-sunken);border:2px solid transparent;border-radius:999px;overflow:hidden;min-width:0;transition:.2s var(--ease)}
.search:focus-within{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
.search input{flex:1;border:0;background:none;outline:0;font-size:.9rem;padding:.68rem 1.1rem;min-width:0;color:var(--ink)}
.search input::placeholder{color:var(--faint)}
.search>button{background:var(--brand);color:#fff;padding:0 1.25rem;display:grid;place-items:center;transition:.18s;min-width:3.2rem}
.search>button:hover{background:var(--brand-deep)}
.search>button svg{width:1.15rem;height:1.15rem}
@media(max-width:899px){
  .hd .search{grid-column:1/-1;grid-row:2}
  .hd{padding-bottom:.65rem}
}
@media(min-width:900px){.hd{gap:1.4rem;padding-block:.65rem}.logo{font-size:1.35rem}}
/* category nav strip */
.catnav{background:var(--surface);border-top:1px solid var(--line2)}
.catnav-in{display:flex;align-items:center;gap:.15rem;overflow-x:auto;scrollbar-width:none;padding-block:.15rem}
.catnav-in::-webkit-scrollbar{display:none}
.catlink{font-size:.84rem;font-weight:600;color:var(--ink-2);padding:.68rem .85rem;white-space:nowrap;border-radius:.6rem;transition:.15s;display:inline-flex;align-items:center;min-height:2.75rem}
.catlink:hover{color:var(--brand);background:var(--brand-soft);text-decoration:none}
.catlink.hot{color:var(--brand);font-weight:700}