.space-icon-picker{
  display: block;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid rgba(87, 102, 144, .11);
  border-radius: 17px;
  background: #fbfaff;
}

.space-icon-picker-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

.space-icon-picker-head::-webkit-details-marker{ display: none; }
.space-icon-picker-head::after{ content: "展开选择⌄"; order: 2; color: #756a84; font-size: 11px; font-weight: 850; white-space: nowrap; }
.space-icon-picker[open] .space-icon-picker-head::after{ content: "收起⌃"; }
.space-icon-picker-body{ display: grid; gap: 11px; margin-top: 14px; padding-top: 13px; border-top: 1px dashed rgba(87, 102, 144, .13); }

.space-icon-picker-head > div:first-child{ display: grid; gap: 3px; }
.space-icon-picker-head strong{ color: #544e60; font-size: 13px; }
.space-icon-picker-head span{ color: #948c9a; font-size: 11px; }
.space-icon-preview{ display: grid; width: 54px; height: 54px; flex: none; place-items: center; overflow: hidden; border: 1px solid rgba(143,122,234,.18); border-radius: 16px; color: #fff; background: linear-gradient(135deg,#e799b0,#8f7aea); font-size: 23px; font-weight: 900; }
.space-icon-preview img{ width: 100%; height: 100%; padding: 3px; object-fit: contain; background: #fff; }
.space-icon-sticker-grid{ max-height: min(380px, 48vh); overflow-y: auto; }
.space-icon-clear{ justify-self: start; }


/* Give every photo sticker its own fixed row; max-height must scroll, not compress the grid tracks. */
.avatar-sticker-grid{
  grid-template-columns: repeat(6, minmax(84px, 1fr));
  grid-auto-rows: 96px;
  gap: 12px;
}
.avatar-sticker-grid .sticker-item{ width: 100%; height: 96px; min-height: 96px; aspect-ratio: auto; }


@media (max-width: 620px){


  .avatar-sticker-grid{ grid-template-columns: repeat(3, minmax(78px, 1fr)); grid-auto-rows: 92px; gap: 10px; }
  .avatar-sticker-grid .sticker-item{ height: 92px; min-height: 92px; }

}


/* Sticker files use a white canvas; keep that canvas consistent everywhere. */
.sticker-item,
.sticker-item:hover,
.sticker-item.is-selected,
.space-icon-preview:has(img){
  background: #fff;
}

.sticker-item:hover{ border-color: rgba(231, 153, 176, .38); }
.sticker-item.is-selected{ border-color: var(--coral); box-shadow: inset 0 0 0 1px rgba(231, 153, 176, .16); }


/* The cover chart begins a little earlier, without moving the character stickers. */


.joke-editor-file-note{
  margin: -7px 0 18px;
  padding: 10px 12px;
  border: 1px solid rgba(143, 122, 234, 0.2);
  border-radius: 12px;
  color: #665d86;
  background: linear-gradient(135deg, #f7f4ff, #fcfaff);
  font-size: 13px;
  line-height: 1.65;
}
.joke-editor-file-note strong{ color: #594b92; font-weight: 900; }


#addWeekButton{
  color: #5f508d;
  border-color: rgba(143, 122, 234, 0.3);
  background: linear-gradient(135deg, #f2eeff, #e9e2ff);
}
#addWeekButton:hover:not(:disabled){
  color: #51427f;
  border-color: rgba(143, 122, 234, 0.45);
  background: #e7ddff;
}
#importWeekButton{
  color: #4e7d76;
  border-color: rgba(85, 165, 143, 0.26);
  background: #eff9f6;
}
#importWeekButton:hover:not(:disabled){
  color: #356d62;
  border-color: rgba(85, 165, 143, 0.42);
  background: #e4f5ef;
}
#exportSelectedWeekButton{
  color: #536188;
  border-color: rgba(87, 102, 144, 0.24);
  background: #f2f4fa;
}
#exportSelectedWeekButton:hover:not(:disabled){
  color: #445176;
  border-color: rgba(87, 102, 144, 0.42);
  background: #e8edf7;
}


#showSelectedWeekReportButton{
  color: #665d99;
  border-color: rgba(143, 122, 234, 0.22);
  background: #f5f2ff;
}
#showSelectedWeekReportButton:hover:not(:disabled){
  color: #564b8c;
  border-color: rgba(143, 122, 234, 0.36);
  background: #eee9ff;
}


footer{
  gap: 10px 16px;
}

footer span:last-child{
  color: #847b8c;
}