@layer layout {
.top { height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }

.crumbs { display: flex; align-items: center; gap: 6px; color: var(--fg-3); white-space: nowrap; min-width: 0; overflow: hidden; }
.crumbs b { color: var(--fg); font-weight: 600; }
.crumbs .sl { color: var(--fg-4); }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--fg); }

.search {
  flex: 1; max-width: 440px; margin: 0 auto; height: 32px; border-radius: var(--r-9); background: var(--bg-3);
  border: 1px solid var(--line-2); display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; color: var(--fg-3); text-align: left;
}
.search:hover { border-color: var(--fg-4); color: var(--fg-2); }
.search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.presence { display: flex; align-items: center; gap: 8px; font-size: var(--fs-11-5); color: var(--fg-3); white-space: nowrap; }

.ibtn { width: 32px; height: 32px; border-radius: var(--r-8); display: grid; place-items: center; color: var(--fg-3); position: relative; flex: none; }
.ibtn:hover { background: var(--bg-3); color: var(--fg); }
.ibtn.sm { width: 24px; height: 24px; }
.ibtn .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: var(--r-round); background: var(--sev-critical); border: 1.5px solid var(--bg-1); }

@media (max-width: 820px) { .presence { display: none; } }
@media (max-width: 560px) { .search span { display: none; } .search { flex: 0 0 auto; margin: 0 0 0 auto; } }
}