.btn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 10px 18px;

  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.2px;

  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, filter .08s ease;
  text-decoration: none;
  user-select: none;
}

.btn--sm{
  padding: 8px 14px;
  font-size: 13px;
}

.btn--dark{
  background: var(--color-primary);
  color: var(--bg-card);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.25);
}

.btn--light{
  background: var(--bg-card);
  color: var(--color-primary);
  border-color: var(--color-border);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(0,0,0,0.10);
}

.btn:hover{ filter: brightness(1.03); }

.btn:active{
  transform: translateY(1px);
  box-shadow:
    0 5px 12px rgba(0,0,0,0.18),
    inset 0 2px 6px rgba(0,0,0,0.25);
}