.btn-icon {
  min-height: 24px;
  width: 24px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px !important;

  /* Works with .btn gradient background */
  background-color: #000080 !important;
}


/* Add Bookmark button - red ribbon */
.btn-icon-bookmark-add {
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'>\
  <path d='M7 3h10v18l-5-4-5 4z'/>\
</svg>") center/18px no-repeat,
    linear-gradient(135deg,#cc0000,#e60000,#ff2a2a) !important;
}

/* Bookmark List button – same red background */
.btn-icon-bookmark-list {
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' viewBox='0 0 24 24' stroke-linecap='round'>\
  <path d='M5 3h14v18H5z'/>\
  <line x1='8' y1='7'  x2='16' y2='7'/>\
  <line x1='8' y1='12' x2='16' y2='12'/>\
  <line x1='8' y1='17' x2='13' y2='17'/>\
</svg>") center/18px no-repeat,
    linear-gradient(135deg,#cc0000,#e60000,#ff2a2a) !important;
}


.page.bookmarked .page-content::after {
  content: "";
  position: absolute;

  top: -6px;       /* slightly above canvas */
  right: 20px;

  width: 28px;
  height: 70px;    /* actual long ribbon */

  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 70' fill='%23ff2a2a'><rect x='5' y='0' width='14' height='58' /><path d='M5 58 L12 70 L19 58 Z' /></svg>")
  no-repeat center / 28px 70px;

  z-index: 60;
  pointer-events: none;
  opacity: 1;
}

.page.page-right.bookmarked .page-content::after {
  top: -6px;       /* slightly above canvas */
  left: 20px;
}