:root {
  --base: #1e1e2e;
  --mantle: #181825;
  --crust: #11111b;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --text: #cdd6f4;
  --subtext0: #a6adc8;
  --subtext1: #bac2de;
  --overlay0: #6c7086;
  --green: #a6e3a1;
  --red: #f38ba8;
  --yellow: #f9e2af;
  --blue: #89b4fa;
  --mauve: #cba6f7;
  --peach: #fab387;
  --teal: #94e2d5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  background: var(--mantle);
  border-bottom: 1px solid var(--surface0);
}

.header-title h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--mauve);
}

.subtitle {
  margin: 4px 0 0;
  color: var(--subtext0);
  font-size: 0.9rem;
}

.conn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--subtext0);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--overlay0);
  transition: background-color 0.3s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.dot.online {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

.dot.offline {
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
  padding: 24px 32px;
}

.card {
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: 12px;
  padding: 20px;
}

.card.wide {
  grid-column: 1 / -1;
}

.card h2 {
  margin: 0 0 14px;
  font-size: 1.1rem;
  color: var(--blue);
}

.empty {
  color: var(--overlay0);
  font-style: italic;
}

.error {
  color: var(--red);
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.badge.success, .badge.healthy, .badge.synced, .badge.running {
  background: rgba(166, 227, 161, 0.15);
  color: var(--green);
}

.badge.failure, .badge.degraded, .badge.outofsync, .badge.crashloopbackoff {
  background: rgba(243, 139, 168, 0.15);
  color: var(--red);
}

.badge.in_progress, .badge.progressing, .badge.pending, .badge.queued {
  background: rgba(249, 226, 175, 0.15);
  color: var(--yellow);
}

.badge.cancelled, .badge.unknown {
  background: rgba(108, 112, 134, 0.2);
  color: var(--subtext0);
}

.run-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.run-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface0);
  border-radius: 8px;
  gap: 12px;
}

.run-item.latest {
  border: 1px solid var(--mauve);
}

.run-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.run-message {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.run-meta {
  font-size: 0.78rem;
  color: var(--subtext0);
}

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

.argo-field label {
  display: block;
  font-size: 0.78rem;
  color: var(--subtext0);
  margin-bottom: 4px;
}

.deployment-block {
  margin-bottom: 20px;
}

.deployment-block:last-child {
  margin-bottom: 0;
}

.deployment-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-weight: 600;
}

.deployment-title .tag {
  font-weight: 400;
  color: var(--subtext0);
  font-size: 0.85rem;
}

table.pods-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

table.pods-table th {
  text-align: left;
  color: var(--subtext0);
  font-weight: 500;
  padding: 6px 10px;
  border-bottom: 1px solid var(--surface0);
}

table.pods-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--surface0);
}

table.pods-table tr:last-child td {
  border-bottom: none;
}

.footer {
  text-align: center;
  padding: 16px;
  color: var(--overlay0);
  font-size: 0.8rem;
}