.inventory-entry-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.inventory-entry-button:hover {
  background: #e7e8ea;
}

.inventory-modal {
  width: min(520px, calc(100vw - 32px));
}

.inventory-panel {
  gap: 16px;
}

.inventory-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inventory-tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.inventory-tab:hover,
.inventory-tab.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.inventory-tab span {
  opacity: 0.78;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ececee;
}

.inventory-slot {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid #bbbfc6;
  border-radius: 6px;
  background: #f8f8f9;
}

.inventory-slot-empty {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.inventory-item-slot {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 2px 0 rgba(35, 36, 40, 0.12);
}

.inventory-item-slot:hover {
  transform: translateY(-1px);
}

.inventory-item-icon {
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
}

.inventory-pixel-icon {
  width: 30px;
  height: 30px;
}

.inventory-item-quantity {
  position: absolute;
  right: 5px;
  bottom: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.rarity-common {
  border-color: #bfc2c7;
  background: linear-gradient(135deg, #ffffff, #e1e3e6);
}

.rarity-rare {
  border-color: #5795d3;
  background: linear-gradient(135deg, #e9f4ff, #c7ddf5);
}

.rarity-legendary {
  border-color: #d4a52d;
  background: linear-gradient(135deg, #fff3c8, #e8c465);
}

.rarity-mythic {
  border-color: #9b641f;
  background: linear-gradient(135deg, #ead3a4, #9b641f);
}

.inventory-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #ffffff;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.inventory-wallet strong {
  color: var(--ink);
  font-size: 20px;
}

.inventory-detail-modal {
  width: min(460px, calc(100vw - 32px));
}

.inventory-detail-panel {
  gap: 14px;
}

.inventory-item-detail {
  display: grid;
  gap: 12px;
}

.inventory-detail-hero {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.inventory-detail-icon {
  width: 80px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(35, 36, 40, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: 30px;
  font-weight: 1000;
}

.inventory-detail-pixel-icon {
  width: 52px;
  height: 52px;
}

.inventory-detail-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.inventory-detail-copy strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 1000;
}

.inventory-detail-copy code {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.inventory-detail-owned,
.inventory-detail-description,
.inventory-detail-meta-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.inventory-detail-owned {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

.inventory-detail-owned span,
.inventory-detail-description span,
.inventory-detail-meta-item span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.inventory-detail-owned strong {
  color: var(--ink);
  font-size: 24px;
  font-weight: 1000;
}

.inventory-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.inventory-detail-meta-item {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
}

.inventory-detail-meta-item strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 1000;
  overflow-wrap: anywhere;
}

.inventory-detail-description {
  display: grid;
  gap: 7px;
  padding: 12px 14px;
}

.inventory-detail-description p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.inventory-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.inventory-detail-actions .primary-action {
  min-width: 132px;
  margin-top: 0;
}

.inventory-detail-actions .primary-action[hidden] {
  display: none;
}

.item-definition-form {
  display: grid;
  gap: 12px;
}

.item-definition-form input[readonly] {
  background: #f4f4f5;
  color: var(--muted);
}

.item-key-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.item-key-field label {
  min-width: 0;
}

.item-key-field button {
  min-height: 44px;
}

.item-key-rename-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.item-food-effect-field[hidden] {
  display: none;
}

.item-form-grid {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1fr 0.8fr;
  gap: 10px;
}

.item-definition-form select {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.item-icon-field {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.item-icon-native-select {
  display: none;
}

.item-icon-select-button {
  min-height: 64px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.item-icon-select-button:hover {
  border-color: var(--brand);
  background: #f7f7f8;
}

.item-icon-selected-preview {
  width: 44px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f4f5;
}

.item-icon-selected-pixel {
  width: 32px;
  height: 32px;
}

.item-icon-selected-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.item-icon-selected-copy strong,
.item-icon-selected-copy code {
  overflow-wrap: anywhere;
}

.item-icon-selected-copy strong {
  font-size: 14px;
}

.item-icon-selected-copy code {
  color: var(--muted);
  font-size: 12px;
}

.item-icon-select-action {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.item-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-editor-actions button[type='submit'] {
  margin-top: 0;
}

.item-icon-library-dialog {
  width: min(1040px, calc(100vw - 32px));
  z-index: var(--z-layer-dialog-1);
}

.item-icon-library-panel {
  width: min(1000px, calc(100vw - 28px));
  min-height: min(760px, calc(100vh - 32px));
}

.item-icon-library-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.item-icon-library-tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.item-icon-library-tab:hover,
.item-icon-library-tab.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.item-icon-library-tab span {
  opacity: 0.78;
}

.item-icon-library-page-info {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.item-icon-library {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.item-icon-library-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #ffffff;
}

.item-icon-library-card.is-system {
  background: #f7f7f8;
}

.item-icon-library-preview {
  width: 64px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f4f5;
}

.item-icon-library-pixel {
  width: 42px;
  height: 42px;
}

.item-icon-library-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(220px, 1.2fr) minmax(96px, auto) auto auto;
  align-items: center;
  gap: 10px;
}

.item-icon-library-copy strong,
.item-icon-library-copy code {
  min-width: 0;
}

.item-icon-library-copy strong {
  color: var(--ink);
  font-size: 14px;
}

.item-icon-library-copy code {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.item-icon-library-badge {
  width: fit-content;
  border: 1px solid #d8dade;
  border-radius: 999px;
  padding: 1px 7px;
  background: #f0f1f3;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.item-icon-library-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.item-icon-library-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.item-catalog-list {
  display: grid;
  gap: 10px;
}

.item-editor-panel {
  grid-column: 1 / -1;
}

.item-catalog-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.item-catalog-icon {
  width: 48px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 1000;
}

.item-catalog-pixel-icon {
  width: 32px;
  height: 32px;
}

.item-catalog-main {
  min-width: 0;
}

.item-catalog-main strong,
.item-catalog-main span {
  display: block;
  overflow-wrap: anywhere;
}

.item-catalog-main strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ink);
  font-size: 15px;
}

.item-catalog-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1px solid #d6c48b;
  border-radius: 999px;
  padding: 0 7px;
  background: #fff7d7;
  color: #80650f;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.item-catalog-badge.is-muted {
  border-color: #d8dade;
  background: #f0f1f3;
  color: var(--muted);
}

.item-catalog-main span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.item-catalog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-catalog-actions .delete-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.item-catalog-row.is-archived {
  opacity: 0.54;
}

@media (max-width: 520px) {
  .inventory-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .inventory-detail-hero,
  .inventory-detail-meta {
    grid-template-columns: 1fr;
  }

  .inventory-detail-icon {
    width: 72px;
  }

  .item-form-grid,
  .item-icon-library-card,
  .item-catalog-row {
    grid-template-columns: 1fr;
  }

  .item-icon-library-copy {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .item-icon-library-actions {
    justify-content: flex-start;
  }

  .item-catalog-icon {
    width: 64px;
  }
}