.topbar{position:sticky;top:0;z-index:10}
.topbar .wrap{max-width:var(--max,1120px);margin:0 auto;padding:0 20px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;padding:14px 0}
.topbar .brand{display:flex;align-items:center;gap:12px;min-width:0}
.topbar .brand>div{min-width:0}
.topbar .brand strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .nav{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.topbar .menu-toggle{display:none;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;flex:0 0 auto;padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.topbar .menu-toggle:focus-visible,.mobile-menu-link:focus-visible,.mobile-menu-cta:focus-visible{outline:3px solid rgba(22,143,190,.28);outline-offset:3px}
.menu-icon{display:grid;gap:3px;width:18px}
.menu-icon span{display:block;height:2px;border-radius:999px;background:currentColor}
.mobile-menu{position:absolute;inset-inline:12px;top:calc(100% + 8px);z-index:20;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:0 18px 60px rgba(35,48,76,.16);opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.mobile-menu[hidden]{display:none}
.mobile-menu:not([hidden]){display:block}
.mobile-menu.is-open{opacity:1;transform:none}
.mobile-menu[aria-hidden=true]{visibility:hidden;pointer-events:none}
.mobile-menu-inner{display:grid;gap:4px}
.mobile-menu-link{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:12px;color:var(--text);font-size:15px;font-weight:650}
.mobile-menu-link:hover,.mobile-menu-link:focus-visible{background:var(--panel2)}
.mobile-menu-cta{width:100%;min-height:48px;margin-top:4px}
html[data-theme="dark"] .mobile-menu{box-shadow:0 18px 60px rgba(0,0,0,.45)}
@media (max-width:980px){
  .topbar .wrap{padding:0 16px}
  .topbar-inner{flex-wrap:nowrap;gap:10px;padding:10px 0}
  .topbar .nav,.topbar .cta-mobile{display:none}
  .topbar .menu-toggle{display:inline-flex;margin-left:auto}
  .topbar .brand{flex:1 1 auto;min-width:0}
}
@media (max-width:400px){
  .topbar .wrap{padding:0 10px}
  .topbar-inner{gap:8px;padding:8px 0}
  .topbar .brand{gap:6px}
  .topbar .mark{width:30px;height:30px}
  .topbar .brand strong{font-size:13px}
  .topbar .mono{display:none}
}
@media (max-width:240px){
  .topbar .wrap{padding-inline:8px}
  .topbar .brand{gap:4px}
  .topbar .brand strong{font-size:12px}
  .topbar .mark{width:28px;height:28px}
  .topbar .menu-toggle{padding-inline:9px}
  .mobile-menu{inset-inline:8px}
}
@media (prefers-reduced-motion:reduce){
  .mobile-menu{transition:none}
}