.card {
  background: rgb(var(--comp.card.bg, var(--surface.rgb, 255 255 255)));
  color: rgb(var(--comp.card.fg, var(--fg.rgb, 17 24 39)));
  border: 1px solid rgb(var(--comp.card.border, var(--border.subtle.rgb, 226 232 240)));
  border-radius: var(--comp.card.radius, var(--radius.lg, 12px));
  box-shadow: var(--comp.card.shadow, var(--shadow.lift, 0 2px 8px rgba(15, 23, 42, 0.08)));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--comp.card.shadow.hover, var(--shadow.layer, 0 6px 16px rgba(15, 23, 42, 0.12)));
}

.list-group-item {
  border-left: none;
  border-right: none;
  border-color: rgb(var(--comp.card.border, var(--border.subtle.rgb, 226 232 240)));
  padding: 0.75rem 1.25rem;
}

.list-group-item:first-child {
  border-top: none;
}

.list-group-item:last-child {
  border-bottom: none;
}

.phase-header {
  font-weight: 600;
  color: rgb(var(--fg.rgb, 17 24 39));
  padding: 0.5rem 1rem;
  background: rgb(var(--surface.alt.rgb, 243 244 246));
  border-radius: var(--radius.md, 8px);
  margin-bottom: 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  background: rgb(var(--surface.alt.rgb, 243 244 246));
  color: rgb(var(--fg.subtle.rgb, 75 85 99));
  border-radius: var(--radius.md, 8px);
  margin-bottom: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: rgb(var(--fg.subtle.rgb, 75 85 99));
}

.breadcrumb-item a {
  color: rgb(var(--brand.accent.rgb, 0 122 255));
  text-decoration: none;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
  text-decoration: underline;
}

.tooltip-icon {
  cursor: pointer;
  margin-left: 0.25rem;
  color: rgb(var(--fg.subtle.rgb, 75 85 99));
}

.tooltip-icon:hover,
.tooltip-icon:focus {
  color: rgb(var(--brand.accent.rgb, 0 122 255));
}