.site-header { min-height: 76px; padding: 12px var(--page-gutter); background: var(--bg); }
.site-header-inner { width: min(1260px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; justify-self: start; gap: 10px; color: var(--text); font-size: 22px; font-weight: 800; white-space: nowrap; }
.brand img { width: 36px; height: 36px; object-fit: contain; }
.top-nav { display: flex; justify-content: center; align-items: center; gap: 38px; color: var(--muted); }
.top-nav a { position: relative; padding: 8px 0; white-space: nowrap; }
.top-nav a.active { color: var(--brand); font-weight: 700; }
.top-nav a.active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--brand); }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; }
.icon-button { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border-radius: 50%; color: var(--muted); }
.icon-button:hover { background: var(--hint); color: var(--brand); }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qq-mark { width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font: 700 10px/1 sans-serif; }
.theme-icon-moon { display: none; }
html.dark .theme-icon-sun { display: none; }
html.dark .theme-icon-moon { display: block; }
.account-entry { display: inline-flex; align-items: center; justify-content: center; min-width: 94px; padding: 12px 24px; border: 1px solid #a94800; border-radius: 6px; color: #fff; background: #a94800; white-space: nowrap; }
.account-entry:hover { background: #8f3d00; }
@media (max-width: 1100px) { .site-header-inner { gap: 18px; } .top-nav { gap: 24px; } }
@media (max-width: 760px) { .site-header-inner { display: flex; flex-wrap: wrap; gap: 12px 16px; } .header-actions { margin-left: auto; } .top-nav { order: 3; width: 100%; justify-content: flex-start; gap: 24px; } }
@media (max-width: 480px) { .brand { gap: 8px; font-size: 18px; } .brand img { width: 30px; height: 30px; } .header-actions { gap: 8px; } .icon-button { width: 30px; height: 30px; } .account-entry { min-width: 72px; padding: 10px 14px; } .top-nav { font-size: 14px; } }