/* ==========================================================================
   Example-website bar — shown on top of every CATBYTE example site so it is
   always clear the business is fictional and the page is a CATBYTE sample.
   ========================================================================== */
.cbx-bar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:.75rem;
  padding:.25rem max(14px, env(safe-area-inset-left));
  background:#0b1020; color:#e2e8f0;
  font:500 .8rem/1.3 'Prompt', system-ui, sans-serif;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.cbx-bar__tag{ display:inline-flex; align-items:center; gap:.45rem; min-width:0; }
.cbx-bar__tag img{ width:22px; height:22px; border-radius:6px; flex:none; }
.cbx-bar__tag span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cbx-bar__tag b{ color:#67e8f9; font-weight:600; }
.cbx-bar__actions{ display:flex; gap:.4rem; margin-left:auto; flex:none; }
.cbx-bar a{
  display:inline-flex; align-items:center; gap:.35rem;
  min-height:40px; padding:0 .8rem; border-radius:999px;
  color:#e2e8f0; text-decoration:none; border:1px solid rgba(255,255,255,.16);
  white-space:nowrap;
}
.cbx-bar a:hover{ background:rgba(255,255,255,.06); }
.cbx-bar a.cbx-bar__cta{ background:#f8fafc; color:#0b1020; border-color:#f8fafc; font-weight:600; }
@media (max-width:640px){
  .cbx-bar{ font-size:.74rem; gap:.5rem; }
  .cbx-bar__long{ display:none; }
  .cbx-bar a{ padding:0 .6rem; }
}

/* small notice toast used by the example sites for "this would open …" actions */
.cbx-toast{
  position:fixed; left:50%; bottom:22px; z-index:1100;
  transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  max-width:min(92vw, 440px);
  padding:.8rem 1rem; border-radius:14px;
  background:#0b1020; color:#f1f5f9; box-shadow:0 18px 40px -16px rgba(0,0,0,.5);
  font:400 .86rem/1.5 'Prompt', system-ui, sans-serif; text-align:center;
  transition:opacity .3s ease, transform .3s ease;
}
.cbx-toast.show{ opacity:1; transform:translate(-50%, 0); }