.hover-tooltip {
  position: fixed;
  z-index: 1500;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.72rem; color: var(--text);
  pointer-events: none;
  display: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  min-width: 220px;
  max-width: 280px;
}
:where(html, body)[data-theme="light"] .hover-tooltip {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.hover-tooltip.visible { display: block; }
.hover-tooltip-title {
  font-weight: 700; font-size: 0.82rem;
  margin-bottom: 0.35rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}
.hover-tooltip-row {
  display: flex; align-items: baseline;
  gap: 0.4rem; line-height: 1.5;
}
.hover-tooltip-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; font-weight: 700;
  min-width: 2.4em; text-align: left;
}
.hover-tooltip-name { flex: 1; }
.hover-tooltip-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.loading {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--mid);
  font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
  z-index: 1000;
}
.loading.hidden { display: none; }
.loading.error { color: var(--t-cog); } /* semantic: error state (red) */