.ds-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      font-size: var(--ds-text-caption);
      font-weight: 500;
      padding: 0.45rem 0.85rem;
      border-radius: var(--ds-radius-sm);
      border: 1px solid transparent;
      cursor: pointer;
      transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    }
    .ds-btn--primary { background: var(--ds-accent); color: #fff; }
    .ds-btn--primary:hover { filter: brightness(0.95); }
    .ds-btn--secondary { background: var(--ds-surface); color: var(--ds-text-secondary); border-color: var(--ds-border); }
    .ds-btn--secondary:hover { background: var(--ds-surface-inset); }
    .ds-btn--ghost { background: transparent; color: var(--ds-text-muted); padding: 0.45rem; }
    .ds-btn--ghost:hover { color: var(--ds-text); }
    .ds-btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.75rem;
      border: none;
      border-radius: var(--ds-radius-sm);
      background: transparent;
      color: var(--ds-text-muted);
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.12s ease, color 0.12s ease, background-color 0.12s ease;
    }
    .ds-btn-icon:focus-visible { opacity: 1; }
    .ds-btn-icon:hover { color: var(--ds-amount-negative); background: rgb(var(--ds-amount-negative-rgb) / 0.06); }
    .ds-btn-icon--action {
      opacity: 1;
      font-size: 1.25rem;
      font-weight: 400;
      line-height: 1;
      color: var(--ds-text-secondary);
    }
    .ds-btn-icon--action:hover {
      color: var(--ds-text);
      background: var(--ds-surface-inset);
    }