.arc-debugger-panel {
  border: 1px solid #d5d9e0;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.arc-debugger-controls {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

#arc-debugger-filter {
  width: 100%;
  max-width: 420px;
  margin: 6px 0;
  padding: 6px 8px;
  border: 1px solid #c4cbd6;
  border-radius: 6px;
}

#arc-debugger-order-toggle {
  margin-bottom: 8px;
}

.arc-debugger-entry {
  margin: 4px 0;
}

.arc-debugger-entry.selected {
  font-weight: 600;
}

.arc-debugger-entry-time {
  display: inline-block;
  margin-left: 8px;
  color: #4b5563;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.arc-debugger-entry-status {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
}

.arc-debugger-entry-status.changed {
  background: #dcfce7;
  color: #166534;
}

.arc-debugger-entry-status.unchanged {
  background: #e2e8f0;
  color: #334155;
}

.arc-debugger-entry-duration {
  display: inline-block;
  margin-left: 6px;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.arc-debugger-entry-duration.fast {
  color: #166534;
  background: #dcfce7;
}

.arc-debugger-entry-duration.medium {
  color: #92400e;
  background: #fef3c7;
}

.arc-debugger-entry-duration.slow {
  color: #991b1b;
  background: #fee2e2;
}

.arc-debugger-entry-replay {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  color: #92400e;
  background: #fef3c7;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
}

.arc-debugger-entry-warning {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid #ef4444;
  border-radius: 999px;
  color: #991b1b;
  background: #fee2e2;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
}

#arc-debugger-state-view {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #c4cbd6;
}

#arc-debugger-diff-view {
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
}

#arc-debugger-diff-fields {
  margin: 6px 0 0;
  padding-left: 18px;
}

#arc-debugger-entry-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 8px 0;
}

#arc-debugger-entry-summary dt {
  color: #3f4958;
  font-size: 0.86rem;
}

#arc-debugger-entry-summary dd {
  margin: 0;
  color: #1f2530;
  font-size: 0.88rem;
}

#arc-debugger-session-tools {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #c4cbd6;
}

.arc-debugger-session-actions {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

#arc-debugger-session-json {
  width: 100%;
  min-height: 84px;
  border: 1px solid #c4cbd6;
  border-radius: 6px;
  padding: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
}

#arc-debugger-session-status {
  margin-top: 6px;
  color: #334155;
  font-size: 0.8rem;
}