/* ============================================================
   Craft Blocks — Skeleton Image Library
   ============================================================ */

/* ── Color Scheme Variables ──────────────────────────────── */

.cb-sklib {
  /* Gray (default) */
  --sk-base:    #e5e7eb;
  --sk-shine:   #f3f4f6;
  --sk-bg:      #ffffff;
  --sk-card-bg: #f9fafb;
  --sk-border:  #e5e7eb;
  --sk-accent:  #d1d5db;
  --sk-dark:    #1e293b;
  --sk-dark2:   #334155;
  --sk-pop:     #6366f1;
  --sk-pop2:    #818cf8;
}

.cb-sklib[data-scheme="gray"] {
  --sk-base:    #e5e7eb;
  --sk-shine:   #f9fafb;
  --sk-bg:      #ffffff;
  --sk-card-bg: #f9fafb;
  --sk-border:  #e5e7eb;
  --sk-accent:  #9ca3af;
  --sk-dark:    #1f2937;
  --sk-dark2:   #374151;
  --sk-pop:     #6366f1;
  --sk-pop2:    #a5b4fc;
}

.cb-sklib[data-scheme="slate"] {
  --sk-base:    #cbd5e1;
  --sk-shine:   #f1f5f9;
  --sk-bg:      #f8fafc;
  --sk-card-bg: #f1f5f9;
  --sk-border:  #e2e8f0;
  --sk-accent:  #94a3b8;
  --sk-dark:    #1e293b;
  --sk-dark2:   #334155;
  --sk-pop:     #3b82f6;
  --sk-pop2:    #93c5fd;
}

.cb-sklib[data-scheme="dark"] {
  --sk-base:    #374151;
  --sk-shine:   #4b5563;
  --sk-bg:      #111827;
  --sk-card-bg: #1f2937;
  --sk-border:  #374151;
  --sk-accent:  #4b5563;
  --sk-dark:    #030712;
  --sk-dark2:   #111827;
  --sk-pop:     #818cf8;
  --sk-pop2:    #a5b4fc;
}

.cb-sklib[data-scheme="navy"] {
  --sk-base:    #1e3a5f;
  --sk-shine:   #1e4a76;
  --sk-bg:      #0f172a;
  --sk-card-bg: #1e293b;
  --sk-border:  #1e3a5f;
  --sk-accent:  #2563eb;
  --sk-dark:    #020617;
  --sk-dark2:   #0f172a;
  --sk-pop:     #3b82f6;
  --sk-pop2:    #93c5fd;
}

.cb-sklib[data-scheme="warm"] {
  --sk-base:    #e7d5c0;
  --sk-shine:   #f5ece2;
  --sk-bg:      #fdf8f3;
  --sk-card-bg: #f5ece2;
  --sk-border:  #f0e6d8;
  --sk-accent:  #d4a574;
  --sk-dark:    #44281a;
  --sk-dark2:   #6b3a2a;
  --sk-pop:     #c2693b;
  --sk-pop2:    #e8956b;
}

.cb-sklib[data-scheme="blue"] {
  --sk-base:    #bfdbfe;
  --sk-shine:   #eff6ff;
  --sk-bg:      #f0f9ff;
  --sk-card-bg: #e0f2fe;
  --sk-border:  #bae6fd;
  --sk-accent:  #60a5fa;
  --sk-dark:    #0c4a6e;
  --sk-dark2:   #075985;
  --sk-pop:     #2563eb;
  --sk-pop2:    #60a5fa;
}

.cb-sklib[data-scheme="violet"] {
  --sk-base:    #ddd6fe;
  --sk-shine:   #f5f3ff;
  --sk-bg:      #faf5ff;
  --sk-card-bg: #ede9fe;
  --sk-border:  #e9d5ff;
  --sk-accent:  #a78bfa;
  --sk-dark:    #3b0764;
  --sk-dark2:   #581c87;
  --sk-pop:     #7c3aed;
  --sk-pop2:    #c4b5fd;
}

