/**
 * BirrPubs global theme tokens & base styles.
 *
 * BismiLLAH Ar-Rahman Ar-Raheem.
 *
 * Brand palette (MANDATORY):
 *   --bp-green  #05B34D  Primary actions, brand
 *   --bp-gold   #F2B91C  Highlights, secondary CTAs
 *   --bp-dark   #181F25  Dark mode bg, text on light
 *   --bp-mint   #E9FBF1  Light mode bg
 *   --bp-white  #FFFFFF  Surfaces, cards
 *
 * Light mode is default; [data-theme="dark"] flips the surface/text tokens.
 */

:root {
  --bp-green: #05B34D;
  --bp-green-strong: #04923F;
  --bp-green-soft: #E9FBF1;
  --bp-gold: #F2B91C;
  --bp-gold-soft: #FEF4D7;
  --bp-dark: #181F25;
  --bp-mint: #E9FBF1;
  --bp-white: #FFFFFF;

  /* Surfaces (light defaults) */
  --bp-bg: var(--bp-mint);
  --bp-surface: var(--bp-white);
  --bp-surface-2: #F4FBF7;
  --bp-surface-3: #ECF7F0;
  --bp-text: var(--bp-dark);
  --bp-text-muted: #5B6A66;
  --bp-text-soft: #8A9893;
  --bp-border: #DCEEE3;
  --bp-border-strong: #B7D8C5;

  /* Effects */
  --bp-radius-sm: 8px;
  --bp-radius: 12px;
  --bp-radius-lg: 18px;
  --bp-radius-xl: 24px;
  --bp-shadow-sm: 0 1px 2px rgba(24, 31, 37, 0.06), 0 1px 3px rgba(24, 31, 37, 0.04);
  --bp-shadow: 0 4px 16px rgba(5, 179, 77, 0.08), 0 1px 3px rgba(24, 31, 37, 0.04);
  --bp-shadow-lg: 0 12px 32px rgba(5, 179, 77, 0.12), 0 4px 8px rgba(24, 31, 37, 0.04);
  --bp-ring: 0 0 0 3px rgba(5, 179, 77, 0.32);

  /* Type */
  --bp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --bp-font-serif: 'Iowan Old Style', 'Palatino Linotype', 'Palatino', 'Georgia', serif;
  --bp-font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;

  /* Layout */
  --bp-container: 1140px;
  --bp-header-h: 64px;

  /* Motion */
  --bp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bp-fast: 150ms;
  --bp-med: 250ms;
}

[data-theme="dark"] {
  --bp-bg: #11181B;
  --bp-surface: #181F25;
  --bp-surface-2: #1E262D;
  --bp-surface-3: #232C34;
  --bp-text: #E9FBF1;
  --bp-text-muted: #A6B8B2;
  --bp-text-soft: #7C8E89;
  --bp-border: #2A343C;
  --bp-border-strong: #3A474F;
  --bp-green-soft: #1B2F26;
  --bp-gold-soft: #2A2418;
  --bp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bp-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --bp-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --bp-ring: 0 0 0 3px rgba(5, 179, 77, 0.45);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bp-bg);
  color: var(--bp-text);
  font-family: var(--bp-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

body {
  overflow-x: hidden;
}

a {
  color: var(--bp-green);
  text-decoration: none;
  cursor: pointer;
}

a:hover, a:focus-visible {
  text-decoration: underline;
}

button {
  font-family: inherit;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: none;
  box-shadow: var(--bp-ring);
  border-radius: 6px;
}

/* Boot splash (shown until main.ts mounts) */
.app-boot {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bp-mint);
}

.app-boot-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bp-green), var(--bp-gold));
  animation: bp-pulse 1.4s var(--bp-ease) infinite;
}

.app-boot-text {
  margin: 0;
  color: var(--bp-dark);
  font-weight: 600;
  letter-spacing: 0.02em;
}

@keyframes bp-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

/* BirrStack component wrapper — let it shrink to its content */
[data-birr-host] {
  display: contents;
}

/* Utility — screen reader only */
.bp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scrollbar polish (desktop) */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--bp-border-strong);
    border-radius: 8px;
    border: 2px solid var(--bp-bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--bp-text-soft); }
}


/**
 * BirrPubs shared UI utilities — buttons, inputs, cards, layout primitives.
 *
 * BismiLLAH Ar-Rahman Ar-Raheem.
 *
 * These are design-system primitives shared across .birr components. Components
 * may also define their own scoped-by-naming-convention styles inline.
 */

/* ----------------------------- Layout ----------------------------- */

