.transition-timing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.transition-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.transition-insight-card {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--panel-border);
  background: color-mix(
    in srgb,
    var(--card-surface) 80%,
    var(--accent-primary) 20%
  );
}

.transition-insight-card--danger {
  background: color-mix(in srgb, var(--card-surface) 82%, var(--danger) 18%);
}

.transition-insight-card--warning {
  background: color-mix(in srgb, var(--card-surface) 82%, var(--warning) 18%);
}

.transition-insight-card--success {
  background: color-mix(in srgb, var(--card-surface) 82%, var(--success) 18%);
}

.theme-light .transition-insight-card {
  background: color-mix(
    in srgb,
    var(--card-surface) 92%,
    var(--accent-primary) 8%
  );
}

.theme-light .transition-insight-card--danger {
  background: color-mix(in srgb, var(--card-surface) 94%, var(--danger) 6%);
}

.theme-light .transition-insight-card--warning {
  background: color-mix(in srgb, var(--card-surface) 94%, var(--warning) 6%);
}

.theme-light .transition-insight-card--success {
  background: color-mix(in srgb, var(--card-surface) 94%, var(--success) 6%);
}

.transition-insight-card__title {
  margin-bottom: 8px;
  font-weight: 700;
}

.transition-insight-card__body {
  color: var(--text-muted);
  line-height: 1.5;
}

.transition-timing-card {
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--panel-border);
  background: var(--card-surface);
}

.transition-timing-card__label {
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 14px;
}

.transition-timing-card__value {
  display: block;
  margin-bottom: 6px;
  font-size: 30px;
  line-height: 1.1;
}

.transition-timing-card__meta {
  color: var(--text-muted);
  font-size: 14px;
}

.transition-list {
  display: grid;
  gap: 14px;
}

.transition-list--compact {
  gap: 12px;
}

.transition-item {
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--panel-border);
  background: var(--card-surface);
}

.transition-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.transition-item__title {
  font-weight: 700;
  line-height: 1.35;
}

.transition-item__count {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--surface-elevated);
  font-weight: 700;
}

.transition-item__meta {
  color: var(--text-muted);
  font-size: 14px;
}

.transition-item--compact {
  padding: 16px 18px;
}

.subpanel-title {
  margin: 0 0 12px;
  font-size: 18px;
}

.transition-manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.transition-manager-card {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--panel-border);
  background: var(--card-surface);
}

.transition-manager-card__top,
.transition-manager-card__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 14px;
}

.transition-manager-card__top span,
.transition-manager-card__stats span,
.transition-manager-card__meta {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}