.cb-sklib[data-scheme="emerald"] {
  --sk-base:    #a7f3d0;
  --sk-shine:   #ecfdf5;
  --sk-bg:      #f0fdf4;
  --sk-card-bg: #d1fae5;
  --sk-border:  #bbf7d0;
  --sk-accent:  #34d399;
  --sk-dark:    #022c22;
  --sk-dark2:   #064e3b;
  --sk-pop:     #059669;
  --sk-pop2:    #6ee7b7;
}

.cb-sklib[data-scheme="rose"] {
  --sk-base:    #fecdd3;
  --sk-shine:   #fff1f2;
  --sk-bg:      #fff5f5;
  --sk-card-bg: #ffe4e6;
  --sk-border:  #fecdd3;
  --sk-accent:  #fb7185;
  --sk-dark:    #4c0519;
  --sk-dark2:   #881337;
  --sk-pop:     #e11d48;
  --sk-pop2:    #fda4af;
}

.cb-sklib[data-scheme="amber"] {
  --sk-base:    #fde68a;
  --sk-shine:   #fffbeb;
  --sk-bg:      #fffdf0;
  --sk-card-bg: #fef3c7;
  --sk-border:  #fde68a;
  --sk-accent:  #fbbf24;
  --sk-dark:    #451a03;
  --sk-dark2:   #78350f;
  --sk-pop:     #d97706;
  --sk-pop2:    #fcd34d;
}

.cb-sklib[data-scheme="teal"] {
  --sk-base:    #99f6e4;
  --sk-shine:   #f0fdfa;
  --sk-bg:      #f0fdfa;
  --sk-card-bg: #ccfbf1;
  --sk-border:  #99f6e4;
  --sk-accent:  #2dd4bf;
  --sk-dark:    #042f2e;
  --sk-dark2:   #134e4a;
  --sk-pop:     #0d9488;
  --sk-pop2:    #5eead4;
}

.cb-sklib[data-scheme="cyan"] {
  --sk-base:    #a5f3fc;
  --sk-shine:   #ecfeff;
  --sk-bg:      #ecfeff;
  --sk-card-bg: #cffafe;
  --sk-border:  #a5f3fc;
  --sk-accent:  #22d3ee;
  --sk-dark:    #083344;
  --sk-dark2:   #155e75;
  --sk-pop:     #0891b2;
  --sk-pop2:    #67e8f9;
}

.cb-sklib[data-scheme="indigo"] {
  --sk-base:    #c7d2fe;
  --sk-shine:   #eef2ff;
  --sk-bg:      #eef2ff;
  --sk-card-bg: #e0e7ff;
  --sk-border:  #c7d2fe;
  --sk-accent:  #818cf8;
  --sk-dark:    #1e1b4b;
  --sk-dark2:   #312e81;
  --sk-pop:     #4f46e5;
  --sk-pop2:    #a5b4fc;
}

.cb-sklib[data-scheme="fuchsia"] {
  --sk-base:    #f5d0fe;
  --sk-shine:   #fdf4ff;
  --sk-bg:      #fdf4ff;
  --sk-card-bg: #fae8ff;
  --sk-border:  #f5d0fe;
  --sk-accent:  #d946ef;
  --sk-dark:    #4a044e;
  --sk-dark2:   #701a75;
  --sk-pop:     #c026d3;
  --sk-pop2:    #e879f9;
}

.cb-sklib[data-scheme="pink"] {
  --sk-base:    #fbcfe8;
  --sk-shine:   #fdf2f8;
  --sk-bg:      #fdf2f8;
  --sk-card-bg: #fce7f3;
  --sk-border:  #fbcfe8;
  --sk-accent:  #f472b6;
  --sk-dark:    #500724;
  --sk-dark2:   #831843;
  --sk-pop:     #db2777;
  --sk-pop2:    #f9a8d4;
}

.cb-sklib[data-scheme="lime"] {
  --sk-base:    #d9f99d;
  --sk-shine:   #f7fee7;
  --sk-bg:      #f7fee7;
  --sk-card-bg: #ecfccb;
  --sk-border:  #d9f99d;
  --sk-accent:  #a3e635;
  --sk-dark:    #1a2e05;
  --sk-dark2:   #365314;
  --sk-pop:     #65a30d;
  --sk-pop2:    #bef264;
}

