/* DIR Core — Public UI (cards + modal + filters) */
.dirplug-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:981px){ .dirplug-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } .dirplug-grid--books{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

.dirplug-card{ border:1px solid rgba(47,42,44,.10); border-radius: 22px; background: rgba(255,255,255,.88); box-shadow: 0 18px 50px rgba(47,42,44,.10); overflow:hidden; }
.dirplug-media{ height: 170px; background-size: cover; background-position: center; background-color: rgba(248,247,248,.92); }
.dirplug-media--empty{
  background-image:
    radial-gradient(140px 140px at 20% 30%, rgba(187,98,130,.12), transparent 60%),
    radial-gradient(180px 180px at 80% 60%, rgba(206,153,165,.12), transparent 60%),
    linear-gradient(180deg, rgba(248,247,248,.90), rgba(248,247,248,.98));
}
.dirplug-body{ padding: 14px; }
.dirplug-tag{ display:inline-flex; padding:8px 10px; border-radius:999px; background: rgba(187,98,130,.10); border: 1px solid rgba(187,98,130,.18); color: rgba(47,42,44,.85); font-weight:900; font-size: 12px; letter-spacing:.06em; margin-bottom: 10px; }
.dirplug-title{ margin:0; font-family: "Playfair Display", serif; font-weight: 700; font-size: 18px; line-height: 1.25; color:#2F2A2C; }
.dirplug-title a{ color: #2F2A2C; text-decoration:none; }
.dirplug-title a:hover{ text-decoration: underline; text-decoration-color: rgba(187,98,130,.55); }
.dirplug-meta{ margin-top: 10px; color: rgba(95,87,90,.85); font-size: 13px; line-height: 1.6; }
.dirplug-excerpt{ margin-top: 10px; color: rgba(95,87,90,.88); line-height: 1.7; font-size: 14px; }
.dirplug-actions{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }

.dirplug-btn{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, #6A4B55, #5a3f47); color:#fff; font-weight: 900; text-decoration:none; border: 0; cursor:pointer; }
.dirplug-btn:hover{ opacity:.95; transform: translateY(-1px); }
.dirplug-btn--ghost{ background: rgba(255,255,255,.86) !important; border: 1px solid rgba(47,42,44,.12) !important; color: #2F2A2C !important; }

.dirplug-empty{ padding: 14px; border-radius: 18px; border: 1px dashed rgba(187,98,130,.28); background: rgba(255,255,255,.76); color: rgba(95,87,90,.9); }

/* Books */
.dirplug-book{ border:1px solid rgba(47,42,44,.10); border-radius: 22px; background: rgba(255,255,255,.88); box-shadow: 0 18px 50px rgba(47,42,44,.10); overflow:hidden; }
.dirplug-bookCover{ height: 180px; background-size: cover; background-position:center; }
.dirplug-bookBody{ padding: 14px; }
.dirplug-bookTitle{ font-family:"Playfair Display",serif; font-weight: 700; font-size: 16px; color:#2F2A2C; }
.dirplug-bookTitle a{ color:#2F2A2C; text-decoration:none; }
.dirplug-bookAuthor{ margin-top:6px; color: rgba(95,87,90,.85); font-weight: 800; font-size: 13px; }

/* Modal */
.dirplug-modal{ position:fixed; inset:0; z-index:99999; }
.dirplug-modal[hidden]{ display:none !important; }
.dirplug-modal-backdrop{ position:absolute; inset:0; background: rgba(12,8,12,.26); }
.dirplug-modal-panel{
  position:absolute; left: 14px; right: 14px; top: 14px; bottom: 14px; max-width: 920px; margin: 0 auto;
  border-radius: 22px; background: rgba(255,255,255,.90);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(0,0,0,.10); box-shadow: 0 30px 90px rgba(10,6,10,.22);
  overflow:hidden; display:flex; flex-direction: column;
}
.dirplug-modal-x{
  position:absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  border-radius: 14px; border: 1px solid rgba(187,98,130,.35); background: rgba(187,98,130,.12);
  font-size: 22px; line-height: 1; font-weight: 900; color: #BB6282; cursor:pointer;
}
.dirplug-modal-head{ padding: 16px 16px 12px; border-bottom: 1px solid rgba(0,0,0,.08); background: linear-gradient(180deg, rgba(187,98,130,.12), rgba(255,255,255,1)); }
.dirplug-modal-tag{ display:inline-flex; padding: 8px 10px; border-radius: 999px; background: rgba(187,98,130,.10); border: 1px solid rgba(187,98,130,.18); font-weight: 900; font-size: 12px; }
.dirplug-modal-title{ margin-top: 10px; font-family: "Playfair Display", serif; font-weight: 700; font-size: 22px; color: #2F2A2C; }
.dirplug-modal-meta{ margin-top: 8px; color: rgba(95,87,90,.85); font-size: 13px; line-height: 1.6; }
.dirplug-modal-body{ padding: 16px; overflow:auto; color: rgba(47,42,44,.86); line-height: 1.85; }
.dirplug-modal-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.dirplug-modal-grid > div{ border: 1px solid rgba(0,0,0,.08); background: rgba(248,247,248,.92); border-radius: 16px; padding: 10px 12px; }
.dirplug-modal-actions{ padding: 14px 16px; border-top: 1px solid rgba(0,0,0,.08); display:flex; gap: 10px; justify-content:flex-end; flex-wrap:wrap; }
@media (min-width: 981px){ .dirplug-modal-panel{ top: 24px; bottom: 24px; left: 24px; right: 24px; } .dirplug-modal-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Filters */
.dirplug-filters{ display:grid; gap: 10px; margin: 14px 0 16px; }
.dirplug-search{ display:flex; gap: 10px; }
.dirplug-search input{ flex:1; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.86); }
.dirplug-search button{ padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(187,98,130,.22); background: rgba(187,98,130,.12); font-weight: 900; cursor:pointer; }
.dirplug-cats{ display:flex; flex-wrap:wrap; gap: 8px; }
.dirplug-cat{ padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.86); text-decoration:none; font-weight: 900; color: rgba(47,42,44,.86); font-size: 12px; }
.dirplug-cat.is-active{ border-color: rgba(187,98,130,.30); background: rgba(187,98,130,.10); }