.top-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--bar-h);
    flex: none;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    background: var(--surface-bar);
    border-bottom: 1px solid var(--border);
}

.top-bar__brand { display: flex; align-items: center; gap: 9px; font: 600 15px var(--font); letter-spacing: -.01em; white-space: nowrap; }
.top-bar__logo { width: 12px; height: 12px; border-radius: 3px; background: var(--strong); transform: rotate(45deg); }

.top-bar__search {
    width: min(440px, 100%);
    height: 36px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
}

.top-bar__nav { display: flex; gap: 18px; margin-left: auto; }
.top-bar__theme { margin-left: auto; }
.top-bar__nav + .top-bar__theme { margin-left: 0; }

@media (max-width: 767px) {
    .top-bar { padding: 0 16px; gap: 12px; }
    .top-bar__name--collapsible, .top-bar__search, .top-bar__nav { display: none; }
}