.top {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--line);
}
#nav {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  padding: 10px var(--gutter);
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { display: block; width: 28px; height: 28px; object-fit: contain; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }

.tabs { display: flex; gap: 2px; margin-left: 8px; }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--r-sm); color: var(--fg-muted); font-weight: 500; font-size: 14px; transition: all 0.16s; }
.tab svg { color: var(--fg-faint); transition: color 0.16s; }
.tab:hover { color: var(--fg); background: var(--surface); }
.tab.is-active { color: var(--fg); background: var(--surface); }
.tab.is-active svg { color: var(--brand); }

.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-asof { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: 12px; color: var(--fg-faint); white-space: nowrap; }
.nav-asof svg { color: var(--warn); }
.asof-d { font-weight: 600; color: var(--fg-muted); }
.lang-btn { width: auto; padding: 0 11px; }
.lang-code { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.tab-n { font-size: 11px; font-weight: 600; color: var(--fg-muted); background: var(--raised); border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.tab.is-active .tab-n { color: var(--brand-hi); border-color: var(--brand-deep); background: var(--brand-tint); }
:root[data-theme='light'] .tab.is-active .tab-n { color: var(--brand-deep); }