/* One top bar for every MemeSwap surface.
   Self contained on purpose: it declares the colours it needs, so a page can adopt the shared bar
   without also pulling in the swap app stylesheet. The values match the swap header exactly, which
   is what makes the site look like one product instead of four.
   Markup comes from appHeader() in scripts/memeswap-site-chrome.mjs. Do not restyle it per page. */
.ms-topbar{
  --tb-volt:#a3ff12;
  --tb-volt-ink:#0b1204;
  --tb-text:#f0f5ee;
  --tb-muted:#a2ada3;
  --tb-hairline:rgba(225,255,210,.09);
  --tb-hairline-strong:rgba(225,255,210,.17);
  display:flex;
  align-items:center;
  gap:16px;
  height:auto;
  min-height:0;
  padding:10px 18px;
  background:rgba(8,12,9,.96);
  border-bottom:1px solid var(--tb-hairline-strong);
  box-shadow:0 10px 32px rgba(0,0,0,.2);
  position:sticky;
  top:0;
  z-index:20;
  flex-wrap:wrap;
}
.ms-topbar a{text-decoration:none}
.ms-topbar .logo{display:inline-flex;align-items:center;gap:0;min-width:0;flex:none}
.ms-topbar .ms-lockup{display:block;height:78px;width:auto;flex:none}
.ms-topbar .nav{
  display:flex;
  gap:4px;
  padding:3px;
  border:1px solid var(--tb-hairline);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.ms-topbar .nav a{
  color:var(--tb-muted);
  min-height:32px;
  display:inline-flex;
  align-items:center;
  border-radius:9px;
  padding:0 12px;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
}
.ms-topbar .nav a:hover{color:var(--tb-text)}
.ms-topbar .nav a.on{
  color:var(--tb-volt);
  background:rgba(163,255,18,.09);
  box-shadow:inset 0 0 0 1px rgba(163,255,18,.12);
}
.ms-topbar .tb-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.ms-topbar .wbtn{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:6px 12px;
  border:1px solid var(--tb-hairline-strong);
  border-radius:11px;
  background:rgba(255,255,255,.035);
  color:var(--tb-text);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  transition:border-color .15s,background .15s,transform .1s;
}
.ms-topbar .wbtn:hover{border-color:var(--tb-volt)}
.ms-topbar .wbtn:active{transform:scale(.98)}
.ms-topbar .wbtn.primary{
  background:var(--tb-volt);
  border-color:var(--tb-volt);
  color:var(--tb-volt-ink);
  box-shadow:0 8px 28px rgba(163,255,18,.1);
}
.ms-topbar .tb-note{color:var(--tb-muted);font-size:12px;font-weight:600;white-space:nowrap}

@media (max-width:860px){
  .ms-topbar{gap:10px}
  .ms-topbar .tb-note{display:none}
}
@media (max-width:700px){
  .ms-topbar{min-height:61px;padding:8px 10px;background:#090d0a;box-shadow:0 8px 24px rgba(0,0,0,.28)}
  .ms-topbar .ms-lockup{height:52px}
  .ms-topbar .nav a{font-size:12px;padding:0 9px}
  .ms-topbar .wbtn{min-height:34px;padding:5px 10px;font-size:11px}
}
@media (max-width:520px){
  /* Row one is the lockup and the single primary action, row two is the nav across the full width.
     The secondary action is dropped here rather than allowed to push the bar into a sideways scroll:
     every link in it also lives in the footer. */
  .ms-topbar{gap:8px;padding:8px}
  .ms-topbar .ms-lockup{height:40px}
  .ms-topbar .tb-actions .wbtn:not(.primary){display:none}
  .ms-topbar .nav{width:100%;order:3;justify-content:space-between}
  .ms-topbar .nav a{flex:1;justify-content:center;padding:0 6px;font-size:11px}
}