.bp-container {
  width: 100%;
  max-width: var(--bp-container);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .bp-container { padding: 0 24px; }
}

.bp-section {
  padding: 32px 0;
}

@media (min-width: 768px) {
  .bp-section { padding: 48px 0; }
}

.bp-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 540px) {
  .bp-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .bp-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .bp-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .bp-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.bp-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.bp-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.bp-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bp-stack-sm { gap: 8px; }
.bp-stack-lg { gap: 20px; }

.bp-grow { flex: 1 1 auto; min-width: 0; }
.bp-shrink-0 { flex-shrink: 0; }

.bp-divider {
  height: 1px;
  background: var(--bp-border);
  margin: 16px 0;
  border: 0;
}

/* ----------------------------- Typography ----------------------------- */

.bp-h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--bp-text);
}

.bp-h2 {
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--bp-text);
}

.bp-h3 {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--bp-text);
}

.bp-text-muted { color: var(--bp-text-muted); }
.bp-text-soft { color: var(--bp-text-soft); }
.bp-text-small { font-size: 0.875rem; }
.bp-text-tiny { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.bp-text-serif { font-family: var(--bp-font-serif); }
.bp-text-center { text-align: center; }
.bp-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-link {
  color: var(--bp-green);
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
}

.bp-link:hover { text-decoration: underline; }

/* ----------------------------- Buttons ----------------------------- */

.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--bp-radius);
  border: 1px solid transparent;
  background: var(--bp-surface);
  color: var(--bp-text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--bp-fast) var(--bp-ease), color var(--bp-fast) var(--bp-ease),
              border-color var(--bp-fast) var(--bp-ease), transform var(--bp-fast) var(--bp-ease),
              box-shadow var(--bp-fast) var(--bp-ease);
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.bp-btn:hover { text-decoration: none; }
.bp-btn:active { transform: scale(0.97); }
.bp-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.bp-btn-primary {
  background: var(--bp-green);
  color: var(--bp-white);
}
.bp-btn-primary:hover { background: var(--bp-green-strong); }

.bp-btn-gold {
  background: var(--bp-gold);
  color: var(--bp-dark);
}
.bp-btn-gold:hover { background: #d9a513; }

.bp-btn-outline {
  background: transparent;
  border-color: var(--bp-border-strong);
  color: var(--bp-text);
}
.bp-btn-outline:hover { border-color: var(--bp-green); color: var(--bp-green); }

.bp-btn-ghost {
  background: transparent;
  color: var(--bp-text-muted);
}
.bp-btn-ghost:hover { background: var(--bp-surface-3); color: var(--bp-text); }

.bp-btn-danger {
  background: #DC2626;
  color: var(--bp-white);
}
.bp-btn-danger:hover { background: #B91C1C; }

.bp-btn-sm {
  padding: 6px 12px;
  font-size: 0.85rem;
  min-height: 36px;
  border-radius: var(--bp-radius-sm);
}

.bp-btn-lg {
  padding: 14px 24px;
  font-size: 1.05rem;
  min-height: 52px;
}

.bp-btn-block { width: 100%; }

.bp-btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  min-height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--bp-text-muted);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--bp-fast), color var(--bp-fast);
}
.bp-btn-icon:hover { background: var(--bp-surface-3); color: var(--bp-text); }

/* ----------------------------- Inputs ----------------------------- */

.bp-input,
.bp-textarea,
.bp-select {
  display: block;
  width: 100%;
  padding: 11px 14px;
  background: var(--bp-surface);
  color: var(--bp-text);
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-radius);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color var(--bp-fast), box-shadow var(--bp-fast);
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}

.bp-input::placeholder,
.bp-textarea::placeholder { color: var(--bp-text-soft); }

.bp-input:focus,
.bp-textarea:focus,
.bp-select:focus {
  outline: none;
  border-color: var(--bp-green);
  box-shadow: var(--bp-ring);
}

.bp-textarea { min-height: 120px; resize: vertical; }

.bp-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.bp-input-group .bp-input { padding-left: 40px; }

.bp-input-group .bp-input-icon {
  position: absolute;
  left: 12px;
  display: flex;
  color: var(--bp-text-soft);
  pointer-events: none;
}

.bp-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bp-text);
  margin-bottom: 6px;
}

.bp-field {
  margin-bottom: 16px;
}

/* ----------------------------- Cards ----------------------------- */

.bp-card {
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-lg);
  padding: 20px;
  box-shadow: var(--bp-shadow-sm);
  transition: box-shadow var(--bp-med) var(--bp-ease), transform var(--bp-med) var(--bp-ease),
              border-color var(--bp-med) var(--bp-ease);
}

