body { margin: 0; background: #ffffff; font-family: "DM Sans", "Segoe UI", system-ui, sans-serif; }
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  background: #010b27; color: #e9edf8;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
}
.brand { display: flex; align-items: center; gap: 10px; color: #e9edf8; text-decoration: none; font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; font-weight: 800; font-size: 15px; }
.brand small { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; color: #9aa5c2; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: #e8240c; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; }
.top nav { display: flex; flex-wrap: wrap; gap: 6px; }
.top nav a { color: #c3cbe0; text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 10px; border-radius: 7px; }
.top nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.top nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.12); }
.top a:focus-visible { outline: 2px solid #e8240c; outline-offset: 2px; }
.loading { padding: 40px 16px; color: #56607a; text-align: center; }