#titlebar {
  height: 52px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.tb-left, .tb-center, .tb-right { display: flex; align-items: center; gap: 12px; }

.tb-brand {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--text-primary);
}
.tb-pill {
  font-size: 10px; padding: 2px 6px;
  background: var(--bg-tertiary); border: 1px solid var(--border-default);
  color: var(--text-muted); border-radius: 999px;
}
.tb-sep { width: 1px; height: 20px; background: var(--border-subtle); }
.tb-page {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--text-secondary);
}

#tb-clock { font-size: 13px; color: var(--text-data); }

.tb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--severity-critical);
}
.tb-dot--ok {
  background: var(--severity-low);
  animation: pulse 1.4s ease-in-out infinite;
}
.tb-dot--off { background: var(--text-muted); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

.tb-status-text {
  font-size: 11px; color: var(--text-secondary);
  text-transform: uppercase;
}
.tb-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  color: var(--accent-cyan);
  padding: 3px 10px;
  border-radius: 999px;
}
.tb-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-indigo);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: white;
  text-decoration: none;
}