/* ===== topbar.css ===== */
:root{
  --topbar-height: 55px;
  --brand-img-h: 32px;
  --pad: 16px;
}

.topbar{
  position: sticky; top: 0; z-index: 1000;
  background: #11161d; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
}
.topbar__inner{
  width:100%; max-width:none; margin:0;
  height: var(--topbar-height);
  padding-left: 30px; padding-right: var(--pad);
  display:flex; align-items:center; gap:12px;
}
.brand{ display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.brand img{ height: var(--brand-img-h); max-height: calc(var(--topbar-height) - 8px); width:auto; display:block; }
.topbar a{ color: rgba(255,255,255,.92); text-decoration:none; font-weight:600; }
.topbar a:hover{ color:#fff; }
.topbar__inner > .nav, .topbar__inner > .actions{ margin-left: auto !important; }

@media (max-width: 900px){
  .topbar__inner{ padding-inline: max(env(safe-area-inset-left), var(--pad)); }
}