/* frontend + scroller + label (no icon) */
:root {
  --dp-surface:#fff; --dp-text:#1f2937; --dp-muted:#6b7280; --dp-border:#e5e7eb;
  --dp-accent:#0ea5e9; --dp-accent-contrast:#fff; --dp-radius:16px; --dp-shadow:0 8px 24px rgba(0,0,0,.08);
  --dp-title:16px; --dp-meta:13px; --dp-badge-size:12px; --dp-thumb-h:auto;
}
@media (prefers-color-scheme: dark){
  :root{ --dp-surface:#0b1220; --dp-text:#e5e7eb; --dp-muted:#94a3b8; --dp-border:#1f2937; --dp-accent:#38bdf8; --dp-accent-contrast:#0b1220; --dp-shadow:0 8px 24px rgba(0,0,0,.5); }
}
.dapodik-label{ display:inline-flex; align-items:center; gap:8px; background:color-mix(in srgb, var(--dp-accent) 12%, transparent); color:var(--dp-text); border:1px solid color-mix(in srgb, var(--dp-accent) 40%, var(--dp-border)); padding:6px 10px; border-radius:999px; margin:8px 4px 8px; width:max-content; }
.dapodik-style-widget{ border:1px solid var(--dp-border); border-radius:var(--dp-radius); box-shadow:var(--dp-shadow); background:var(--dp-surface); padding:8px 8px 12px; }
.dapodik-widget-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 8px 10px; border-bottom:1px solid var(--dp-border); margin-bottom:10px; }
.dapodik-widget-title{ font-weight:700; color:var(--dp-text); }
.dapodik-widget-tools{ display:flex; align-items:center; gap:10px; color:var(--dp-muted); font-size:.9rem; }
.dapodik-scroller{ max-height:var(--dp-scroll-h, auto); overflow:auto; padding-right:2px; }
.dapodik-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.dapodik-card{ background:var(--dp-surface); border:1px solid var(--dp-border); border-radius:var(--dp-radius); overflow:hidden; box-shadow:var(--dp-shadow); transition:transform .2s; display:flex; flex-direction:column; min-height:100%; }
.dapodik-thumb{ position:relative; display:block; aspect-ratio:16/9; height: var(--dp-thumb-h); background:linear-gradient(135deg, rgba(14,165,233,.05), rgba(14,165,233,.15)); }
.dapodik-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.dapodik-badge{ position:absolute; left:12px; bottom:12px; background:var(--dp-accent); color:var(--dp-accent-contrast); padding:6px 10px; font-size: var(--dp-badge-size); border-radius:999px; box-shadow:0 6px 16px rgba(14,165,233,.35); }
.dapodik-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; }
.dapodik-title{ font-size:var(--dp-title); line-height:1.35; margin:0; }
.dapodik-title a{ color:var(--dp-text); text-decoration:none; }
.dapodik-title a:hover{ text-decoration:underline; }
.dapodik-meta{ color:var(--dp-muted); font-size:var(--dp-meta); }

/* No-image variant */
.dapodik--noimg .dapodik-body{ padding-top:12px; }
.dapodik-badge-inline{ display:inline-block; margin:12px 14px 0; background:var(--dp-accent); color:var(--dp-accent-contrast); padding:4px 8px; border-radius:999px; font-size: var(--dp-badge-size); width:max-content; }

.dapodik-actions{ display:flex; justify-content:center; margin-top:12px; }
.dapodik-loadmore{ border:1px solid var(--dp-border); background:var(--dp-surface); color:var(--dp-text); border-radius:999px; padding:10px 16px; cursor:pointer; font-weight:600; }

/* Skeletons */
.dapodik-skeletons{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; margin-top:16px; }
.dapodik-skeleton{ border-radius:var(--dp-radius); overflow:hidden; border:1px solid var(--dp-border); background:var(--dp-surface); animation:dpPulse 1.2s ease-in-out infinite; }
.dapodik-skeleton .ph-img{ aspect-ratio:16/9; background:#e5e7eb; }
.dapodik-skeleton .ph-body{ padding:12px; }
.dapodik-skeleton .ph-line{ height:12px; background:#e5e7eb; margin-bottom:10px; border-radius:8px; }
@keyframes dpPulse{ 0%{opacity:.8} 50%{opacity:.4} 100%{opacity:.8} }