/* ═══════════════════════════════════════════════
   TOPBAR — Lean, informational
═══════════════════════════════════════════════ */
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 24px; gap: 12px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
}
.topbar-title {
  font-size: var(--font-heading);
  font-weight: 600; color: var(--text-primary);
}
.topbar-context {
  font-size: var(--font-body);
  color: var(--text-tertiary);
  display: flex; align-items: center; gap: 6px;
}
.topbar-context .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-disabled); }
.topbar-spacer { flex: 1; }
.topbar-search {
  display: flex; align-items: center; gap: 7px;
  background: var(--canvas); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 12px;
  cursor: pointer; transition: all .12s; min-width: 160px;
}
.topbar-search:hover { border-color: var(--border-strong); background: white; }
.topbar-search span { font-size: 12px; color: var(--text-tertiary); }
.topbar-search kbd {
  margin-left: auto; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; color: var(--text-tertiary);
  background: var(--surface);
}
.avatar {
  width: 28px; height: 28px; background: var(--info);
  border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: white;
}