:root {
  --bg: #0f172a;
  --panel: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #22c55e;
  --accent-2: #f59e0b;
  --accent-3: #3b82f6;
  --danger: #ef4444;
  --card: #1f2937;
  --border: #374151;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; }

.site-header { padding: 2rem 1rem; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)); }
.site-header h1 { margin: 0; font-size: 2rem; }
.site-header p { margin-top: .5rem; color: var(--muted); }

.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }

.filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem;
}
.filter-group label { display: block; margin-bottom: .25rem; color: var(--muted); }
.filter-group select, .filter-group input {
  width: 100%; padding: .6rem .75rem; border-radius: .5rem; border: 1px solid var(--border);
  background: var(--card); color: var(--text);
}

.card-grid { 
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; 
  margin-top: 1rem;
  justify-content: center;
}

/* Responsive card grid with center alignment for incomplete rows */
@media (max-width: 1200px) {
  .card-grid { 
    /* Stays as flexbox with center alignment */
  }
}

@media (max-width: 900px) {
  .card-grid { 
    /* Stays as flexbox with center alignment */
  }
}

@media (max-width: 600px) {
  .card-grid { 
    /* Stays as flexbox with center alignment */
  }
}
.card {
  flex: 0 0 calc(20% - 0.8rem); /* 5 cards per row on large screens */
  max-width: calc(20% - 0.8rem);
  background: var(--card); border: 1px solid var(--border); border-radius: .75rem;
  padding: .75rem; display: flex; flex-direction: column; gap: .5rem; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
}

@media (max-width: 1200px) {
  .card {
    flex: 0 0 calc(25% - 0.75rem); /* 4 cards per row */
    max-width: calc(25% - 0.75rem);
  }
}

@media (max-width: 900px) {
  .card {
    flex: 0 0 calc(33.333% - 0.667rem); /* 3 cards per row */
    max-width: calc(33.333% - 0.667rem);
  }
}

@media (max-width: 600px) {
  .card {
    flex: 0 0 calc(50% - 0.5rem); /* 2 cards per row */
    max-width: calc(50% - 0.5rem);
  }
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.35); border-color: #4b5563; }
.card img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: .5rem; background: rgba(255,255,255,.03); }
.card .title { font-weight: 600; font-size: 1.05rem; }
.card .role { font-size: .9rem; color: var(--muted); }

.badge { display: inline-block; padding: .1rem .5rem; border-radius: .5rem; font-size: .75rem; border: 1px solid var(--border); }
.badge.producer { color: #22c55e; border-color: #22c55e33; }
.badge.consumer { color: #f59e0b; border-color: #f59e0b33; }
.badge.decomposer { color: #3b82f6; border-color: #3b82f633; }

.button {
  padding: .5rem .75rem; border-radius: .5rem; border: 1px solid var(--border);
  background: #0b1324; color: var(--text); cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.button.primary { background: #0d1b34; border-color: #2f3f5e; }
.button:hover { background: #0f203e; border-color: #3c4f72; }
.button.danger { background: #3c1515; border-color: #6b1a1a; }
.button.danger:hover { background: #571b1b; }

.detail-panel {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 1rem;
}
.detail-panel .panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: .75rem; max-width: 720px; width: 100%;
  padding: 1rem; display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; position: relative;
}
.detail-panel.hidden { display: none; }
.close-btn {
  position: absolute; top: -0.5rem; right: -0.5rem; 
  width: 2.5rem; height: 2.5rem; 
  background: var(--danger); 
  color: white;
  border: 2px solid var(--panel); 
  border-radius: 50%; 
  font-size: 1.25rem; 
  font-weight: bold;
  line-height: 1; 
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 10;
}
.close-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
}

.site-footer { padding: 2rem 1rem; text-align: center; color: var(--muted); }