.cb-sklib[data-scheme="stone"] {
  --sk-base:    #d6d3d1;
  --sk-shine:   #f5f5f4;
  --sk-bg:      #fafaf9;
  --sk-card-bg: #f5f5f4;
  --sk-border:  #d6d3d1;
  --sk-accent:  #a8a29e;
  --sk-dark:    #1c1917;
  --sk-dark2:   #292524;
  --sk-pop:     #78716c;
  --sk-pop2:    #a8a29e;
}

.cb-sklib[data-scheme="zinc"] {
  --sk-base:    #d4d4d8;
  --sk-shine:   #f4f4f5;
  --sk-bg:      #fafafa;
  --sk-card-bg: #f4f4f5;
  --sk-border:  #d4d4d8;
  --sk-accent:  #a1a1aa;
  --sk-dark:    #18181b;
  --sk-dark2:   #27272a;
  --sk-pop:     #71717a;
  --sk-pop2:    #a1a1aa;
}

.cb-sklib[data-scheme="orange"] {
  --sk-base:    #fed7aa;
  --sk-shine:   #fff7ed;
  --sk-bg:      #fff7ed;
  --sk-card-bg: #ffedd5;
  --sk-border:  #fed7aa;
  --sk-accent:  #fb923c;
  --sk-dark:    #431407;
  --sk-dark2:   #7c2d12;
  --sk-pop:     #ea580c;
  --sk-pop2:    #fdba74;
}

.cb-sklib[data-scheme="sky"] {
  --sk-base:    #bae6fd;
  --sk-shine:   #f0f9ff;
  --sk-bg:      #f0f9ff;
  --sk-card-bg: #e0f2fe;
  --sk-border:  #bae6fd;
  --sk-accent:  #38bdf8;
  --sk-dark:    #0c4a6e;
  --sk-dark2:   #075985;
  --sk-pop:     #0284c7;
  --sk-pop2:    #7dd3fc;
}

/* ── cb-sk-embed: standalone wrapper for skeletons used inside other blocks ─ */

.cb-sk-embed {
  /* Defaults match the gray scheme */
  --sk-base:    #e5e7eb;
  --sk-shine:   #f9fafb;
  --sk-bg:      #ffffff;
  --sk-card-bg: #f9fafb;
  --sk-border:  #e5e7eb;
  --sk-accent:  #9ca3af;
  --sk-dark:    #1f2937;
  --sk-dark2:   #374151;
  --sk-pop:     #6366f1;
  --sk-pop2:    #a5b4fc;
  display: block;
  width: 100%;
  height: 100%;
}

