.phppd-wrap {
  --phppd-accent: var(--ph-accent, #0b5cff);
  --phppd-text: #111;
  --phppd-muted: #666;
  --phppd-card-bg: #fff;
  --phppd-card-border: #eaeaea;

  --phppd-title-size: 18px;
  --phppd-title-weight: 600;
  --phppd-statement-size: 14px;
  --phppd-statement-weight: 400;
  --phppd-line-height: 1.4;

  --phppd-logo-height: 80px;
  --phppd-logo-radius: 16px;
  --phppd-logo-padding: 14px;
  --phppd-logo-bg: white;
  --phppd-logo-border: #eaeaea;

  --phppd-modal-bg: #fff;
  --phppd-modal-text: #111;
  --phppd-modal-muted: #666;
  --phppd-modal-border: rgba(0,0,0,.12);

  color: var(--phppd-text);
}

.phppd-theme-dark {
  --phppd-text: #fff;
  --phppd-muted: rgba(255,255,255,.75);
  --phppd-card-bg: rgba(255,255,255,.06);
  --phppd-card-border: rgba(255,255,255,.12);

  --phppd-modal-bg: #111;
  --phppd-modal-text: #fff;
  --phppd-modal-muted: rgba(255,255,255,.75);
  --phppd-modal-border: rgba(255,255,255,.14);
}

.phppd-align-center { text-align: center; }
.phppd-align-left { text-align: left; }

.phppd-grid {
  display: grid;
  grid-template-columns: repeat(var(--phppd-cols, 4), minmax(0, 1fr));
  gap: var(--phppd-gap, 18px);
}

@media (max-width: 980px) {
  .phppd-grid { grid-template-columns: repeat(var(--phppd-cols-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .phppd-grid { grid-template-columns: repeat(var(--phppd-cols-mobile, 1), minmax(0, 1fr)); }
}

.phppd-layout-list .phppd-grid {
  grid-template-columns: 1fr;
}

.phppd-layout-logos .phppd-title,
.phppd-layout-logos .phppd-statement,
.phppd-layout-logos .phppd-actions { display: none; }

.phppd-item {
  text-decoration: none;
  color: inherit;
  display: block;
}

.phppd-card {
  background: var(--phppd-card-bg);
}

.phppd-border { border: 1px solid var(--phppd-card-border); }
.phppd-no-border { border: none; }

.phppd-shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.phppd-shadow-none { box-shadow: none; }

.phppd-hover-lift { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.phppd-hover-lift:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--phppd-accent) 35%, var(--phppd-card-border));
}

.phppd-logo-frame {
  height: var(--phppd-logo-height);
  border-radius: var(--phppd-logo-radius);
  background: var(--phppd-logo-bg);
  padding: var(--phppd-logo-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
  border: calc(var(--phppd-logo-border-on, 1) * 1px) solid var(--phppd-logo-border);
}

.phppd-logo-frame .phppd-logo-img {
  width: 100%;
  height: 100%;
  object-fit: var(--phppd-logo-fit, contain);
  display: block;
}

.phppd-item[style*="--phppd-logo-shadow:soft"] .phppd-logo-frame {
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

.phppd-logo-fallback {
  color: var(--phppd-muted);
  font-weight: 700;
  letter-spacing: .02em;
}

.phppd-title {
  font-size: var(--phppd-title-size);
  font-weight: var(--phppd-title-weight);
  line-height: 1.2;
  margin: 0 0 6px 0;
  text-transform: var(--phppd-title-transform, none);
}

.phppd-title a { color: inherit; text-decoration: none; }
.phppd-title a:hover { color: var(--phppd-accent); }

.phppd-statement {
  font-size: var(--phppd-statement-size);
  font-weight: var(--phppd-statement-weight);
  color: var(--phppd-muted);
  line-height: var(--phppd-line-height);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.phppd-actions { margin-top: 12px; }
.phppd-button {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--phppd-accent) 35%, var(--phppd-card-border));
  color: var(--phppd-text);
  text-decoration: none;
}
.phppd-button:hover {
  border-color: var(--phppd-accent);
  color: var(--phppd-accent);
}

.phppd-scope-group { margin-bottom: var(--phppd-section-spacing, 28px); }
.phppd-scope-heading { margin: 0 0 14px 0; }
.phppd-empty { color: var(--phppd-muted); }

/* -------------------- MODAL -------------------- */
.phppd-modal-open { overflow: hidden; }

.phppd-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}
.phppd-modal.is-open { display: block; }

.phppd-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.phppd-modal__panel {
  position: relative;
  max-width: 920px;
  width: min(920px, calc(100% - 32px));
  margin: 40px auto;
  background: var(--phppd-modal-bg);
  color: var(--phppd-modal-text);
  border-radius: 18px;
  border: 1px solid var(--phppd-modal-border);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  overflow: hidden;
}

@media (max-width: 767px) {
  .phppd-modal__panel { margin: 18px auto; width: calc(100% - 20px); }
}

.phppd-modal__top {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 18px 10px 18px;
}

@media (max-width: 767px) {
  .phppd-modal__top { grid-template-columns: 1fr auto; }
  .phppd-modal__logo { display: none; }
}

.phppd-modal__logo {
  height: 90px;
  border-radius: 16px;
  background: var(--phppd-logo-bg);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--phppd-modal-border) 70%, transparent);
}
.phppd-modal__logo img { width: 100%; height: 100%; object-fit: contain; }

.phppd-modal__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}
.phppd-modal__meta {
  margin-top: 6px;
  color: var(--phppd-modal-muted);
  font-size: 14px;
}

.phppd-modal__close {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--phppd-modal-border) 75%, transparent);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.phppd-modal__close:hover { border-color: var(--phppd-accent); color: var(--phppd-accent); }

.phppd-modal__body {
  padding: 0 18px 18px 18px;
}
.phppd-modal__content {
  color: var(--phppd-modal-text);
}
.phppd-modal__content p { color: var(--phppd-modal-text); }

.phppd-modal__actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.phppd-modal__actions a {
  text-decoration: none;
}
.phppd-modal__cta {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--phppd-accent) 35%, var(--phppd-modal-border));
  color: var(--phppd-modal-text);
}
.phppd-modal__cta:hover { border-color: var(--phppd-accent); color: var(--phppd-accent); }