/* S2G — shared fixed top navigation (used on every page via topbar.js). */
html{scroll-padding-top:62px}
.topbar{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(31,59,92,.97);backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);
  padding:9px 18px;box-shadow:0 2px 14px rgba(0,0,0,.18);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif}
.topbar a{text-decoration:none}
.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:800;color:#fff;font-size:18px;letter-spacing:-.3px}
.topbar .brand img{width:30px;height:30px;border-radius:8px}
.topbar nav{display:flex;align-items:center;gap:7px;margin:0}
.topbar nav a{color:rgba(255,255,255,.92);font-weight:600;font-size:15px;padding:7px 12px;border-radius:999px;white-space:nowrap}
.topbar nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.topbar nav a.ext{background:#F08C4A;color:#fff}
.topbar nav a.ext:hover{background:#FF8E6E;color:#fff}
@media (max-width:520px){
  .topbar{padding:8px 10px;gap:8px}
  .topbar .brand span{display:none}
  .topbar nav{gap:3px}
  .topbar nav a{font-size:13px;padding:6px 8px}
}
@media (max-width:380px){
  .topbar nav a{font-size:12px;padding:5px 7px}
}