header > .header-actions {
  min-width: 0;
  gap: 14px;
}

header > .header-actions :is(.theme-toggle, .logout) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-height: 44px;
  white-space: nowrap;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}

header > .header-actions :is(.theme-toggle, .logout):hover {
  border-color: #d73c4b;
}

.theme-icon { font-size: 16px; line-height: 1; }
.theme-label-compact { display: none; }

header > .header-actions .profile {
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 14px;
  min-width: 0;
}

header > .header-actions .profile .avatar { flex: none; }
header > .header-actions .profile > span:last-child { display: block; min-width: 0; }
#user-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  header > .header-actions { justify-content: flex-end; gap: 6px; }
  header > .header-actions :is(.theme-toggle, .logout) { padding-inline: 8px; }
  header > .header-actions .profile { display: flex; padding-inline-start: 6px; gap: 5px; }
  header > .header-actions .profile .avatar { width: 26px; height: 26px; }
  #user-role, .theme-label { display: none; }
  .theme-label-compact { display: inline; }
}