.wxcy-dot {
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background: var(--dot);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.28);
}

.wxcy-color-list {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.wxcy-color-row {
  display: grid;
  grid-template-columns: 42px 104px minmax(0, 1fr) 8px;
  gap: 6px;
  align-items: center;
  min-height: 58px;
  padding: 7px 8px 7px 11px;
  border: 1px solid rgba(24, 40, 31, 0.07);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 17px rgba(30, 42, 35, 0.045);
  text-align: left;
}

.wxcy-color-row::after,
.wxcy-pro-row::after {
  color: #9a9a9a;
  content: "›";
  font-size: 25px;
  font-weight: 300;
}

.wxcy-color-row strong,
.wxcy-pro-row strong {
  display: grid;
  gap: 1px;
  color: #0c8842;
  font-size: 16px;
  font-weight: 900;
}

.wxcy-color-row:nth-child(3) strong {
  color: #f18b00;
}

.wxcy-color-row:nth-child(4) strong {
  color: #858585;
}

.wxcy-color-row.is-danger strong,
.wxcy-pro-row.is-warn strong {
  color: #ef1e20;
}

.wxcy-color-row small,
.wxcy-pro-row small {
  color: #111;
  font-size: 13px;
  font-weight: 800;
}

.wxcy-color-row span,
.wxcy-pro-row span {
  display: flex;
  gap: 6px;
  align-items: center;
}

.wxcy-color-row em,
.wxcy-pro-row em {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: #666;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.08;
}

.wxcy-color-row em b,
.wxcy-pro-row em b {
  overflow: hidden;
  color: #111;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wxcy-archive,
.wxcy-pro-list,
.wxcy-scenes,
.wxcy-outfits {
  margin-top: 6px;
}

.wxcy-archive {
  padding: 6px 9px;
}

.wxcy-archive header,
.wxcy-outfits header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.wxcy-archive h2,
.wxcy-outfits h2 {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: #111;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 900;
}

.wxcy-archive h2 svg {
  color: #0c8842;
}

.wxcy-archive h2 span {
  padding: 2px 8px;
  border-radius: 4px;
  background: #f5e8d8;
  color: #a26524;
  font-size: 14px;
}

.wxcy-archive header button,
.wxcy-outfits header button {
  color: #5f6161;
  font-size: 16px;
  font-weight: 500;
}

.wxcy-archive-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 6px;
}

.wxcy-archive-grid p {
  margin: 0;
  min-height: 29px;
  padding: 5px 6px;
  border: 1px solid rgba(18, 127, 68, 0.1);
  border-radius: 6px;
  color: #222;
  font-size: 14px;
  font-weight: 500;
}

.wxcy-archive-grid p:last-child {
  border-color: rgba(205, 153, 85, 0.22);
}

.wxcy-archive-grid b {
  color: #0c8842;
  font-size: 18px;
  font-weight: 900;
}

.wxcy-archive-grid i {
  display: inline-block;
  width: 1px;
  height: 20px;
  margin: 0 9px;
  background: #e2e4e2;
  vertical-align: middle;
}

.wxcy-archive-grid small {
  display: block;
  margin-top: 2px;
  color: #686d6a;
  font-size: 12.5px;
}

.wxcy-pro-list {
  overflow: hidden;
}

.wxcy-pro-row {
  display: grid;
  grid-template-columns: 68px 104px minmax(0, 1fr) 8px;
  gap: 6px;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 7px 8px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.07);
  text-align: left;
}

.wxcy-pro-row:last-child {
  border-bottom: 0;
}

.wxcy-pro-row strong {
  color: #0c8842;
  font-size: 14.5px;
}

.wxcy-pro-row strong svg {
  width: 16px;
  height: 16px;
}

.wxcy-pro-row small {
  color: #656565;
  font-size: 13px;
}

.wxcy-pro-row em {
  gap: 1px;
  font-size: 13px;
  line-height: 1.16;
}

.wxcy-pro-row em b {
  overflow: visible;
  font-size: 14px;
  white-space: normal;
  text-overflow: clip;
}

.wxcy-scenes {
  display: grid;
  grid-template-columns: 1fr repeat(3, 0.9fr);
  gap: 6px;
  align-items: center;
  padding: 4px 8px;
  color: #0c8842;
}

.wxcy-scenes strong,
.wxcy-scenes span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 900;
}

.wxcy-scenes strong {
  justify-content: flex-start;
  color: #111;
}

.wxcy-scenes span {
  background: #f1f7f1;
}

@media (max-width: 390px) {
  .wxcy-color-row { grid-template-columns: 52px 96px 1fr 12px; }
  .wxcy-pro-row { grid-template-columns: 78px 96px 1fr 12px; }
  .wxcy-scenes { grid-template-columns: 1fr 1fr; }
}

@media (max-height: 720px) {
  .wxcy-archive { padding: 4px 7px; }
  .wxcy-archive header { margin-bottom: 3px; }
  .wxcy-archive-grid p { min-height: 22px; padding: 3px 5px; font-size: 13px; }
  .wxcy-pro-row { grid-template-columns: 68px 104px minmax(0, 1fr) 8px; min-height: 54px; padding: 7px 8px; }
  .wxcy-scenes { padding: 3px 7px; }
  .wxcy-scenes strong,
  .wxcy-scenes span { min-height: 20px; font-size: 13.5px; }
}