.site-nav { --header-ink: #f2f5f8; --header-muted: #b6c5d6; --header-faint: #9aaec2; --header-line: #d6f0f829; --header-bg: #060e1bd9; --header-button: #f1fbfeeb; --header-button-ink: #031018; position: fixed; top: 0; right: 0; left: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 92px; padding: 20px clamp(24px, 4vw, 68px); border: 0; color: var(--header-ink); background: linear-gradient(#060e1be6, #060e1b00); transition: min-height .4s ease, background .4s ease; }
.site-nav.is-scrolled { min-height: 70px; background: var(--header-bg); backdrop-filter: blur(24px) saturate(1.2); }
.site-nav .brand { justify-self: start; display: inline-flex; align-items: center; gap: 9px; min-width: max-content; }
.site-nav .brand-star { color: #d5bb8c; font-size: 1.05rem; filter: drop-shadow(0 0 9px #e8bb6861); }
.site-nav .brand-cn { font-weight: 650; letter-spacing: .04em; }
.site-nav .brand-en { margin-left: 5px; color: var(--header-faint); font: 600 .56rem/1 system-ui, sans-serif; letter-spacing: .18em; }
.site-nav .nav-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.site-nav .theme-switch { position: relative; display: inline-flex; align-items: center; width: 88px; min-height: 40px; overflow: hidden; padding: 4px; color: var(--header-ink); border: 1px solid #b6d2e545; border-radius: 999px; background: linear-gradient(120deg, #dbf4fa21, #5ea9c51a); box-shadow: inset 0 0 0 1px #ffffff06, 0 10px 28px #00000029; appearance: none; font: 650 .66rem/1 system-ui, sans-serif; letter-spacing: .08em; transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.site-nav .theme-switch::before { content: ""; position: absolute; inset: -1px; background: linear-gradient(105deg, transparent 22%, #ffffff33 46%, transparent 68%); transform: translateX(-120%); transition: transform .65s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.site-nav .theme-switch:hover { border-color: #b6d2e58c; background: linear-gradient(120deg, #e1f7fc33, #55a9c929); box-shadow: 0 12px 32px #699eb324, 0 0 24px #d3f3fa17; transform: translateY(-2px); }
.site-nav .theme-switch:hover::before { transform: translateX(120%); }
.site-nav .theme-switch-orb { position: absolute; top: 5px; left: 5px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: radial-gradient(circle at 32% 24%, #fffffffa 0 12%, #ffffff9e 32%, #daebf257 62%, #97becf3d 100%); box-shadow: 0 0 18px #e2f5fa80, inset 0 0 0 1px #ffffffb8, inset -6px -8px 14px #5c91a821; backdrop-filter: blur(8px) saturate(1.2); transition: transform .58s cubic-bezier(.16, 1, .3, 1), background .45s ease, box-shadow .45s ease; }
.site-nav .theme-switch-orb i { width: 8px; height: 8px; border-radius: 50%; background: #ffffffe0; box-shadow: 0 0 9px #ffffffe6; transition: transform .5s ease, width .45s ease, height .45s ease, background .45s ease, box-shadow .45s ease; }
.site-nav .theme-switch-copy { position: absolute; right: 11px; transition: right .5s cubic-bezier(.16, 1, .3, 1), left .5s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; }
.site-nav .theme-switch[data-theme-target="dark"] .theme-switch-orb { transform: translateX(50px); background: radial-gradient(circle at 72% 28%, #9cecff47, transparent 16%), linear-gradient(145deg, #153249, #07131f 72%); box-shadow: 0 0 18px #55dcff40, inset 0 0 0 1px #9cecff38; }
.site-nav .theme-switch[data-theme-target="dark"] .theme-switch-orb i { width: 14px; height: 14px; background: transparent; box-shadow: -5px 1px 0 0 #dff8ff; transform: translateX(3px) rotate(-12deg); }
.site-nav .theme-switch[data-theme-target="dark"] .theme-switch-copy { right: auto; left: 11px; }
.site-nav .nav-user-widget { display: flex; align-items: center; }
.site-nav .nav-ghost, .site-nav .nav-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--header-line); border-radius: 999px; font-size: .72rem; white-space: nowrap; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.site-nav .nav-ghost { color: var(--header-muted); background: #ffffff06; }
.site-nav .nav-primary { color: var(--header-button-ink); border-color: var(--header-button); background: var(--header-button); }
.site-nav .nav-ghost:hover, .site-nav .nav-primary:hover, .site-nav .nav-account:hover { transform: translateY(-2px); }
.site-nav .nav-ghost:hover, .site-nav .nav-account:hover { border-color: #aacada66; background: #aacada14; }
.site-nav .nav-primary:hover { opacity: .86; }
.site-nav .nav-account { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 12px 4px 5px; border: 1px solid var(--header-line); border-radius: 999px; color: var(--header-ink); background: #ffffff09; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.site-nav .nav-avatar { position: relative; display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; overflow: hidden; border: 1px solid #b6d2e542; border-radius: 50%; color: #06131b; background: linear-gradient(145deg, #b6d2e5, #d5bb8c); font-size: .72rem; font-weight: 700; box-shadow: 0 0 18px #b6d2e51f; }
.site-nav .nav-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-nav .nav-account-copy { display: grid; min-width: 0; margin-left: 8px; line-height: 1.1; }
.site-nav .nav-username { max-width: 92px; overflow: hidden; font-size: .68rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.site-nav .nav-points { margin-top: 3px; color: var(--header-muted); font-size: .56rem; white-space: nowrap; }
.site-nav[data-header-theme="light"] { --header-ink: #102b3a; --header-muted: #3e5b6a; --header-faint: #526e7d; --header-line: #315b6e24; --header-bg: #fafcfde8; --header-button: #163746; --header-button-ink: #f9fbfc; background: var(--header-bg); backdrop-filter: blur(24px) saturate(1.04); }
.site-nav[data-header-theme="light"] .theme-switch { border-color: #315b6e29; background: linear-gradient(120deg, #ffffffd1, #dcebF1a3); box-shadow: 0 10px 28px #2c506018; }
.site-nav[data-header-theme="light"] .nav-ghost, .site-nav[data-header-theme="light"] .nav-account { background: #ffffff80; }
@media (max-width: 760px) {
  .site-nav, .site-nav.is-scrolled { min-height: 64px; padding: 10px 18px; }
  .site-nav .brand { gap: 6px; }
  .site-nav .brand-cn { font-size: .84rem; }
  .site-nav .brand-en { display: none; }
  .site-nav .theme-switch { width: 34px; min-width: 34px; min-height: 34px; padding: 3px; }
  .site-nav .theme-switch-copy { display: none; }
  .site-nav .theme-switch-orb { top: 3px; left: 3px; width: 26px; height: 26px; }
  .site-nav .theme-switch[data-theme-target="dark"] .theme-switch-orb { transform: none; }
  .site-nav .nav-actions { gap: 5px; }
  .site-nav .nav-ghost, .site-nav .nav-primary { min-height: 34px; padding: 0 9px; font-size: .6rem; }
  .site-nav .nav-account { min-height: 34px; padding: 2px; }
  .site-nav .nav-account-copy { display: none; }
  .site-nav .nav-avatar { flex-basis: 28px; width: 28px; height: 28px; }
}
@media (max-width: 420px) {
  .site-nav, .site-nav.is-scrolled { padding-right: 12px; padding-left: 12px; }
  .site-nav .nav-ghost, .site-nav .nav-primary { padding-right: 10px; padding-left: 10px; }
}
@media (max-width: 359px) {
  .site-nav, .site-nav.is-scrolled { padding-right: 8px; padding-left: 8px; }
  .site-nav .nav-actions { gap: 3px; }
  .site-nav .nav-ghost, .site-nav .nav-primary { padding-right: 7px; padding-left: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav * { transition: none !important; }
}
@media print { .site-nav { display: none; } }