/* Theme-friendly */
:root{
  --bp-bg: #f5f7fb;
  --bp-card: #fff;
  --bp-text: #1f2937;
  --bp-muted: #6b7280;
  --bp-border: rgba(0,0,0,.08);
  --bp-shadow: 0 14px 30px rgba(0,0,0,.10);
  --bp-shadow-hover: 0 18px 38px rgba(0,0,0,.14);
  --bp-radius: 14px;
}

.bp-page { background: var(--bp-bg); }

.bp-title{
  font-family:"Jost", sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  color: var(--bp-text);
}

.bp-subtitle{ color: var(--bp-muted); }

/* Search */
.bp-search-wrap{ max-width: 980px; }
.bp-search{
  background: var(--bp-card);
  border-radius: 999px;
  padding: 10px;
  border: 1px solid var(--bp-border);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  gap: 10px;
}
.bp-search-input{
  border: none !important;
  box-shadow: none !important;
}
.bp-search-btn{
  border-radius: 999px !important;
  padding: 10px 18px;
  font-weight: 700;
}

/* Pills */
.bp-pill{
  border: 1px solid var(--bp-border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: .88rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bp-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}
.bp-pill.is-active{
  background: var(--bs-primary);
  color:#fff;
  border-color: var(--bs-primary);
}

/* Cards (layout like screenshots) */
.bp-card{
  border-radius: var(--bp-radius);
  overflow: hidden;
  background: var(--bp-card);
  border: 1px solid var(--bp-border);
  box-shadow: var(--bp-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.bp-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--bp-shadow-hover);
}

/* Header bar uses bootstrap primary */
.bp-card-top{
  background: var(--bs-primary);
  padding: 18px;
}
.bp-card-title{
  color:#fff;
  font-family:"Jost", sans-serif;
  font-weight:800;
  font-size:1.05rem;
  line-height:1.25;
}
.bp-card-category{
  color: rgba(255,255,255,.85);
  font-size:.82rem;
  font-weight:700;
}

.bp-card-body{ padding: 16px 18px 18px; }
.bp-card-desc{ color: var(--bp-muted); font-size:.93rem; }

/* Tags */
.bp-tag{
  background: rgba(0,0,0,.04);
  border: 1px solid var(--bp-border);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--bp-text);
}

/* Buttons (keep same placement/size) */
.bp-btn{
  border-radius: 10px;
  font-weight: 800;
  padding: 10px 12px;
}

/* Category switch animation (simple + safe, doesn’t break layout) */
.bp-card-col.bp-leave{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
}