/* spectator/css/deploy-status.css */
.ds-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.ds-header h2 { margin: 0; font-size: 1.3em; }
.ds-summary { display: flex; align-items: center; gap: 12px; }
.ds-pct { font-size: 1.8em; font-weight: 700; }
.ds-green { color: #10b981; }
.ds-yellow { color: #f59e0b; }
.ds-count { color: #6b7280; font-size: 0.9em; }
.ds-restart { background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 6px; font-size: 0.8em; font-weight: 600; }
.ds-ok { background: #d1fae5; color: #065f46; padding: 4px 8px; border-radius: 6px; font-size: 0.8em; font-weight: 600; }
.ds-progress { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin-bottom: 16px; }
.ds-bar { height: 100%; background: linear-gradient(90deg, #10b981, #3b82f6); border-radius: 4px; transition: width 0.5s ease; }
.ds-category { margin-bottom: 16px; }
.ds-category h3 { margin: 0 0 8px; font-size: 1em; color: #374151; }
.ds-cat-count { color: #9ca3af; font-weight: 400; font-size: 0.85em; }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.ds-card { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; font-size: 0.85em; border: 1px solid transparent; }
.ds-live { background: #f0fdf4; border-color: #bbf7d0; }
.ds-pending { background: #fffbeb; border-color: #fde68a; }
.ds-error { background: #fef2f2; border-color: #fecaca; }
.ds-icon { font-size: 1.1em; }
.ds-name { flex: 1; font-weight: 500; }
.ds-pr { background: #e0e7ff; color: #3730a3; padding: 1px 5px; border-radius: 4px; font-size: 0.75em; font-weight: 600; }
.ds-latency { color: #9ca3af; font-size: 0.75em; }
.ds-footer { text-align: center; color: #9ca3af; font-size: 0.8em; margin-top: 12px; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .ds-header h2 { color: #f3f4f6; }
  .ds-category h3 { color: #d1d5db; }
  .ds-progress { background: #374151; }
  .ds-live { background: #064e3b; border-color: #065f46; }
  .ds-pending { background: #78350f; border-color: #92400e; }
  .ds-error { background: #7f1d1d; border-color: #991b1b; }
  .ds-name { color: #f3f4f6; }
  .ds-restart { background: #78350f; color: #fde68a; }
  .ds-ok { background: #064e3b; color: #6ee7b7; }
}
.dark .ds-header h2 { color: #f3f4f6; }
.dark .ds-category h3 { color: #d1d5db; }
.dark .ds-progress { background: #374151; }
.dark .ds-live { background: #064e3b; border-color: #065f46; }
.dark .ds-pending { background: #78350f; border-color: #92400e; }
.dark .ds-error { background: #7f1d1d; border-color: #991b1b; }
.dark .ds-name { color: #f3f4f6; }
.dark .ds-restart { background: #78350f; color: #fde68a; }
.dark .ds-ok { background: #064e3b; color: #6ee7b7; }

@media (max-width: 768px) {
  .ds-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .ds-header { flex-direction: column; gap: 8px; }
  .ds-pct { font-size: 1.4em; }
}