:root{
  --cmk-dyk-bg: var(--wp--preset--color--background, #ffffff);
  --cmk-dyk-fg: var(--wp--preset--color--foreground, #111111);
  --cmk-dyk-muted: color-mix(in oklab, var(--cmk-dyk-fg) 60%, transparent);
  --cmk-dyk-accent: var(--wp--preset--color--primary, #3aa5bf);
  --cmk-dyk-radius: 14px;
  --cmk-dyk-shadow: 0 6px 22px rgba(0,0,0,.08);
}
.cmk-dyk{ display:grid; gap: var(--wp--preset--spacing--20, 1rem); }
.cmk-dyk--cards{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cmk-dyk--list{ grid-template-columns: 1fr; }
.cmk-dyk-card{
  background: var(--cmk-dyk-bg);
  color: var(--cmk-dyk-fg);
  border-radius: var(--cmk-dyk-radius);
  box-shadow: var(--cmk-dyk-shadow);
  padding: var(--wp--preset--spacing--20, 1rem);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cmk-dyk-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.cmk-dyk-badge{
  position:absolute; top:.8rem; right:.9rem;
  font-weight:800; font-size:.88rem; letter-spacing:.02em;
  padding:.2rem .6rem; border-radius:999px;
  background: color-mix(in oklab, var(--cmk-dyk-accent) 18%, transparent);
  border: 1px solid var(--cmk-dyk-accent);
}
.cmk-dyk-title{ margin: .2rem 0 .4rem 0; font-size: 1.05rem; line-height: 1.25; }
.cmk-dyk-text{ margin:.15rem 0 .6rem 0; }
.cmk-dyk-meta{
  display:flex; flex-wrap:wrap; gap:.5rem .75rem;
  list-style:none; padding:0; margin:0 0 .5rem 0;
  color: var(--cmk-dyk-muted); font-size:.9rem;
}
.cmk-dyk-source{
  font-size:.88rem; text-decoration: none; color: var(--cmk-dyk-accent);
  border-bottom: 1px dashed color-mix(in oklab, var(--cmk-dyk-accent) 50%, transparent);
}
.cmk-dyk--empty{ opacity:.8; font-style:italic; }