.vt-topbar {
  
  height: var(--vt-topbar-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1.4rem;
  background: var(--vt-topbar-bg);
  border-bottom: 1px solid var(--vt-border-soft);
  
  position: sticky; top: 0; z-index: 40;
}

.vt-topbar-end { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.vt-topbar-company { display: flex; align-items: center; gap: .5rem; }
.vt-company-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vt-search {
  display: flex; align-items: center; gap: .5rem;
  background: var(--vt-bg);
  border: 1px solid var(--vt-border-soft);
  border-radius: 999px;
  padding: .38rem .85rem;
  color: var(--vt-text-mute);
  min-width: 15rem;
}
.vt-search input {
  border: 0; background: transparent; outline: none;
  color: var(--vt-text); font-size: .85rem; width: 100%;
}

.vt-search input:focus-visible { outline: none; }

.vt-search-wrap { position: relative; }
.vt-search-results {
  position: absolute; top: calc(100% + .35rem); left: 0;
  min-width: 22rem; max-width: 30rem;
  max-height: 22rem; overflow-y: auto;
  background: var(--vt-surface);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-r);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  
  z-index: 60;
  padding: .3rem;
}
.vt-search-group {
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--vt-text-mute);
  padding: .5rem .6rem .25rem;
}
.vt-search-hit {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: var(--vt-r-sm);
  padding: .45rem .6rem; cursor: pointer;
}
.vt-search-hit:hover { background: var(--vt-border-soft); }

.vt-search-hit { border-bottom: 1px solid var(--vt-border-soft); }
.vt-search-hit:last-child { border-bottom: 0; }
.vt-search-hit-top { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.vt-search-hit-title {
  font-weight: 600; font-size: .85rem; color: var(--vt-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vt-search-hit-at { margin-left: auto; flex: none; font-size: .72rem; color: var(--vt-text-mute); }
.vt-search-hit-sub b { font-weight: 600; color: var(--vt-text); }

.vt-search-hit-sub {
  display: block; font-size: .76rem; color: var(--vt-text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vt-search-empty {
  padding: .7rem .6rem; font-size: .82rem; color: var(--vt-text-mute);
}
.vt-iconbtn {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid transparent; border-radius: var(--vt-r);
  background: transparent; color: var(--vt-text-soft);
  cursor: pointer; transition: background .13s, color .13s;
}
.vt-iconbtn:hover { background: var(--vt-border-soft); color: var(--vt-text); }
.vt-topbar-divider { width: 1px; height: 24px; background: var(--vt-border); }

.vt-user { display: flex; align-items: center; gap: .55rem; }
.vt-user-name { font-size: .82rem; font-weight: 600; line-height: 1.15; }
.vt-user-role { font-size: .72rem; color: var(--vt-text-mute); line-height: 1.15; }

.vt-user-text { display: block; text-align: left; }
.vt-user-text > .vt-user-name, .vt-user-text > .vt-user-role { display: block; }
@media (max-width: 575.98px) { .vt-user-text { display: none; } }

.vt-usermenu { position: relative; }
.vt-usermenu > .vt-user {
  border: 1px solid transparent; border-radius: var(--vt-r);
  background: transparent; padding: .25rem .45rem; cursor: pointer;
  color: inherit; transition: background .13s, border-color .13s;
}
.vt-usermenu > .vt-user:hover { background: var(--vt-border-soft); }
.vt-usermenu.open > .vt-user { background: var(--vt-border-soft); border-color: var(--vt-border); }
.vt-usermenu-caret {
  width: 14px; height: 14px; color: var(--vt-text-mute);
  transform: rotate(90deg); transition: transform .13s;
}
.vt-usermenu.open .vt-usermenu-caret { transform: rotate(-90deg); }

.vt-menu {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 1080;
  min-width: 220px; padding: .35rem;
  background: var(--vt-surface); border: 1px solid var(--vt-border);
  border-radius: var(--vt-r); box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.vt-menu-head { padding: .5rem .6rem .55rem; border-bottom: 1px solid var(--vt-border-soft); margin-bottom: .3rem; }
.vt-menu-sub { font-size: .74rem; color: var(--vt-text-mute); }
.vt-menu-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .5rem .6rem; border: 0; border-radius: calc(var(--vt-r) - 2px);
  background: transparent; color: var(--vt-text);
  font-size: .84rem; text-align: left; cursor: pointer;
}
.vt-menu-item:hover { background: var(--vt-border-soft); }
.vt-menu-item .vt-icon { width: 16px; height: 16px; color: var(--vt-text-mute); }
.vt-menu-item.danger { color: var(--vt-danger, #dc3545); }
.vt-menu-item.danger .vt-icon { color: inherit; }
.vt-menu-sep { height: 1px; background: var(--vt-border-soft); margin: .3rem 0; }

.vt-balance {
  font-size: .82rem; font-weight: 600;
  padding: .32rem .6rem; border-radius: var(--vt-r);
  text-decoration: none; cursor: pointer;
  background: var(--vt-accent-soft); color: var(--vt-accent-text);
}
.vt-balance.low { background: var(--vt-danger-soft); color: var(--vt-danger); }

.vt-menu-btn { display: none; }

@media (max-width: 991px) {
  .vt-menu-btn {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; flex: none;
    border: 1px solid var(--vt-border); border-radius: var(--vt-r-sm);
    background: transparent; color: var(--vt-text);
  }
  .vt-search, .vt-search-wrap { display: none; }
}

.vt-company-change-icon { display: none; }
@media (max-width: 575.98px) {
  
  .vt-company-name { max-width: 6rem; }
  
  .vt-company-change-text { display: none; }
  .vt-company-change-icon { display: inline-block; }
}

@media (max-width: 768px) {
  .vt-main > .vt-topbar { padding: 0 .75rem; gap: .5rem; }
  .vt-main > .vt-topbar .vt-topbar-end,
  .vt-main > .vt-topbar .vt-topbar-company { gap: .25rem; }
  .vt-main > .vt-topbar .vt-menu-btn,
  .vt-main > .vt-topbar .vt-iconbtn { width: 40px; height: 40px; }
  .vt-main > .vt-topbar .vt-company-change {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px;
  }
  .vt-main > .vt-topbar .vt-balance { display: inline-flex; align-items: center; min-height: 40px; }
  .vt-main > .vt-topbar .vt-usermenu > .vt-user { min-height: 40px; }
  
  .vt-main > .vt-topbar .vt-topbar-end { min-width: 0; }
  .vt-main > .vt-topbar .vt-topbar-end > *,
  .vt-main > .vt-topbar .vt-company-change { flex: none; }
  .vt-main > .vt-topbar .vt-topbar-end > .vt-topbar-company { flex: 0 1 auto; min-width: 0; }
  .vt-main > .vt-topbar .vt-company-name { min-width: 0; }
}
@media (max-width: 575.98px) {
  .vt-main > .vt-topbar { padding: 0 .5rem; }
  .vt-main > .vt-topbar .vt-usermenu > .vt-user { gap: .25rem; padding: .25rem; }
}