.sticker-collection {
  margin: 20px 0;
  padding: 19px 22px 17px;
  min-width: 0;
}
.sticker-collection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.sticker-collection-heading { display: flex; align-items: center; gap: 10px; }
.sticker-collection-heading h2 { margin: 0; font-size: 16px; }
.sticker-collection-count {
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--green-soft, #eaf0e9);
  color: #728368;
  font-size: 10px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sticker-collection-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.sticker-collection-action {
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #dce4d5;
  border-radius: 8px;
  background: #fff;
  color: var(--green, #294c3b);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
}
.sticker-collection-action:hover:not(:disabled) { background: #f1f6ec; border-color: #bfcfb6; }
.sticker-collection-add { background: var(--green, #294c3b); border-color: var(--green, #294c3b); color: #fff; }
.sticker-collection-add:hover:not(:disabled) { background: #1e3f2e; border-color: #1e3f2e; }
.sticker-collection-delete { color: #947263; }
.sticker-collection-clear-all { color: #9f4845; border-color: #e4c8c3; }
.sticker-collection-help {
  margin: 10px 0 13px;
  color: #839077;
  font-size: 11px;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.sticker-collection-list {
  position: relative;
  display: flex;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #ccd7c4 transparent;
  list-style: none;
  padding: 4px 3px 8px;
  margin: 0;
}
.sticker-collection-item { flex: 0 0 132px; min-width: 0; }
.sticker-collection-card {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 80px;
  padding: 8px;
  border: 1px solid #e2e7dc;
  border-radius: 10px;
  color: var(--ink, #24382f);
  background: #fff;
  text-align: left;
}
.sticker-collection-card:hover:not(:disabled) { background: #f7f9f3; border-color: #b6c8aa; }
.sticker-collection-card.selected {
  border-color: #78976b;
  background: #eef4e8;
  box-shadow: 0 0 0 1px #78976b;
}
.sticker-collection-picture {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 58px;
  overflow: hidden;
  border: 1px solid #e5e9df;
  border-radius: 5px;
  background: #fff;
}
.sticker-collection-picture img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.transparent-material .sticker-collection-picture {
  background-color: #fff;
  background-image: linear-gradient(45deg,#e8ece4 25%,transparent 25%),linear-gradient(-45deg,#e8ece4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8ece4 75%),linear-gradient(-45deg,transparent 75%,#e8ece4 75%);
  background-size: 8px 8px;
  background-position: 0 0,0 4px,4px -4px,-4px 0;
}
.sticker-collection-sequence {
  position: absolute;
  left: 2px;
  bottom: 2px;
  min-width: 19px;
  padding: 1px 3px;
  border-radius: 3px;
  color: #fff;
  background: #405e4bdf;
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.sticker-collection-details { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sticker-collection-number { color: #798970; font-size: 9px; font-weight: 650; font-variant-numeric: tabular-nums; }
.sticker-collection-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 650; }
.sticker-collection-card:focus-visible,.sticker-collection-action:focus-visible { outline: 3px solid #d3a278; outline-offset: 3px; }
.sticker-collection button:disabled { opacity: .4; cursor: default; }
@media (max-width: 760px) {
  .sticker-collection { margin: 16px 0; padding: 17px 16px 13px; }
  .sticker-collection-header { gap: 10px; }
  .sticker-collection-heading h2 { font-size: 16px; }
  .sticker-collection-actions { width: 100%; gap: 6px; }
  .sticker-collection-action { flex: 1 1 auto; padding: 9px 10px; font-size: 11px; }
  .sticker-collection-help { font-size: 11px; margin: 9px 0 10px; }
  .sticker-collection-item { flex-basis: 142px; }
  .sticker-collection-card { min-height: 84px; }
  .sticker-collection-name { font-size: 12px; }
}
@media (max-width: 374px) {
  .sticker-collection { padding-left: 12px; padding-right: 12px; }
  .sticker-collection-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticker-collection-add { grid-column: auto; }
  .sticker-collection-action { min-width: 0; }
}