:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0f0f16;
  color: #f5f3ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 260px;
  background: radial-gradient(circle at top right, #2c1d55 0, #0f0f16 48%);
}

main {
  width: min(100%, 420px);
  min-height: 280px;
  padding: 22px;
}

.eyebrow {
  color: #b9a7ff;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 2px 0 18px;
  font-size: 1.55rem;
  line-height: 1.15;
}

.status-card {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  padding: 15px;
  border: 1px solid #393448;
  border-radius: 12px;
  background: rgb(20 19 30 / 78%);
}

.status-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #8b849b;
  box-shadow: 0 0 0 4px rgb(139 132 155 / 12%);
}

.status-dot.ready { background: #4ade80; box-shadow: 0 0 0 4px rgb(74 222 128 / 12%); }
.status-dot.attention { background: #fbbf24; box-shadow: 0 0 0 4px rgb(251 191 36 / 12%); }
.status-dot.error { background: #fb7185; box-shadow: 0 0 0 4px rgb(251 113 133 / 12%); }
.status-dot.pending { animation: pulse 1.4s ease-in-out infinite; }

.status-card p {
  margin: 4px 0 0;
  color: #b9b5c6;
  font-size: 0.86rem;
  line-height: 1.4;
}

button {
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  color: white;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button.primary { background: #7c3aed; }
button.secondary { background: #393448; }
button:hover { filter: brightness(1.12); }

dl {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  color: #b9b5c6;
  font-size: 0.75rem;
}

dl div { display: flex; justify-content: space-between; gap: 16px; }
dt { color: #777184; }
dd { margin: 0; text-align: right; }

@keyframes pulse {
  50% { opacity: 0.45; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot.pending { animation: none; }
}