:root {
  --type-paramecia: #7c3aed;
  --type-logia: #0d9488;
  --type-zoan: var(--success);
  --type-zoan-mythical: var(--warning);
  --type-zoan-ancient: var(--destructive);
}

:root[data-theme="dark"] {
  --type-paramecia: #a78bfa;
  --type-logia: #2dd4bf;
}

#fruitSearchInput[data-astro-cid-piszvy45] {
  width: 100%;
  font-size: .95rem;
}

.fruit-filters[data-astro-cid-piszvy45] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fruit-filter-btn[data-astro-cid-piszvy45] {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--text);
  font-size: .8rem;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}

.fruit-filter-btn[data-astro-cid-piszvy45]:hover {
  border-color: var(--primary);
}

.fruit-filter-btn[data-astro-cid-piszvy45].active {
  background: var(--accent-bg);
  border-color: var(--primary);
  color: var(--primary);
}

.fruit-filter-btn[data-astro-cid-piszvy45].active[data-type="paramecia"] {
  background: var(--type-paramecia);
  border-color: var(--type-paramecia);
}

.fruit-filter-btn[data-astro-cid-piszvy45].active[data-type="logia"] {
  background: var(--type-logia);
  border-color: var(--type-logia);
}

.fruit-filter-btn[data-astro-cid-piszvy45].active[data-type="zoan"] {
  background: var(--type-zoan);
  border-color: var(--type-zoan);
}

.fruit-filter-btn[data-astro-cid-piszvy45].active[data-type="zoan-mythical"] {
  background: var(--type-zoan-mythical);
  border-color: var(--type-zoan-mythical);
}

.fruit-filter-btn[data-astro-cid-piszvy45].active[data-type="zoan-ancient"] {
  background: var(--type-zoan-ancient);
  border-color: var(--type-zoan-ancient);
}

.fruit-status[data-astro-cid-piszvy45] {
  color: var(--subtext);
  font-size: .85rem;
  min-height: 1.2em;
}

.fruit-grid[data-astro-cid-piszvy45] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.fruit-card[data-astro-cid-piszvy45] {
  border-radius: var(--radius-2xl);
  padding: 14px 16px;
  background: var(--secondary);
}

.fruit-card[data-astro-cid-piszvy45].hidden-card {
  display: none;
}

.fruit-card-head[data-astro-cid-piszvy45] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.fruit-name[data-astro-cid-piszvy45] {
  font-size: .98rem;
  font-weight: 700;
}

.fruit-type-badge[data-astro-cid-piszvy45] {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--accent-bg);
  color: var(--primary);
  white-space: nowrap;
}

.fruit-type-badge[data-astro-cid-piszvy45][data-type="paramecia"] {
  background: color-mix(in oklab, var(--type-paramecia) 18%, var(--card-bg));
  color: var(--type-paramecia);
}

.fruit-type-badge[data-astro-cid-piszvy45][data-type="logia"] {
  background: color-mix(in oklab, var(--type-logia) 18%, var(--card-bg));
  color: var(--type-logia);
}

.fruit-type-badge[data-astro-cid-piszvy45][data-type="zoan"] {
  background: color-mix(in oklab, var(--type-zoan) 18%, var(--card-bg));
  color: var(--type-zoan);
}

.fruit-type-badge[data-astro-cid-piszvy45][data-type="zoan-mythical"] {
  background: color-mix(in oklab, var(--type-zoan-mythical) 18%, var(--card-bg));
  color: var(--type-zoan-mythical);
}

.fruit-type-badge[data-astro-cid-piszvy45][data-type="zoan-ancient"] {
  background: color-mix(in oklab, var(--type-zoan-ancient) 18%, var(--card-bg));
  color: var(--type-zoan-ancient);
}

.fruit-ability[data-astro-cid-piszvy45] {
  margin-top: 6px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text);
}

.fruit-holder[data-astro-cid-piszvy45] {
  margin-top: 8px;
  font-size: .8rem;
  color: var(--subtext);
}

.fruit-holder[data-astro-cid-piszvy45] strong[data-astro-cid-piszvy45] {
  color: var(--text);
  font-weight: 600;
}

.no-results-msg[data-astro-cid-piszvy45] {
  text-align: center;
  color: var(--subtext);
  padding: 30px 10px;
  grid-column: 1 / -1;
}

.no-results-msg[data-astro-cid-piszvy45].hidden-card {
  display: none;
}