.bp-card-interactive { cursor: pointer; }
.bp-card-interactive:hover {
  box-shadow: var(--bp-shadow-lg);
  transform: translateY(-2px);
  border-color: var(--bp-border-strong);
}

/* ----------------------------- Badges & chips ----------------------------- */

.bp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bp-green-soft);
  color: var(--bp-green-strong);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bp-badge-gold {
  background: var(--bp-gold-soft);
  color: #8a6500;
}

.bp-badge-muted {
  background: var(--bp-surface-3);
  color: var(--bp-text-muted);
}

.bp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  color: var(--bp-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--bp-fast) var(--bp-ease);
  font-family: inherit;
}
.bp-chip:hover { border-color: var(--bp-green); color: var(--bp-green); }
.bp-chip-active {
  background: var(--bp-green);
  border-color: var(--bp-green);
  color: var(--bp-white);
}
.bp-chip-active:hover { background: var(--bp-green-strong); color: var(--bp-white); }

/* ----------------------------- Spinner ----------------------------- */

.bp-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--bp-border);
  border-top-color: var(--bp-green);
  animation: bp-spin 0.8s linear infinite;
}

.bp-spinner-lg { width: 48px; height: 48px; border-width: 4px; }
.bp-spinner-sm { width: 20px; height: 20px; border-width: 2px; }

@keyframes bp-spin {
  to { transform: rotate(360deg); }
}

.bp-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 24px;
  color: var(--bp-text-muted);
}

/* ----------------------------- Empty state ----------------------------- */

.bp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--bp-text-muted);
}

.bp-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bp-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bp-text-soft);
}

/* ----------------------------- Tables ----------------------------- */

.bp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}

.bp-table th,
.bp-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--bp-border);
}

.bp-table th {
  font-weight: 600;
  color: var(--bp-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bp-surface-2);
}

.bp-table tbody tr:hover { background: var(--bp-surface-2); }

.bp-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
}

/* ----------------------------- Hero ----------------------------- */

.bp-hero {
  background: linear-gradient(135deg, var(--bp-green-soft) 0%, var(--bp-surface) 100%);
  border-radius: var(--bp-radius-xl);
  padding: 40px 24px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .bp-hero { padding: 64px 48px; }
}

.bp-hero-mark {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--bp-green) 0%, transparent 70%);
  opacity: 0.12;
  pointer-events: none;
}

/* --------------------- Shared book card (catalog) --------------------- */
/* Used by BooksPage and other catalog views. HomePage uses its own
   .bp-home-book-card variant; these shared rules keep the catalog
   consistent regardless of where they are defined. */

.bp-book-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bp-book-card-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bp-surface-3);
  overflow: hidden;
}

.bp-book-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--bp-ease);
}

.bp-card-interactive:hover .bp-book-card-cover img,
.bp-book-card:hover .bp-book-card-cover img { transform: scale(1.04); }

.bp-book-card-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bp-text-soft);
}

.bp-book-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.bp-book-card-title {
  font-size: 1.05rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bp-book-card-author { margin: 0; }

.bp-book-card-desc {
  margin: 4px 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
}

.bp-book-card-footer { margin-top: 12px; }

.bp-book-card-price {
  font-weight: 700;
  color: var(--bp-green);
  font-size: 1.05rem;
}

.bp-book-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--bp-text-muted);
  font-weight: 600;
  font-size: 0.85rem;
}

.bp-card-interactive:hover .bp-book-card-cta { color: var(--bp-green); }

/* ----------------------------- Misc ----------------------------- */

.bp-skeleton {
  background: linear-gradient(90deg, var(--bp-surface-3) 0%, var(--bp-surface-2) 50%, var(--bp-surface-3) 100%);
  background-size: 200% 100%;
  animation: bp-shimmer 1.5s infinite;
  border-radius: var(--bp-radius);
}

@keyframes bp-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.bp-hidden { display: none !important; }
.bp-visually-hidden { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; }

/* The BirrStack compiler wraps each component's template in a bare <div>.
   Use `display: contents` to make these wrappers transparent to layout. */
.bp-shell > div,
.bp-view > div,
.bp-header-slot > div,
.bp-footer-slot > div,
.bp-toast-slot > div,
.bp-overlay-slot > div {
  display: contents;
}

/* --------------------- Cover tones (SSG-safe covers) ---------------------
 * Records carry a `coverColor`; rendering goes through these palette classes
 * so server-rendered and client-rendered markup style identically without
 * runtime style bindings. Used with format.ts coverToneClass(). */

