/* Shared compact navigation. Keep application controls and routing intact. */
:is(#nav, :is(html, html.dark) header.fixed.top-0.z-50, :is(html, html.dark) header.sticky.top-0.z-40) {
  font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  font-size:14px; letter-spacing:0;
}
#nav { top:10px; margin:10px 14px 0; padding:0; }
#nav .nav-shell,
:is(html, html.dark) header.fixed.top-0.z-50 nav,
:is(html, html.dark) header.sticky.top-0.z-40 {
  box-sizing:border-box;
  border:1px solid rgba(0,229,255,.2)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(15,22,44,.97),rgba(8,12,28,.97))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  color:#eaf6ff;
  overflow:visible!important;
}
#nav .nav-shell { max-width:none; margin:0; }
#nav .nav-inner { width:100%; max-width:none; height:48px; min-height:48px; padding:0 16px; gap:12px; }
#nav .brand { flex-shrink:1; min-width:0; gap:8px; padding:0; }
#nav .brand-mark { width:24px; height:24px; min-width:24px; border:0; background:none; box-shadow:none; border-radius:0; }
#nav .brand-logo { width:24px; height:24px; }
#nav .brand-name { font:600 14px/20px system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:0; white-space:nowrap; }
#nav .brand-tag { display:none; }
#nav .nav-links { gap:0; }
#nav .nav-links a { flex-shrink:0; justify-content:center; min-height:32px; padding:6px 12px; font-size:14px; line-height:20px; letter-spacing:0; white-space:nowrap; }
#nav .nav-cta { gap:8px; margin-left:0; flex-shrink:0; }
#nav .nav-cta .btn { height:32px; min-height:32px; padding:5px 12px; font-size:14px; line-height:20px; letter-spacing:0; white-space:nowrap; }
/* Keep the guest slot in the layout before and after authentication. */
html.is-authed #nav .nav-cta .auth-guest { display:inline-flex!important; visibility:hidden!important; pointer-events:none; }
#nav .nav-shell::before,#nav .nav-shell::after,#nav .sweep,#nav .brand-mark::before { display:none!important; }
:is(html, html.dark) header.fixed.top-0.z-50 > div { max-width:none!important; padding:10px 14px 0!important; transition:none!important; }
:is(html, html.dark) header.fixed.top-0.z-50 nav { height:50px!important; padding:0 16px!important; transition:none!important; }
:is(html, html.dark) header.fixed.top-0.z-50 nav::after,:is(html, html.dark) header.sticky.top-0.z-40::after { display:none!important; }
:is(html, html.dark) header.fixed.top-0.z-50 nav > a[href="/"] { padding:0!important; gap:8px; min-width:0; }
:is(html, html.dark) header.fixed.top-0.z-50 nav > a[href="/"] > div { width:24px!important; height:24px!important; }
:is(html, html.dark) header.fixed.top-0.z-50 nav > a[href="/"] > span { font-size:14px!important; line-height:20px!important; font-weight:600!important; letter-spacing:0!important; white-space:nowrap; }
:is(html, html.dark) header.fixed.top-0.z-50 nav > a[href="/"] > span::after { display:none!important; }
:is(html, html.dark) header.fixed.top-0.z-50 nav a[class*="rounded-lg"] { padding:6px 12px!important; font-size:14px; line-height:20px; letter-spacing:0; white-space:nowrap; }
:is(html, html.dark) header.sticky.top-0.z-40 { top:10px!important; margin:10px 14px -10px!important; }
:is(#nav .nav-links,:is(html, html.dark) header.fixed.top-0.z-50 nav) a:is(.is-active,.active,[aria-current="page"]) { color:#fff!important; background:rgba(0,229,255,.12)!important; text-shadow:none!important; }
@media(max-width:1050px) {
  :is(html, html.dark) header.fixed.top-0.z-50 nav > div.hidden { display:none!important; }
  :is(html, html.dark) header.fixed.top-0.z-50 nav > div:last-child { display:flex!important; }
  #nav .nav-links,#nav .nav-cta { display:none!important; }
  #nav .nav-burger { display:flex!important; margin-left:auto; flex-shrink:0; }
}
@media(max-width:640px) {
  #nav { margin:8px 8px 0; top:8px; }
  #nav .nav-inner { padding:0 12px; }
  #nav .brand-text { min-width:0; }
  #nav .brand-name { display:block; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
  :is(html, html.dark) header.fixed.top-0.z-50 > div { padding:8px 8px 0!important; }
  :is(html, html.dark) header.fixed.top-0.z-50 nav { padding:0 12px!important; }
  :is(html, html.dark) header.fixed.top-0.z-50 nav > a[href="/"] { flex-shrink:1; }
  :is(html, html.dark) header.fixed.top-0.z-50 nav > a[href="/"] > span { font-size:12px!important; max-width:calc(100vw - 165px)!important; overflow:hidden; text-overflow:ellipsis; display:block; }
  :is(html, html.dark) header.sticky.top-0.z-40 { top:8px!important; margin:8px 8px -8px!important; }
}
@property --nav-flow-angle { syntax:"<angle>"; inherits:false; initial-value:0deg; }
:is(#nav .nav-shell,:is(html, html.dark) header.fixed.top-0.z-50 nav,:is(html, html.dark) header.sticky.top-0.z-40) {
  background:linear-gradient(135deg,rgba(15,22,44,.76),rgba(20,14,48,.72))!important;
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  box-shadow:0 8px 26px rgba(0,0,0,.24),0 0 20px rgba(0,229,255,.09),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
/* Independent rounded effect layers never intercept controls or clip popovers. */
:is(#nav .nav-shell,:is(html, html.dark) header.fixed.top-0.z-50 nav,:is(html, html.dark) header.sticky.top-0.z-40)::before {
  content:""; display:block!important; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:linear-gradient(105deg,transparent 35%,rgba(83,240,255,.16) 47%,rgba(199,125,255,.18) 53%,transparent 65%);
  background:none; overflow:hidden; animation:none; opacity:1; transform:none; filter:none;
}
:is(#nav .nav-shell,:is(html, html.dark) header.fixed.top-0.z-50 nav,:is(html, html.dark) header.sticky.top-0.z-40)::after {
  content:""; display:block!important; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:1;
  background:conic-gradient(from var(--nav-flow-angle),transparent 0deg,#00e5ff 45deg,#7c5cff 85deg,#ff4ecd 120deg,transparent 165deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:none!important; transform:none; opacity:.75;
}
:is(#nav .nav-links,:is(html, html.dark) header.fixed.top-0.z-50 nav,:is(html, html.dark) header.sticky.top-0.z-40) a:hover {
  text-shadow:0 0 10px rgba(83,240,255,.65)!important; box-shadow:inset 0 0 14px rgba(83,240,255,.08);
}
/* Animate a narrow highlight inside the rounded clip, not the background pixels. */
:is(#nav .nav-shell,:is(html, html.dark) header.fixed.top-0.z-50 nav,:is(html, html.dark) header.sticky.top-0.z-40)::before {
  background:linear-gradient(105deg,transparent 35%,rgba(83,240,255,.17) 47%,rgba(199,125,255,.19) 53%,transparent 65%);
  clip-path:inset(0 round 999px); animation:navGlassSweep 20s ease-in-out infinite;
}
@keyframes navGlassSweep {
  0%,80% { opacity:0; transform:translateX(-37%) scaleX(.25); }
  82% { opacity:.85; }
  94% { opacity:.85; }
  96%,100% { opacity:0; transform:translateX(37%) scaleX(.25); }
}
@keyframes navBorderFlow { to { --nav-flow-angle:360deg; } }
:is(#nav,:is(html, html.dark) header.fixed.top-0.z-50,:is(html, html.dark) header.sticky.top-0.z-40) :is(button,a.btn,a[data-slot="button"]) {
  transition:box-shadow .22s ease,background-position .5s ease,filter .22s ease!important;
}
:is(#nav,:is(html, html.dark) header.fixed.top-0.z-50,:is(html, html.dark) header.sticky.top-0.z-40) :is(button,a.btn,a[data-slot="button"]):hover {
  box-shadow:0 0 15px rgba(0,229,255,.3),inset 0 0 12px rgba(124,92,255,.14)!important; filter:brightness(1.12);
}
:is(#nav,:is(html, html.dark) header.fixed.top-0.z-50,:is(html, html.dark) header.sticky.top-0.z-40) :is(button,a.btn,a[data-slot="button"]):active { filter:brightness(.92); box-shadow:inset 0 2px 6px rgba(0,0,0,.3)!important; }
:is(#nav,:is(html, html.dark) header.fixed.top-0.z-50,:is(html, html.dark) header.sticky.top-0.z-40) :is(a.btn-primary,.bg-primary) {
  background-image:linear-gradient(100deg,#53f0ff,#7c9dff,#c77dff,#53f0ff)!important; background-size:250% 100%!important; animation:none!important;
}
@keyframes navButtonFlow { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@media(prefers-reduced-motion:reduce) { :is(#nav,:is(html, html.dark) header.fixed.top-0.z-50,:is(html, html.dark) header.sticky.top-0.z-40) :is(button,a.btn,a[data-slot="button"]) { animation:none!important; transition:none!important; } }
@media(prefers-reduced-motion:reduce) {
  :is(#nav .nav-shell,:is(html, html.dark) header.fixed.top-0.z-50 nav,:is(html, html.dark) header.sticky.top-0.z-40)::before,
  :is(#nav .nav-shell,:is(html, html.dark) header.fixed.top-0.z-50 nav,:is(html, html.dark) header.sticky.top-0.z-40)::after { animation:none!important; }
}