.cb-sk-embed[data-scheme="slate"]   { --sk-base: #cbd5e1; --sk-shine: #f1f5f9; --sk-bg: #f8fafc; --sk-card-bg: #f1f5f9; --sk-border: #e2e8f0; --sk-accent: #94a3b8; --sk-dark: #1e293b; --sk-dark2: #334155; --sk-pop: #3b82f6; --sk-pop2: #93c5fd; }
.cb-sk-embed[data-scheme="dark"]    { --sk-base: #374151; --sk-shine: #4b5563; --sk-bg: #111827; --sk-card-bg: #1f2937; --sk-border: #374151; --sk-accent: #4b5563; --sk-dark: #030712; --sk-dark2: #111827; --sk-pop: #818cf8; --sk-pop2: #a5b4fc; }
.cb-sk-embed[data-scheme="navy"]    { --sk-base: #1e3a5f; --sk-shine: #1e4a76; --sk-bg: #0f172a; --sk-card-bg: #1e293b; --sk-border: #1e3a5f; --sk-accent: #2563eb; --sk-dark: #020617; --sk-dark2: #0f172a; --sk-pop: #3b82f6; --sk-pop2: #93c5fd; }
.cb-sk-embed[data-scheme="warm"]    { --sk-base: #e7d5c0; --sk-shine: #f5ece2; --sk-bg: #fdf8f3; --sk-card-bg: #f5ece2; --sk-border: #f0e6d8; --sk-accent: #d4a574; --sk-dark: #44281a; --sk-dark2: #6b3a2a; --sk-pop: #c2693b; --sk-pop2: #e8956b; }
.cb-sk-embed[data-scheme="blue"]    { --sk-base: #bfdbfe; --sk-shine: #eff6ff; --sk-bg: #f0f9ff; --sk-card-bg: #e0f2fe; --sk-border: #bae6fd; --sk-accent: #60a5fa; --sk-dark: #0c4a6e; --sk-dark2: #075985; --sk-pop: #2563eb; --sk-pop2: #60a5fa; }
.cb-sk-embed[data-scheme="violet"]  { --sk-base: #ddd6fe; --sk-shine: #f5f3ff; --sk-bg: #faf5ff; --sk-card-bg: #ede9fe; --sk-border: #e9d5ff; --sk-accent: #a78bfa; --sk-dark: #3b0764; --sk-dark2: #581c87; --sk-pop: #7c3aed; --sk-pop2: #c4b5fd; }
.cb-sk-embed[data-scheme="emerald"] { --sk-base: #a7f3d0; --sk-shine: #ecfdf5; --sk-bg: #f0fdf4; --sk-card-bg: #d1fae5; --sk-border: #bbf7d0; --sk-accent: #34d399; --sk-dark: #022c22; --sk-dark2: #064e3b; --sk-pop: #059669; --sk-pop2: #6ee7b7; }
.cb-sk-embed[data-scheme="rose"]    { --sk-base: #fecdd3; --sk-shine: #fff1f2; --sk-bg: #fff5f5; --sk-card-bg: #ffe4e6; --sk-border: #fecdd3; --sk-accent: #fb7185; --sk-dark: #4c0519; --sk-dark2: #881337; --sk-pop: #e11d48; --sk-pop2: #fda4af; }
.cb-sk-embed[data-scheme="amber"]   { --sk-base: #fde68a; --sk-shine: #fffbeb; --sk-bg: #fffdf0; --sk-card-bg: #fef3c7; --sk-border: #fde68a; --sk-accent: #fbbf24; --sk-dark: #451a03; --sk-dark2: #78350f; --sk-pop: #d97706; --sk-pop2: #fcd34d; }
.cb-sk-embed[data-scheme="teal"]    { --sk-base: #99f6e4; --sk-shine: #f0fdfa; --sk-bg: #f0fdfa; --sk-card-bg: #ccfbf1; --sk-border: #99f6e4; --sk-accent: #2dd4bf; --sk-dark: #042f2e; --sk-dark2: #134e4a; --sk-pop: #0d9488; --sk-pop2: #5eead4; }
.cb-sk-embed[data-scheme="cyan"]    { --sk-base: #a5f3fc; --sk-shine: #ecfeff; --sk-bg: #ecfeff; --sk-card-bg: #cffafe; --sk-border: #a5f3fc; --sk-accent: #22d3ee; --sk-dark: #083344; --sk-dark2: #155e75; --sk-pop: #0891b2; --sk-pop2: #67e8f9; }
.cb-sk-embed[data-scheme="indigo"]  { --sk-base: #c7d2fe; --sk-shine: #eef2ff; --sk-bg: #eef2ff; --sk-card-bg: #e0e7ff; --sk-border: #c7d2fe; --sk-accent: #818cf8; --sk-dark: #1e1b4b; --sk-dark2: #312e81; --sk-pop: #4f46e5; --sk-pop2: #a5b4fc; }
.cb-sk-embed[data-scheme="fuchsia"] { --sk-base: #f5d0fe; --sk-shine: #fdf4ff; --sk-bg: #fdf4ff; --sk-card-bg: #fae8ff; --sk-border: #f5d0fe; --sk-accent: #d946ef; --sk-dark: #4a044e; --sk-dark2: #701a75; --sk-pop: #c026d3; --sk-pop2: #e879f9; }
.cb-sk-embed[data-scheme="pink"]    { --sk-base: #fbcfe8; --sk-shine: #fdf2f8; --sk-bg: #fdf2f8; --sk-card-bg: #fce7f3; --sk-border: #fbcfe8; --sk-accent: #f472b6; --sk-dark: #500724; --sk-dark2: #831843; --sk-pop: #db2777; --sk-pop2: #f9a8d4; }
.cb-sk-embed[data-scheme="lime"]    { --sk-base: #d9f99d; --sk-shine: #f7fee7; --sk-bg: #f7fee7; --sk-card-bg: #ecfccb; --sk-border: #d9f99d; --sk-accent: #a3e635; --sk-dark: #1a2e05; --sk-dark2: #365314; --sk-pop: #65a30d; --sk-pop2: #bef264; }
.cb-sk-embed[data-scheme="stone"]   { --sk-base: #d6d3d1; --sk-shine: #f5f5f4; --sk-bg: #fafaf9; --sk-card-bg: #f5f5f4; --sk-border: #d6d3d1; --sk-accent: #a8a29e; --sk-dark: #1c1917; --sk-dark2: #292524; --sk-pop: #78716c; --sk-pop2: #a8a29e; }
.cb-sk-embed[data-scheme="zinc"]    { --sk-base: #d4d4d8; --sk-shine: #f4f4f5; --sk-bg: #fafafa; --sk-card-bg: #f4f4f5; --sk-border: #d4d4d8; --sk-accent: #a1a1aa; --sk-dark: #18181b; --sk-dark2: #27272a; --sk-pop: #71717a; --sk-pop2: #a1a1aa; }
.cb-sk-embed[data-scheme="orange"]  { --sk-base: #fed7aa; --sk-shine: #fff7ed; --sk-bg: #fff7ed; --sk-card-bg: #ffedd5; --sk-border: #fed7aa; --sk-accent: #fb923c; --sk-dark: #431407; --sk-dark2: #7c2d12; --sk-pop: #ea580c; --sk-pop2: #fdba74; }
.cb-sk-embed[data-scheme="sky"]     { --sk-base: #bae6fd; --sk-shine: #f0f9ff; --sk-bg: #f0f9ff; --sk-card-bg: #e0f2fe; --sk-border: #bae6fd; --sk-accent: #38bdf8; --sk-dark: #0c4a6e; --sk-dark2: #075985; --sk-pop: #0284c7; --sk-pop2: #7dd3fc; }

.cb-sk-embed svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Shimmer Animation ───────────────────────────────────── */

@keyframes cb-sk-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

@keyframes cb-sk-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* SVG fill classes */
.sk-el      { fill: var(--sk-base);    animation: cb-sk-pulse 1.8s ease-in-out infinite; }
.sk-el-s2   { fill: var(--sk-base);    animation: cb-sk-pulse 1.8s ease-in-out 0.2s infinite; }
.sk-el-s3   { fill: var(--sk-base);    animation: cb-sk-pulse 1.8s ease-in-out 0.4s infinite; }
.sk-el-s4   { fill: var(--sk-base);    animation: cb-sk-pulse 1.8s ease-in-out 0.6s infinite; }
.sk-el-bg   { fill: var(--sk-bg);      }
.sk-el-card { fill: var(--sk-card-bg); }
.sk-el-border { fill: var(--sk-border); }
.sk-el-dark { fill: var(--sk-dark);    }
.sk-el-dark2{ fill: var(--sk-dark2);   }
.sk-el-pop  { fill: var(--sk-pop);     }
.sk-el-pop2 { fill: var(--sk-pop2);    opacity: 0.6; }
.sk-el-shine { fill: var(--sk-shine);  }

/* ── Block Layout ─────────────────────────────────────────── */

.cb-sklib {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 48px 0;
}

.cb-sklib__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Toolbar ─────────────────────────────────────────────── */

.cb-sklib__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}

.cb-sklib__heading {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
  margin: 0 0 20px;
  line-height: 1.2;
}

.cb-sklib__search-wrap {
  position: relative;
  flex: 1 1 240px;
  max-width: 360px;
}

.cb-sklib__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #9ca3af;
  pointer-events: none;
}

.cb-sklib__search {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: #111827;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.cb-sklib__search:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

/* Category tabs */
.cb-sklib__tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.cb-sklib__tab {
  padding: 7px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}

.cb-sklib__tab:hover {
  border-color: #6366f1;
  color: #6366f1;
}

.cb-sklib__tab.is-active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.cb-sklib__count {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 4px;
  background: rgba(0,0,0,0.12);
  border-radius: 9999px;
  padding: 1px 6px;
}

/* Color scheme switcher */
.cb-sklib__schemes {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

.cb-sklib__scheme-label {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

.cb-sklib__swatch {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  outline: none;
}

.cb-sklib__swatch:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12);
}

.cb-sklib__swatch.is-active {
  border-color: #111827;
  transform: scale(1.15);
}

.cb-sklib__swatch[data-scheme="gray"]    { background: #e5e7eb; }
.cb-sklib__swatch[data-scheme="slate"]   { background: #94a3b8; }
.cb-sklib__swatch[data-scheme="dark"]    { background: #374151; }
.cb-sklib__swatch[data-scheme="navy"]    { background: #1e3a5f; }
.cb-sklib__swatch[data-scheme="warm"]    { background: #d4a574; }
.cb-sklib__swatch[data-scheme="blue"]    { background: #60a5fa; }
.cb-sklib__swatch[data-scheme="violet"]  { background: #a78bfa; }
.cb-sklib__swatch[data-scheme="emerald"] { background: #34d399; }
.cb-sklib__swatch[data-scheme="rose"]    { background: #fb7185; }
.cb-sklib__swatch[data-scheme="amber"]   { background: #fbbf24; }
.cb-sklib__swatch[data-scheme="teal"]    { background: #2dd4bf; }
.cb-sklib__swatch[data-scheme="cyan"]    { background: #22d3ee; }
.cb-sklib__swatch[data-scheme="indigo"]  { background: #818cf8; }
.cb-sklib__swatch[data-scheme="fuchsia"] { background: #d946ef; }
.cb-sklib__swatch[data-scheme="pink"]    { background: #f472b6; }
.cb-sklib__swatch[data-scheme="lime"]    { background: #a3e635; }
.cb-sklib__swatch[data-scheme="stone"]   { background: #a8a29e; }
.cb-sklib__swatch[data-scheme="zinc"]    { background: #a1a1aa; }
.cb-sklib__swatch[data-scheme="orange"]  { background: #fb923c; }
.cb-sklib__swatch[data-scheme="sky"]     { background: #38bdf8; }

/* ── Grid ────────────────────────────────────────────────── */

.cb-sklib__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ── Card ────────────────────────────────────────────────── */

.cb-sklib__card {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
}

.cb-sklib__card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
  border-color: #6366f1;
}

.cb-sklib__card.is-selected {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

.cb-sklib__card-preview {
  width: 100%;
  aspect-ratio: 8/5;
  overflow: hidden;
  background: var(--sk-bg, #fff);
  display: flex;
  align-items: stretch;
}

.cb-sklib__card-preview svg {
  width: 100%;
  height: 100%;
}

.cb-sklib__card-info {
  padding: 12px 14px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.cb-sklib__card-label {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.cb-sklib__card-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.cb-sklib__card-cat {
  font-size: 11px;
  font-weight: 500;
  color: #6366f1;
  background: #eef2ff;
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cb-sklib__card-cat--marketing {
  color: #059669;
  background: #ecfdf5;
}

.cb-sklib__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.cb-sklib__card-tag {
  font-size: 10px;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 4px;
  padding: 2px 5px;
}

/* ── Empty state ─────────────────────────────────────────── */

.cb-sklib__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: #9ca3af;
  font-size: 15px;
}

.cb-sklib__empty svg {
  display: block;
  margin: 0 auto 12px;
  opacity: 0.4;
}

/* ── Card hidden state ───────────────────────────────────── */

.cb-sklib__card[aria-hidden="true"] {
  display: none;
}