body {
  background: linear-gradient(135deg, #f3f7ff 0%, #eefaf2 100%);
  min-height: 100vh;
}

.app-shell {
  max-width: 720px;
  margin: 48px auto;
}

.status-pill {
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.status-none {
  background: #e9ecef;
  color: #495057;
}

.status-sent {
  background: #cfe2ff;
  color: #084298;
}

.status-replied {
  background: #d1e7dd;
  color: #0f5132;
}

.status-shared {
  background: #fff3cd;
  color: #664d03;
}

.progress-tick {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  vertical-align: middle;
  border: 2px solid #9ca3af;
  background: #e5e7eb;
  box-sizing: border-box;
}

.progress-tick::before {
  content: "";
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

.progress-tick.pending {
  border-color: #9ca3af;
  background: #e5e7eb;
}

.progress-tick.sent {
  border-color: #14532d;
  background: #14532d;
}

.progress-tick.sent::before {
  content: "✓";
  color: #ffffff;
}