.feature-strip {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 30px clamp(18px, 3vw, 34px) 12px;
}

.feature-strip[hidden] { display: none; }
.latest-strip { padding-top: 24px; }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.featured-grid .skill-card {
  min-height: 360px;
  background: #292929;
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}

.featured-grid .skill-card:hover {
  background: #313131;
  border-color: rgba(183,0,0,.5);
}

.skill-card {
  grid-template-rows: auto 4.9em auto auto;
  background: #202020;
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}

.skill-card:hover {
  background: #282828;
  border-color: rgba(183,0,0,.48);
  box-shadow: 0 18px 42px rgba(0,0,0,.25);
}

.skill-card.featured::before {
  background: #f1efea;
  color: #241719;
}

.skill-card.featured .skill-top { margin-top: 22px; }

.skill-top { grid-template-columns: 64px minmax(0, 1fr) 38px; gap: 14px; }
.icon { width: 64px; height: 64px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 10px 24px rgba(0,0,0,.22); }
.card-open { width: 38px; height: 38px; }

.card-favorite {
  appearance: none;
  cursor: pointer;
  color: rgba(255,255,255,.74);
  font-size: 20px;
}

.card-favorite:hover,
.card-favorite:focus-visible,
.card-favorite.is-favorite {
  color: #fff;
  background: #9f2026;
  border-color: #c5484e;
  transform: scale(1.05);
}

.card-favorite:disabled { cursor: wait; opacity: .55; }

.filters {
  gap: clamp(18px, 2.5vw, 36px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.filter {
  min-height: 46px;
  padding: 0 0 12px;
  border-radius: 0;
  color: rgba(255,255,255,.52);
  font-weight: 650;
}

.filter:hover { color: #fff; }
.filter.active { color: #fff; background: transparent; box-shadow: inset 0 -3px #b70000; }

.skill-summary-box.is-truncated::after { display: none; }

.skill-card-footer {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  gap: 7px;
  min-height: 34px;
  align-items: center;
  padding-top: 8px;
}

.skill-category-glyph {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.skill-card-engagement {
  min-width: 0;
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
  justify-content: flex-start;
}

.skill-card-engagement .card-metric {
  min-height: 28px;
  padding: 4px 5px;
}

.skill-version { font-size: 9px; }
.skill-security {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.skill-card.owner-private { border-color: rgba(183,0,0,.48); }
.private-status,
.private-scope { color: #e17a7e; }

html[data-theme="light"] .featured-grid .skill-card,
html[data-theme="light"] .skill-card {
  background: #fff;
  border-color: rgba(48,36,37,.13);
  box-shadow: 0 7px 22px rgba(72,43,46,.07);
}

html[data-theme="light"] .featured-grid .skill-card:hover,
html[data-theme="light"] .skill-card:hover {
  background: #f7f3f2;
  border-color: rgba(159,32,38,.38);
  box-shadow: 0 14px 34px rgba(91,42,46,.12);
}

html[data-theme="light"] .skill-card.featured::before { background: #9f2026; color: #fff; }
html[data-theme="light"] .filters { border-bottom-color: rgba(48,36,37,.15); }
html[data-theme="light"] .filters .filter,
html[data-theme="light"] .filters .filter:not(.active) {
  background: transparent !important;
  border: 0 !important;
  color: #746668 !important;
}
html[data-theme="light"] .filters .filter:hover,
html[data-theme="light"] .filters .filter.active {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  color: #541b1f !important;
}
html[data-theme="light"] .filters .filter.active { box-shadow: inset 0 -3px #9f2026 !important; }
html[data-theme="light"] .card-favorite {
  color: #8f252b !important;
  background: #fff !important;
  border-color: rgba(143,37,43,.32) !important;
  box-shadow: 0 4px 12px rgba(91,42,46,.08) !important;
}
html[data-theme="light"] .card-favorite:hover,
html[data-theme="light"] .card-favorite:focus-visible,
html[data-theme="light"] .card-favorite.is-favorite {
  color: #fff !important;
  background: #9f2026 !important;
  border-color: #9f2026 !important;
  box-shadow: 0 5px 14px rgba(143,37,43,.22) !important;
}
html[data-theme="light"] .skill-stats { border-color: rgba(48,36,37,.1); }
html[data-theme="light"] .skill-stats b { color: #4b3e40; }
html[data-theme="light"] :where(.skill-locator, .skill-stats i, .hero-meta strong) { color: #9f2026 !important; }
html[data-theme="light"] .skill-category-glyph { border-color: rgba(48,36,37,.16); color: #5f5556; }

@media (max-width: 1100px) {
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .feature-strip { padding-top: 22px; }
  .featured-grid { grid-template-columns: 1fr; }
  .featured-grid .skill-card,
  .skill-card { min-height: 0; }
  .skill-top { grid-template-columns: 52px minmax(0, 1fr) 38px; }
  .icon { width: 52px; height: 52px; }
  .filters { gap: 20px; }
}