.vesta-topbar {
  position: sticky;
  top: 0;
  z-index: 300;
  flex: 0 0 auto;
  min-height: var(--vesta-topbar-h);
  background: rgba(246,248,252,.78);
  border-bottom: 0;
  display:flex;
  flex-direction:column;
  padding:14px var(--vesta-page-padding) 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.vesta-topbar__row--main { min-height: 54px; display:grid; grid-template-columns:auto minmax(320px, 640px) auto; gap:18px; align-items:center; }
.vesta-topbar__row--mobile-search { display:none; padding:0 0 14px; }
.vesta-topbar__row--mobile-search.is-open { display:block; }
.vesta-topbar__left, .vesta-topbar__right { display:flex; align-items:center; gap:12px; }
.vesta-topbar__left { min-width:42px; }
.vesta-topbar__center { justify-self:start; width:100%; }
.vesta-search { display:flex; align-items:center; gap:10px; height:48px; background:rgba(255,255,255,.92); border:1px solid var(--vesta-border); border-radius:18px; padding:0 16px; box-shadow:0 14px 34px rgba(16,24,40,.05); }
.vesta-search input { border:none; outline:none; background:transparent; padding:0; width:100%; color:var(--vesta-text); }
.vesta-search input::placeholder{color:#8A94A6}.vesta-topbar__mobile-search-toggle { display:none; }
@media (max-width: 900px) {
  .vesta-topbar { padding: 12px 16px 0; }
  .vesta-topbar__row--main { grid-template-columns:minmax(0, 1fr) auto; gap: 12px; }
  .vesta-topbar__center { display:none; }
  .vesta-topbar__mobile-search-toggle { display:grid; }
  .vesta-topbar__right { gap: 8px; }
  .vesta-user-chip__label { display:none; }
  .vesta-user-chip { padding-right: 6px; }
}
@media (max-width: 767px) {
  .vesta-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; padding: var(--vesta-mobile-safe-top) 12px 0; min-height: var(--vesta-topbar-mobile-total); box-shadow: 0 1px 0 rgba(0,0,0,.04); }
  .vesta-topbar__row--main { min-height: var(--vesta-topbar-mobile-row-h); grid-template-columns: minmax(0, 1fr) auto; }
  .vesta-topbar__row--mobile-search { padding-bottom: 12px; }
  .vesta-topbar__row--mobile-search.is-open { display:block; }
  .vesta-topbar__create { padding:0 12px; min-width:auto; gap:6px; }
  .vesta-topbar__create span { display:none; }
}