:root {
  color-scheme: light;
  --nav-container: 74rem;
  --nav-side-gap: clamp(1rem, 3vw, 1.75rem);
  --nav-brand-menu-gap: clamp(1rem, 2vw, 1.25rem);
  --nav-ink: #101828;
  --nav-muted: #667085;
  --nav-blue: #2563eb;
  --nav-line-light: rgba(16, 24, 40, .10);
  --nav-line-dark: rgba(255, 255, 255, .16);
  --nav-surface-glass: rgba(255, 255, 255, .84);
  --nav-popover-glass: rgba(255, 255, 255, .93);
  --nav-glass-filter: saturate(1.08) blur(10px);
  --nav-radius: 6px;
  --nav-avatar-radius: 8px;
  --nav-shadow-popover: 0 12px 32px rgba(16, 24, 40, .12);
}

#nav-root { display: contents; }
#nav-root, #nav-footer-root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.nav-container { width: min(var(--nav-container), calc(100% - var(--nav-side-gap) * 2)); margin-inline: auto; }
.nav-brand-display-font,
.nav-brand-font { font-family: "MiSans", "HarmonyOS Sans SC", "OPPOSans 3.0", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif; }
.nav-sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; }

.nav-base-layout { min-height:100vh; display:flex; flex-direction:column; }
.nav-base-main { flex:1 1 auto; min-width:0; }
.nav-shell { z-index:40; width:100%; -webkit-backdrop-filter:var(--nav-glass-filter); backdrop-filter:var(--nav-glass-filter); }
.nav-shell--sticky { position:sticky; top:0; }
.nav-shell--light { color:var(--nav-ink); background:var(--nav-surface-glass); border-bottom:1px solid var(--nav-line-light); box-shadow:inset 0 1px 0 rgba(255,255,255,.72); }
.nav-shell--dark { color:#fff; background:rgba(17,24,39,.90); border-bottom:1px solid var(--nav-line-dark); }
.nav-inner { height:4rem; display:flex; align-items:center; justify-content:flex-start; gap:0; }
.nav-brand { min-width:0; flex:0 0 auto; display:inline-flex; align-items:center; gap:.7rem; margin-right:var(--nav-brand-menu-gap); color:inherit; text-decoration:none; }
.nav-brand-mark { width:2.35rem; height:2.35rem; flex:0 0 auto; overflow:hidden; background:transparent; }
.nav-brand-mark img { width:100%; height:100%; object-fit:contain; display:block; }
.nav-brand-text { display:grid; gap:.05rem; min-width:0; }
.nav-brand-title { font-size:1.14rem; font-weight:800; letter-spacing:-.03em; line-height:1.08; }
.nav-brand-subtitle { color:var(--nav-muted); font-size:.72rem; letter-spacing:.01em; }
.nav-shell--dark .nav-brand-subtitle { color:rgba(255,255,255,.66); }

.nav-links { position:relative; display:flex; align-items:center; gap:.25rem; margin-right:auto; min-width:0; padding-left:var(--nav-brand-menu-gap); }
.nav-links::before { content:""; position:absolute; left:0; top:50%; width:1px; height:1.5rem; transform:translateY(-50%); background:var(--nav-line-light); }
.nav-shell--dark .nav-links::before { background:var(--nav-line-dark); }
.nav-link { position:relative; display:inline-flex; align-items:center; border-radius:var(--nav-radius); padding:.42rem .62rem; color:inherit; font-size:.9rem; font-weight:650; text-decoration:none; white-space:nowrap; transition:background-color .16s, color .16s; }
.nav-link:hover,
.nav-link:focus-visible,
.nav-link-list:hover > .nav-link,
.nav-link-list:focus-within > .nav-link { color:var(--nav-blue); background:rgba(37,99,235,.08); }
.nav-shell--dark .nav-link:hover,
.nav-shell--dark .nav-link:focus-visible,
.nav-shell--dark .nav-link-list:hover > .nav-link,
.nav-shell--dark .nav-link-list:focus-within > .nav-link { color:#bfdbfe; background:rgba(255,255,255,.08); }
.nav-link:focus-visible,
.nav-account-trigger:focus-visible,
.nav-guest-link:focus-visible,
.nav-auth-button:focus-visible,
.nav-footer-link:focus-visible { outline:2px solid rgba(37,99,235,.36); outline-offset:3px; }
.nav-link-list { position:relative; }
.nav-link-list::after { content:""; position:absolute; left:0; right:0; top:100%; height:.75rem; }
.nav-link--button { border:0; background:transparent; cursor:pointer; gap:.25rem; }
.nav-link-arrow { width:.8rem; height:.8rem; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--nav-muted); transform-origin:center; transition:transform .16s ease; }
.nav-link-arrow svg { width:100%; height:100%; display:block; }
.nav-link-list:hover .nav-link-arrow,
.nav-link-list:focus-within .nav-link-arrow { transform:rotate(180deg); }
.nav-link-list .nav-dropdown { display:none; }
.nav-link-list:hover .nav-dropdown,
.nav-link-list:focus-within .nav-dropdown { display:block; }

.nav-dropdown,
.nav-account-menu {
  position:absolute;
  z-index:9999;
  min-width:12rem;
  margin-top:.75rem;
  border:1px solid var(--nav-line-light);
  border-radius:var(--nav-radius);
  background:var(--nav-popover-glass);
  box-shadow:var(--nav-shadow-popover), inset 0 1px 0 rgba(255,255,255,.74);
  color:var(--nav-ink);
  -webkit-backdrop-filter:var(--nav-glass-filter);
  backdrop-filter:var(--nav-glass-filter);
}
.nav-dropdown { top:100%; left:0; padding:.35rem 0; }
.nav-dropdown-group { display:grid; gap:.125rem; padding:.2rem 0; }
.nav-dropdown-group-label { padding:.4rem .75rem .25rem; color:var(--nav-muted); font-size:.72rem; font-weight:800; }
.nav-dropdown-item,
.nav-account-item { display:block; width:100%; color:inherit; background:transparent; border:0; padding:.55rem .75rem; font-size:.875rem; text-align:left; text-decoration:none; cursor:pointer; }
.nav-dropdown-item:hover,
.nav-account-item:hover { color:var(--nav-blue); background:#f6f9ff; text-decoration:none; }

.nav-actions { display:flex; align-items:center; gap:.65rem; margin-left:auto; }
.nav-guest-actions { display:flex; align-items:center; gap:.5rem; }
.nav-guest-link,
.nav-auth-button { display:inline-flex; align-items:center; justify-content:center; min-height:2.2rem; border:1px solid rgba(37,99,235,.22); border-radius:var(--nav-radius); background:#fff; color:var(--nav-blue); padding:0 .75rem; font-size:.875rem; font-weight:720; text-decoration:none; white-space:nowrap; }
.nav-guest-link:hover,
.nav-auth-button:hover { background:#f6f9ff; text-decoration:none; }
.nav-guest-link--primary { background:var(--nav-blue); color:#fff; border-color:var(--nav-blue); }
.nav-guest-link--primary:hover { background:#1d4ed8; }
.nav-auth-button--spaced { margin-left:.5rem; }
.nav-auth-inline { display:flex; align-items:center; gap:.5rem; }
.nav-auth-name { max-width:8rem; overflow:hidden; color:currentColor; text-overflow:ellipsis; white-space:nowrap; }

.nav-account { position:relative; }
.nav-account-trigger { display:flex; align-items:center; gap:.35rem; border:0; border-radius:var(--nav-radius); background:transparent; color:inherit; padding:.25rem; cursor:pointer; }
.nav-account-trigger:hover { background:rgba(16,24,40,.04); }
.nav-shell--dark .nav-account-trigger:hover { background:rgba(255,255,255,.08); }
.nav-account-avatar { position:relative; width:2.35rem; height:2.35rem; overflow:hidden; border-radius:var(--nav-avatar-radius); background:#f2f4f7; border:1px solid var(--nav-line-light); }
.nav-account-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.nav-account-avatar-fallback { display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:var(--nav-blue); font-size:.9rem; font-weight:760; letter-spacing:-.02em; }
.nav-account-chevron { width:.75rem; height:.75rem; transition:transform .15s; }
.nav-account-chevron svg { width:100%; height:100%; display:block; }
.nav-account-chevron--open { transform:rotate(180deg); }
.nav-account-menu { right:0; overflow:hidden; padding:.35rem 0; }
.nav-account-menu-head { border-bottom:1px solid var(--nav-line-light); padding:.55rem .75rem; }
.nav-account-menu-head + .nav-account-item { margin-top:.35rem; }
.nav-account-name-row { display:flex; justify-content:space-between; gap:1rem; white-space:nowrap; line-height:1.25; }
.nav-account-name { font-weight:700; }
.nav-account-meta { margin-top:.125rem; color:var(--nav-muted); font-size:.75rem; text-align:right; }
.nav-badge { margin-left:.35rem; border-radius:999px; background:rgba(37,99,235,.10); color:var(--nav-blue); padding:.05rem .35rem; font-size:.65rem; font-weight:800; }

.nav-footer { position:relative; width:100%; margin-top:auto; border-top:1px solid var(--nav-line-light); background:rgba(255,255,255,.86); color:var(--nav-muted); font-size:.8125rem; -webkit-backdrop-filter:var(--nav-glass-filter); backdrop-filter:var(--nav-glass-filter); }
.nav-footer--dark { border-color:var(--nav-line-dark); background:rgba(17,24,39,.90); color:rgba(255,255,255,.72); }
.nav-footer-glow { display:block; pointer-events:none; position:absolute; inset-inline:0; top:-1px; height:1px; background:linear-gradient(to right, transparent, rgba(59,130,246,.24), rgba(168,85,247,.18), transparent); }
.nav-footer-body { padding-block:1.5rem .85rem; }
.nav-footer-grid { display:grid; grid-template-columns:minmax(18rem, 1fr) minmax(10rem, auto) minmax(8rem, auto); gap:clamp(1.5rem, 4vw, 3rem); align-items:start; }
.nav-footer-kicker { color:inherit; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.nav-footer-copy { margin-top:.75rem; color:#475467; line-height:1.7; }
.nav-footer--dark .nav-footer-copy { color:rgba(255,255,255,.72); }
.nav-footer-note { margin-top:1.2rem; font-size:.75rem; line-height:1.7; opacity:.86; }
.nav-footer-note--stats { position:relative; display:inline-block; border-radius:var(--nav-radius); cursor:help; }
.nav-footer-note--stats:focus-visible { outline:2px solid rgba(37,99,235,.36); outline-offset:3px; }
.nav-footer-link { border-radius:var(--nav-radius); color:inherit; text-decoration:none; }
.nav-footer-link:hover { color:#1e40af; text-decoration:underline; text-underline-offset:4px; }
.nav-footer-columns { margin-top:1rem; display:grid; grid-template-columns:max-content max-content; gap:.5rem 0; align-items:start; }
.nav-footer-list { margin:0; padding:0; list-style:none; display:grid; gap:.5rem; }
.nav-footer-list--spaced { margin-top:1rem; }
.nav-footer-list--divided { border-left:1px solid currentColor; margin-left:1.125rem; padding-left:1.125rem; }
.nav-footer-bottom { margin-top:1.5rem; border-top:1px solid rgba(102,112,133,.35); padding-top:.5rem; opacity:.9; }
.nav-footer-bottom-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }

@media (max-width: 760px) {
  .nav-container { width:calc(100% - 2rem); }
  .nav-inner { height:4rem; gap:0; }
  .nav-brand { gap:.55rem; }
  .nav-brand-mark { width:2.15rem; height:2.15rem; }
  .nav-brand-title { font-size:1.03rem; }
  .nav-brand-subtitle { font-size:.68rem; }
  .nav-links { gap:.2rem; overflow-x:auto; scrollbar-width:none; padding-left:var(--nav-brand-menu-gap); }
  .nav-links::before { height:1.35rem; }
  .nav-links::-webkit-scrollbar { display:none; }
  .nav-link { font-size:.84rem; padding:.38rem .52rem; }
  .nav-actions { margin-left:0; }
  .nav-guest-actions { gap:.4rem; }
  .nav-guest-link { min-height:2.1rem; padding-inline:.55rem; font-size:.82rem; }
  .nav-account-avatar { width:2.1rem; height:2.1rem; }
  .nav-footer-grid { grid-template-columns:1fr; gap:1.25rem; }
  .nav-footer-columns { grid-template-columns:repeat(2, minmax(0,1fr)); gap:.5rem 1rem; }
  .nav-footer-list--divided { border-left:0; margin-left:0; padding-left:0; }
  .nav-footer-bottom-row { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 430px) {
  .nav-container { width:calc(100% - 1.25rem); }
  .nav-inner { gap:0; }
  .nav-brand-subtitle { display:none; }
  .nav-brand-mark { width:2rem; height:2rem; }
  .nav-link { font-size:.82rem; padding:.34rem .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .nav-link-arrow,
  .nav-account-chevron { transition:none; }
}