.dew-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dew-space-2);
  min-height: 44px;
  padding: 0 var(--dew-space-5);
  border: 1px solid transparent;
  border-radius: var(--dew-radius-pill);
  font: inherit;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.dew-button-primary {
  background: linear-gradient(135deg, var(--dew-color-primary), #5a3ed8);
  color: #fff;
  box-shadow: 0 16px 34px rgba(109, 86, 216, 0.24);
}

.dew-button-secondary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--dew-color-primary);
  border-color: var(--dew-color-border);
  box-shadow: var(--dew-shadow-control);
}

.dew-icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--dew-color-border);
  border-radius: var(--dew-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--dew-color-primary);
  box-shadow: var(--dew-shadow-control);
  cursor: pointer;
}

.dew-card {
  border: 1px solid rgba(209, 214, 235, 0.95);
  border-radius: var(--dew-radius-lg);
  background: var(--dew-color-surface-strong);
  box-shadow: var(--dew-shadow-card);
}

.dew-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 var(--dew-space-3);
  border: 1px solid rgba(217, 213, 242, 0.9);
  border-radius: var(--dew-radius-pill);
  background: rgba(246, 244, 255, 0.96);
  color: var(--dew-color-muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.dew-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #ede8ff, #e9f8ff);
  color: var(--dew-color-primary);
  font-weight: 900;
}

.dew-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}