*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #1a1210; color: #fff;
}
.inv-top {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(20,12,14,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,182,217,0.35);
}
.inv-top h1 {
  margin: 0; font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.back { color: #99f6e4; text-decoration: none; font-weight: 700; }
.inv-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem; padding: 0.75rem;
}
@media (min-width: 720px) {
  .inv-grid { grid-template-columns: repeat(3, 1fr); gap: 0.85rem; padding: 1rem; }
}
.inv-card {
  position: relative; display: block; text-decoration: none; color: #fff;
  border-radius: 12px; overflow: hidden;
  border: 2px solid rgba(255,143,196,0.55);
  box-shadow: 0 0 0 1px rgba(45,212,191,0.35), 0 8px 20px rgba(0,0,0,0.35);
  background: #2a1a18;
}
.inv-card img {
  display: block; width: 100%; height: 42vw; max-height: 280px; object-fit: cover;
}
.inv-card-badge {
  position: absolute; top: 0.45rem; left: 0.45rem; z-index: 1;
  padding: 0.2rem 0.45rem; border-radius: 6px;
  font-size: 0.7rem; font-weight: 900; letter-spacing: 0.06em;
  background: #c1121f;
}
.inv-card-meta {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.55rem 0.6rem 0.7rem;
  background: rgba(0,0,0,0.45);
  font-size: 0.82rem;
}
.inv-card-meta strong { font-size: 0.88rem; }