.bp-cover-tint {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bp-cover-tint .bp-cover-tint-initial {
  color: #ffffff;
  font-weight: 700;
  line-height: 1;
  opacity: 0.92;
  user-select: none;
}

.bp-cover-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.14) 100%);
  pointer-events: none;
}

.bp-tone-1 { background: linear-gradient(150deg, #0E7C3A 0%, #0A5C2B 100%); }
.bp-tone-2 { background: linear-gradient(150deg, #1C7C54 0%, #0E4F35 100%); }
.bp-tone-3 { background: linear-gradient(150deg, #17604A 0%, #0C3B2E 100%); }
.bp-tone-4 { background: linear-gradient(150deg, #2F6B3C 0%, #1B4324 100%); }
.bp-tone-5 { background: linear-gradient(150deg, #0B5563 0%, #073844 100%); }
.bp-tone-6 { background: linear-gradient(150deg, #234E70 0%, #142F45 100%); }
.bp-tone-7 { background: linear-gradient(150deg, #4A5A1F 0%, #2C3712 100%); }
.bp-tone-8 { background: linear-gradient(150deg, #5A3A1F 0%, #372312 100%); }

.bp-cover-tint .bp-cover-tint-initial {
  font-size: clamp(2rem, 5vw, 3.4rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Book card links: the whole card is a crawlable anchor (SEO parity with SPA nav). */
.bp-book-card-link { display: block; color: inherit; text-decoration: none; }
.bp-book-card-link:hover { text-decoration: none; }


/**
 * BirrPubs iconography — SVG icons via CSS mask.
 *
 * BismiLLAH Ar-Rahman Ar-Raheem.
 *
 * Per BirrStack Core Working Protocol: NO emojis in UI. SVG icons only.
 *
 * Each icon is a CSS class that applies a mask-image of an inline SVG.
 * Icons inherit text color via `background-color: currentColor` + mask, so
 * they automatically adapt to theme (light/dark) and state (hover, disabled).
 *
 * Usage in templates: <span class="bp-icon bp-icon-search"></span>
 */

.bp-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  vertical-align: middle;
}

/* Sizes */
.bp-icon-sm { width: 14px; height: 14px; }
.bp-icon-md { width: 18px; height: 18px; }
.bp-icon-lg { width: 24px; height: 24px; }
.bp-icon-xl { width: 32px; height: 32px; }

/* Search */
.bp-icon-search {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
}

/* Book (closed) */
.bp-icon-book {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v17H6.5A2.5 2.5 0 0 0 4 21.5z'/><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v17H6.5A2.5 2.5 0 0 0 4 21.5z'/><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/></svg>");
}

/* Book open */
.bp-icon-book-open {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 7v14'/><path d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 7v14'/><path d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/></svg>");
}

/* Menu (hamburger) */
.bp-icon-menu {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16M4 12h16M4 18h16'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16M4 12h16M4 18h16'/></svg>");
}

/* Close (X) */
.bp-icon-close {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>");
}

/* Chevron left */
.bp-icon-chevron-left {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>");
}

/* Chevron right */
.bp-icon-chevron-right {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>");
}

/* Chevron down */
.bp-icon-chevron-down {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

/* Sun (light mode) */
.bp-icon-sun {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/></svg>");
}

/* Moon (dark mode) */
.bp-icon-moon {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
}

/* User */
.bp-icon-user {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}

/* Shopping bag */
.bp-icon-bag {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
}

/* Arrow right */
.bp-icon-arrow-right {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>");
}

/* Plus */
.bp-icon-plus {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
}

/* Check */
.bp-icon-check {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}

/* Dashboard (grid) */
.bp-icon-dashboard {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/></svg>");
}

/* Edit (pencil) */
.bp-icon-edit {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z'/></svg>");
}

/* Trash */
.bp-icon-trash {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><path d='M10 11v6M14 11v6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><path d='M10 11v6M14 11v6'/></svg>");
}

/* Logout */
.bp-icon-logout {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='m16 17 5-5-5-5M21 12H9'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='m16 17 5-5-5-5M21 12H9'/></svg>");
}

/* Calendar */
.bp-icon-calendar {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>");
}

/* Tag */
.bp-icon-tag {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><circle cx='7' cy='7' r='1' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><circle cx='7' cy='7' r='1' fill='black'/></svg>");
}

/* Filter (funnel) */
.bp-icon-filter {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 3H2l8 9.46V19l4 2v-8.54z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 3H2l8 9.46V19l4 2v-8.54z'/></svg>");
}

/* Pen (author) */
.bp-icon-pen {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19l7-7 3 3-7 7-3-3z'/><path d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/><path d='M2 2l7.586 7.586'/><circle cx='11' cy='11' r='2' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19l7-7 3 3-7 7-3-3z'/><path d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/><path d='M2 2l7.586 7.586'/><circle cx='11' cy='11' r='2' fill='black'/></svg>");
}

/* Magazine (newspaper) */
.bp-icon-magazine {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/><path d='M18 14h-8M15 18h-5M10 6h8v4h-8zM8 6v4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/><path d='M18 14h-8M15 18h-5M10 6h8v4h-8zM8 6v4'/></svg>");
}

/* Sparkle (featured) */
.bp-icon-sparkle {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.5 5.5L19 10l-5.5 1.5L12 17l-1.5-5.5L5 10l5.5-1.5z'/><path d='M19 3v3M21 4.5h-3M5 18v3M6.5 19.5h-3'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.5 5.5L19 10l-5.5 1.5L12 17l-1.5-5.5L5 10l5.5-1.5z'/><path d='M19 3v3M21 4.5h-3M5 18v3M6.5 19.5h-3'/></svg>");
}

/* Heart */
.bp-icon-heart {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
}

/* Info */
.bp-icon-info {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>");
}

/* Warning */
.bp-icon-warning {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><path d='M12 9v4M12 17h.01'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><path d='M12 9v4M12 17h.01'/></svg>");
}

/* Logo mark (book + crescent) */
.bp-icon-logo {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 5a2 2 0 0 1 2-2h15v22H8a2 2 0 0 0-2 2z'/><path d='M6 25a2 2 0 0 1 2-2h15'/><path d='M19 8a5 5 0 1 0 0 8 4 4 0 1 1 0-8z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 5a2 2 0 0 1 2-2h15v22H8a2 2 0 0 0-2 2z'/><path d='M6 25a2 2 0 0 1 2-2h15'/><path d='M19 8a5 5 0 1 0 0 8 4 4 0 1 1 0-8z'/></svg>");
}

/* Mail (envelope) */
.bp-icon-mail {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 6L2 7'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 6L2 7'/></svg>");
}

/* Quote mark */
.bp-icon-quote {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21c3 0 7-1 7-8V5c0-1.25-.756-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z'/><path d='M15 21c3 0 7-1 7-8V5c0-1.25-.757-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21c3 0 7-1 7-8V5c0-1.25-.756-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z'/><path d='M15 21c3 0 7-1 7-8V5c0-1.25-.757-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z'/></svg>");
}

/* Star */
.bp-icon-star {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 15.09 8.26 22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 15.09 8.26 22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
}

/* Users (readers) */
.bp-icon-users {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}

/* Layers (stack) */
.bp-icon-layers {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12.83 2.18 8.93 4.6a2 2 0 0 1 0 3.6l-8.93 4.6a2 2 0 0 1-1.66 0l-8.93-4.6a2 2 0 0 1 0-3.6l8.93-4.6a2 2 0 0 1 1.66 0z'/><path d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/><path d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12.83 2.18 8.93 4.6a2 2 0 0 1 0 3.6l-8.93 4.6a2 2 0 0 1-1.66 0l-8.93-4.6a2 2 0 0 1 0-3.6l8.93-4.6a2 2 0 0 1 1.66 0z'/><path d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/><path d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/></svg>");
}

/* Globe */
.bp-icon-globe {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M2 12h20'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M2 12h20'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
}

/* Send (paper plane) */
.bp-icon-send {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m22 2-7 20-4-9-9-4z'/><path d='M22 2 11 13'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m22 2-7 20-4-9-9-4z'/><path d='M22 2 11 13'/></svg>");
}

/* Bookmark */
.bp-icon-bookmark {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/></svg>");
}

/* Minus */
.bp-icon-minus {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>");
}

/* Feather (author) */
.bp-icon-feather {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/><path d='M16 8 2 22'/><path d='M17.5 15H9'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/><path d='M16 8 2 22'/><path d='M17.5 15H9'/></svg>");
}

/* Compass (explore) */
.bp-icon-compass {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m16.24 7.76-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m16.24 7.76-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z'/></svg>");
}

/* Check circle */
.bp-icon-check-circle {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><path d='m22 4-10 10.01-3-3'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><path d='m22 4-10 10.01-3-3'/></svg>");
}

/* Arrow left */
.bp-icon-arrow-left {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5M12 19l-7-7 7-7'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5M12 19l-7-7 7-7'/></svg>");
}

/* Shield (trust) */
.bp-icon-shield {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></svg>");
}

/* Cart (shopping cart) */
.bp-icon-cart {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>");
}