/* 黑洞交易所 — 票据 / 账本风（系统字体） */

:root {
  --mk-bg: #ffffff;
  --mk-soft: #f7f8fa;
  --mk-line: rgba(17, 17, 17, 0.12);
  --mk-line-strong: rgba(17, 17, 17, 0.22);
  --mk-text: #111111;
  --mk-muted: rgba(17, 17, 17, 0.55);
  --mk-gold: #b8860b;
  --mk-accent: #111111;
  --mk-danger: #b42318;
  --mk-ok: #2f6b45;
  --mk-font: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --mk-display: 'Songti SC', 'STSong', 'SimSun', 'PingFang SC', serif;
  --mk-ticket: #f7f2e8;
}

.mk-page {
  min-height: 70vh;
  background: #ffffff;
  color: var(--mk-text);
  font-family: var(--mk-font);
}

.mk-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 12px 40px;
}

.mk-hero {
  position: relative;
  margin-bottom: 12px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 6px;
  background-color: var(--mk-ticket);
  background-image:
    radial-gradient(rgba(26, 23, 20, 0.04) 0.5px, transparent 0.7px),
    linear-gradient(165deg, #fffef9 0%, var(--mk-ticket) 55%, #ebe2d2 100%);
  background-size: 4px 4px, auto;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    3px 3px 0 rgba(17, 17, 17, 0.07);
}

.mk-hero::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background:
    repeating-linear-gradient(
      180deg,
      var(--mk-gold) 0 3px,
      color-mix(in srgb, var(--mk-gold) 55%, #111) 3px 4px
    );
}

.mk-hero::after {
  content: '';
  position: absolute;
  right: -8px;
  top: -8px;
  width: 36px;
  height: 36px;
  background:
    linear-gradient(135deg, transparent 48%, rgba(17, 17, 17, 0.08) 49%, rgba(17, 17, 17, 0.08) 51%, transparent 52%);
  pointer-events: none;
}

.mk-hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.mk-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: none;
  color: color-mix(in srgb, var(--mk-gold) 72%, #111);
  margin: 0;
  padding: 3px 7px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--mk-ticket) 65%, #fff);
  border: 1.5px dashed color-mix(in srgb, var(--mk-gold) 48%, #111);
  transform: rotate(-1.5deg);
}

.mk-kicker img {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

.mk-hero-mark {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(26, 23, 20, 0.28);
  white-space: nowrap;
}

.mk-title {
  position: relative;
  z-index: 1;
  font-family: var(--mk-display);
  font-size: clamp(22px, 4.2vw, 30px);
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  line-height: 1.15;
  color: #111;
  padding-left: 6px;
}

.mk-title span {
  color: var(--mk-gold);
  border-bottom: 3px solid color-mix(in srgb, var(--mk-gold) 55%, transparent);
}

.mk-sub {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(26, 23, 20, 0.62);
  font-size: 13px;
  max-width: 44em;
  line-height: 1.55;
  padding-left: 6px;
}

.mk-stats {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 12px;
  margin-left: 6px;
  margin-right: 2px;
  border: 1px solid rgba(17, 17, 17, 0.16);
  background: color-mix(in srgb, var(--mk-ticket) 55%, #fff);
}

.mk-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 96px;
  padding: 7px 10px;
  border-right: 1px dotted rgba(17, 17, 17, 0.18);
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  font-size: 11px;
  color: rgba(26, 23, 20, 0.55);
  font-weight: 650;
}

.mk-stats span:last-child {
  border-right: 0;
}

.mk-stats em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--mk-gold) 55%, #111);
}

.mk-stats b {
  color: #111;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.mk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.mk-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 4px;
  background: var(--mk-ticket);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.mk-tabs::-webkit-scrollbar {
  display: none;
}

.mk-tab {
  appearance: none;
  border: 0;
  border-right: 1px dotted rgba(17, 17, 17, 0.16);
  background: transparent;
  color: rgba(26, 23, 20, 0.55);
  border-radius: 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease;
  box-shadow: none;
}

.mk-tab:last-child {
  border-right: 0;
}

.mk-tab:hover {
  color: #111;
  background: rgba(17, 17, 17, 0.04);
}

.mk-tab.active {
  color: #f6e7a8;
  background: #111;
  font-weight: 800;
  box-shadow: none;
}

.mk-tab-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 14px;
  letter-spacing: 0;
  text-align: center;
  box-shadow: 0 0 0 1.5px #fff;
  pointer-events: none;
}

.mk-tab.active .mk-tab-dot {
  box-shadow: 0 0 0 1.5px #111;
}

.mk-list.is-grid .mk-row.mk-card.has-bargain-dot {
  position: relative;
}

.mk-card-bargain-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0;
  text-align: center;
  box-shadow: 0 0 0 1.5px #fff;
  pointer-events: none;
}

.mk-list.is-grid .mk-row.mk-card.is-compact.has-bargain-dot .mk-card-bargain-dot {
  top: 6px;
  right: 6px;
}

.mk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mk-btn {
  appearance: none;
  border: 1px solid #111;
  background: #fffef8;
  color: var(--mk-text);
  border-radius: 4px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  line-height: 1.2;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  text-decoration: none;
  box-shadow: none;
}

.mk-btn img {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.mk-btn:hover {
  transform: none;
  background: #111;
  color: #f6e7a8;
  box-shadow: none;
}

.mk-btn:hover img {
  filter: invert(1);
  opacity: 0.95;
}

.mk-btn-primary {
  background: #111;
  color: #f6e7a8;
  border-color: #111;
  font-weight: 800;
}

.mk-btn-primary:hover {
  background: #222;
  color: #fff4c2;
}

.mk-btn-primary img {
  filter: invert(1);
  opacity: 0.95;
}

.mk-btn-ghost {
  background: #fffef8;
}

.mk-btn-danger {
  border-color: color-mix(in srgb, var(--mk-danger) 45%, #111);
  color: var(--mk-danger);
}

.mk-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 3px,
      rgba(17, 17, 17, 0.02) 3px 4px
    ),
    var(--mk-ticket);
  align-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.mk-type-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 1px;
}

.mk-type-tabs::-webkit-scrollbar {
  display: none;
}

.mk-type-tab {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid rgba(17, 17, 17, 0.18);
  background: #fffef8;
  color: rgba(26, 23, 20, 0.55);
  border-radius: 2px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 750;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
  box-shadow: none;
}

.mk-type-tab:hover {
  color: #111;
  border-color: #111;
}

.mk-type-tab.active {
  background: #111;
  border-color: #111;
  color: #f6e7a8;
  box-shadow: none;
}

.mk-type-tab[data-tone="cosmetic"].active { background: #6e5630; border-color: #6e5630; color: #f6e7a8; }
.mk-type-tab[data-tone="pet"].active { background: #2f6b45; border-color: #2f6b45; color: #e8f5ec; }
.mk-type-tab[data-tone="frame"].active { background: #3f4d5c; border-color: #3f4d5c; color: #eef2f6; }
.mk-type-tab[data-tone="title"].active { background: #8a6a12; border-color: #8a6a12; color: #fff4c2; }
.mk-type-tab[data-tone="buff"].active { background: #6e4524; border-color: #6e4524; color: #f6e7a8; }

.mk-filters .mk-dd {
  flex: 0 0 auto;
}

.mk-select {
  border: 1px solid rgba(17, 17, 17, 0.2);
  background: #fffef8;
  border-radius: 4px;
  padding: 7px 8px;
  min-width: 108px;
  color: var(--mk-text);
  font-size: 13px;
  font-family: inherit;
}

.mk-dd {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
}

.mk-dd-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 118px;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 3px;
  background: #fffef8;
  color: var(--mk-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
  box-shadow: none;
}

.mk-dd-btn:hover,
.mk-dd.open .mk-dd-btn {
  border-color: #111;
  box-shadow: none;
}

.mk-dd.open .mk-dd-btn {
  background: #111;
  color: #f6e7a8;
}

.mk-dd-ico {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  flex-shrink: 0;
  background: #1a1714;
  box-shadow: none;
}

.mk-dd-ico[data-tone="all"] { background: #6b6560; }
.mk-dd-ico[data-tone="cosmetic"] { background: #6e5630; }
.mk-dd-ico[data-tone="pet"] { background: #2f6b45; }
.mk-dd-ico[data-tone="frame"] { background: #3f4d5c; }
.mk-dd-ico[data-tone="title"] { background: #8a6a12; }
.mk-dd-ico[data-tone="sort"] {
  width: 0;
  height: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--mk-gold);
}

.mk-dd.open .mk-dd-ico[data-tone="sort"] {
  border-bottom-color: #f6e7a8;
}

.mk-dd-text {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-dd-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.mk-dd.open .mk-dd-caret {
  transform: rotate(180deg);
  opacity: 0.9;
}

.mk-dd-menu {
  position: absolute;
  top: auto;
  bottom: calc(100% + 6px);
  left: auto;
  right: 0;
  min-width: 148px;
  width: max-content;
  max-width: min(240px, calc(100vw - 24px));
  z-index: 40;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid rgba(17, 17, 17, 0.22);
  background: #fffef8;
  box-shadow: 3px 3px 0 rgba(17, 17, 17, 0.1);
  display: grid;
  gap: 2px;
  box-sizing: border-box;
}

.mk-dd-menu[hidden] {
  display: none !important;
}

.mk-dd-menu button {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: 2px;
  font-size: 12px;
  font-family: inherit;
  color: var(--mk-text);
  cursor: pointer;
  font-weight: 650;
}

.mk-dd-menu button:hover {
  background: rgba(17, 17, 17, 0.05);
}

.mk-dd-menu button.active {
  background: #111;
  color: #f6e7a8;
  box-shadow: none;
}

.mk-type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mk-type-pill {
  appearance: none;
  border: 1px solid rgba(17, 17, 17, 0.18);
  background: #fffef8;
  color: rgba(26, 23, 20, 0.55);
  border-radius: 2px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 750;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.12s ease;
  box-shadow: none;
}

.mk-type-pill:hover {
  color: #111;
  border-color: #111;
}

.mk-type-pill.active {
  background: #111;
  border-color: #111;
  color: #f6e7a8;
}

/* Title listing — 与普通行同一三列网格，徽章放在中间信息区 */
.mk-row-title {
  overflow: visible;
}

.mk-row-title .mk-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mk-title-hit {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.mk-title-hit:focus-visible {
  outline: 2px solid var(--mk-gold);
  outline-offset: 2px;
  border-radius: 8px;
}

.mk-title-hit .eo-title-badge {
  max-width: 100%;
  flex: 0 1 auto;
  min-width: 0;
}

.mk-title-hit .eo-title-badge .eo-title-text {
  max-width: min(11em, 42vw);
}

.mk-title-hit .mk-qty {
  font-size: 11px;
  font-weight: 700;
  color: var(--mk-muted);
  flex-shrink: 0;
}

.mk-bag-item.is-title {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.mk-bag-item.is-title.is-lite {
  grid-template-columns: minmax(0, 1fr) auto;
}

.mk-rdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9aa7b5;
  justify-self: center;
}
.mk-rdot[data-r="2"] { background: #3d9a5f; }
.mk-rdot[data-r="3"] { background: #3b82c4; }
.mk-rdot[data-r="4"] { background: #8b5cf6; }
.mk-rdot[data-r="5"] { background: #d4a017; }

.mk-bag-item.is-title .mk-bag-title-main {
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: center;
}

.mk-bag-item.is-title .mk-bag-sub {
  font-size: 12px;
  color: var(--mk-muted);
}

/* 背包称号：图标与文字强制同一行 */
.mk-bag-item.is-title .mk-bag-title-hit,
.mk-sell-modal .mk-bag-item.is-title .mk-bag-title-hit {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}

.mk-bag-item.is-title .eo-title-badge,
.mk-sell-modal .mk-bag-item.is-title .eo-title-badge {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  max-width: 100%;
  min-width: 0;
}

.mk-bag-item.is-title .eo-title-badge .eo-title-ico,
.mk-sell-modal .mk-bag-item.is-title .eo-title-badge .eo-title-ico {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

.mk-bag-item.is-title .mk-bag-title-main .eo-title-badge .eo-title-text,
.mk-sell-modal .mk-bag-item.is-title .eo-title-badge .eo-title-text {
  max-width: min(12em, 46vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-bag-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}

.mk-bag-peek {
  appearance: none;
  border: 1px solid var(--mk-line);
  background: #fff;
  color: var(--mk-gold);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.mk-bag-peek:hover {
  border-color: var(--mk-gold);
  background: color-mix(in srgb, var(--mk-gold) 10%, #fff);
}

.mk-bag-pick {
  appearance: none;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

#mkTitleMask {
  z-index: 1250;
}

.mk-title-modal {
  text-align: center;
}

.mk-title-preview {
  display: flex;
  justify-content: center;
  margin: 4px 0 12px;
  min-height: 42px;
}

.mk-title-preview .eo-title-badge {
  transform: scale(1.05);
}

.mk-title-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.mk-title-body {
  text-align: left;
  font-size: 13px;
  color: var(--mk-muted);
  line-height: 1.55;
  margin-bottom: 4px;
}

.mk-title-body p {
  margin: 0 0 10px;
  color: var(--mk-text);
}

.mk-title-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.mk-title-meta span {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--mk-line);
  background: var(--mk-soft);
  font-size: 11px;
  font-weight: 700;
  color: var(--mk-muted);
}

.mk-title-meta .is-gold {
  color: var(--mk-gold);
  border-color: color-mix(in srgb, var(--mk-gold) 35%, transparent);
  background: color-mix(in srgb, var(--mk-gold) 10%, #fff);
}

#mkDetailMask {
  z-index: 1260;
  align-items: center;
  padding: 12px 10px;
  background: rgba(17, 17, 17, 0.48);
  backdrop-filter: blur(5px);
}

.mk-detail-modal {
  --mk-ticket: #f7f2e8;
  position: relative;
  text-align: left;
  max-width: 360px;
  width: min(360px, 100%);
  max-height: min(82vh, 640px);
  padding: 0;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid rgba(17, 17, 17, 0.22);
  background-color: var(--mk-ticket);
  background-image:
    radial-gradient(rgba(26, 23, 20, 0.04) 0.55px, transparent 0.75px),
    linear-gradient(165deg, #fffef9 0%, var(--mk-ticket) 55%, #ebe2d2 100%);
  background-size: 4px 4px, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    4px 4px 0 rgba(17, 17, 17, 0.1);
}

.mk-detail-modal[data-type="cosmetic"] { --mk-ticket: #f6f0e4; }
.mk-detail-modal[data-type="frame"] { --mk-ticket: #f2f4f6; }
.mk-detail-modal[data-type="pet_item"] { --mk-ticket: #f3f6f1; }
.mk-detail-modal[data-type="arena_buff"] { --mk-ticket: #f8f1e6; }
.mk-detail-modal[data-type="title"] { --mk-ticket: #f8f4e7; }

.mk-detail-x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(17, 17, 17, 0.28);
  border-radius: 3px;
  background: color-mix(in srgb, var(--mk-ticket) 70%, #fff);
  color: #1a1714;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.mk-detail-x:hover {
  color: #fff;
  border-color: #111;
  background: #111;
}

.mk-detail-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  padding: 14px 36px 12px 12px;
  border-bottom: 1px dashed rgba(17, 17, 17, 0.22);
  background:
    linear-gradient(90deg, rgba(17, 17, 17, 0.04), transparent 40%),
    color-mix(in srgb, var(--mk-ticket) 88%, #fff);
}

.mk-detail-modal[data-type="cosmetic"] .mk-detail-top,
.mk-detail-modal[data-type="frame"] .mk-detail-top {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding: 12px 12px 10px;
}

.mk-detail-modal[data-type="cosmetic"] .mk-detail-head,
.mk-detail-modal[data-type="frame"] .mk-detail-head {
  text-align: center;
  width: 100%;
}

.mk-detail-modal[data-type="cosmetic"] .mk-detail-tags,
.mk-detail-modal[data-type="frame"] .mk-detail-tags {
  justify-content: center;
}

.mk-detail-modal[data-type="cosmetic"] .mk-detail-kicker,
.mk-detail-modal[data-type="frame"] .mk-detail-kicker {
  justify-content: center;
}

.mk-detail-hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.mk-detail-hero::before { display: none; }

.mk-detail-media {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  margin: 0;
}

.mk-detail-media.is-cosmetic {
  min-height: 0;
  width: auto;
}

.mk-detail-media .mk-thumb,
.mk-detail-media .mk-thumb-ph {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  border: 1px solid rgba(17, 17, 17, 0.28);
  box-shadow: 2px 2px 0 rgba(17, 17, 17, 0.1);
  background: #fffef8;
}

.mk-detail-media .mk-thumb-emoji {
  font-size: 28px !important;
}

.mk-detail-media .eo-title-badge {
  transform: scale(0.95);
}

.mk-detail-cos {
  position: relative;
  width: min(128px, 42vw);
  height: min(128px, 42vw);
  border-radius: 4px;
  overflow: hidden;
  background: #efe8da;
  border: 1px solid rgba(17, 17, 17, 0.28);
  box-shadow: 3px 3px 0 rgba(17, 17, 17, 0.1);
}
.mk-detail-cos-bg,
.mk-detail-cos-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
}
.mk-detail-cos-bg {
  object-fit: cover;
}

.mk-detail-media.is-frame .mk-thumb {
  border-radius: 4px;
  background: #f4f5f7;
}

.mk-detail-head {
  min-width: 0;
}

.mk-detail-body {
  padding: 10px 12px 12px;
  text-align: left;
}

.mk-detail-kicker {
  margin: 0 0 5px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: none;
  color: color-mix(in srgb, var(--mk-gold) 70%, #111);
  padding: 2px 6px;
  border: 1.5px dashed color-mix(in srgb, var(--mk-gold) 50%, #111);
  border-radius: 2px;
  background: color-mix(in srgb, var(--mk-ticket) 65%, #fff);
  transform: rotate(-1.5deg);
}

.mk-detail-kicker::before {
  display: none;
}

.mk-detail-heading {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--mk-display);
  color: #1a1714;
  line-height: 1.3;
  letter-spacing: 0.01em;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mk-detail-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
  margin: 0;
}

.mk-detail-tags span {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid rgba(17, 17, 17, 0.2);
  background: transparent;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: rgba(26, 23, 20, 0.62);
}

.mk-detail-tags .is-gold {
  color: color-mix(in srgb, var(--mk-gold) 75%, #111);
  border-color: color-mix(in srgb, var(--mk-gold) 45%, #111);
  border-style: dashed;
  background: color-mix(in srgb, var(--mk-ticket) 70%, #fff);
}

.mk-detail-panel {
  margin: 0 0 8px;
  padding: 8px 9px 7px;
  border-radius: 4px;
  border: 1px solid rgba(17, 17, 17, 0.16);
  background: color-mix(in srgb, var(--mk-ticket) 55%, #fff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.mk-detail-panel-title {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--mk-gold) 70%, #111);
}

.mk-detail-desc {
  text-align: left;
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #1a1714;
}

.mk-detail-effects {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.mk-detail-effects.is-cols {
  grid-template-columns: 1fr 1fr;
}

.mk-detail-effects li {
  position: relative;
  padding: 5px 7px 5px 14px;
  margin-bottom: 0;
  border-radius: 3px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  background: #fffef9;
  font-size: 11.5px;
  color: #1a1714;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-detail-effects.is-cols li {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mk-detail-effects li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  width: 3px;
  height: 8px;
  border-radius: 0;
  background: var(--mk-gold);
}

.mk-detail-flavor {
  text-align: left;
  margin: 0;
  padding-top: 5px;
  border-top: 1px dotted rgba(17, 17, 17, 0.2);
  font-size: 11px;
  line-height: 1.45;
  color: rgba(26, 23, 20, 0.55);
  font-style: normal;
}

.mk-detail-deal {
  text-align: left;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px dashed rgba(17, 17, 17, 0.24);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 3px,
      rgba(17, 17, 17, 0.025) 3px 4px
    ),
    color-mix(in srgb, var(--mk-ticket) 70%, #fff);
}

.mk-detail-deal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mk-detail-deal-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-right: auto;
  padding: 0;
  border: 0;
}

.mk-detail-deal-lab {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(26, 23, 20, 0.5);
}

.mk-detail-deal-price .mk-price {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #111;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mk-detail-deal-price .mk-price small {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 750;
  color: var(--mk-gold);
}

.mk-detail-deal-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  border: 0;
  font-size: 11px;
  color: var(--mk-muted);
  min-width: 0;
  max-width: 42%;
}

.mk-buy-qty-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dotted rgba(17, 17, 17, 0.2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.mk-buy-qty-row > label {
  font-size: 12px;
  font-weight: 750;
  color: rgba(26, 23, 20, 0.55);
}
.mk-buy-qty-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mk-buy-qty-btn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(17, 17, 17, 0.22);
  background: #fffef9;
  border-radius: 3px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: #1a1714;
  box-shadow: none;
}
.mk-buy-qty-btn:hover { background: #111; color: #f6e7a8; border-color: #111; }
.mk-buy-qty-ctrl input[type="number"] {
  width: 64px;
  height: 32px;
  text-align: center;
  border: 1px solid rgba(17, 17, 17, 0.22);
  border-radius: 3px;
  font-weight: 800;
  background: #fff;
}
.mk-buy-qty-sum {
  margin: 0;
  width: 100%;
  font-size: 13px;
  color: rgba(26, 23, 20, 0.55);
}
.mk-buy-qty-sum strong {
  color: #111;
  font-size: 15px;
}

.mk-detail-deal-item span {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--mk-gold) 45%, rgba(26, 23, 20, 0.5));
}

.mk-detail-deal-item strong {
  color: #1a1714;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-detail-actions {
  margin-top: 0;
  justify-content: stretch;
  gap: 6px;
}

.mk-detail-actions .mk-btn {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 34px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  box-shadow: none;
}

.mk-detail-actions .mk-btn-primary {
  flex: 1.35 1 auto;
  background: #111;
  border-color: #111;
  color: #f6e7a8;
  box-shadow: none;
}

.mk-detail-media .mk-buff-chip {
  transform: none;
  padding: 5px 8px 5px 5px;
  max-width: 150px;
}

.mk-detail-media .mk-buff-ico { width: 18px; height: 18px; }
.mk-detail-media .mk-buff-name { font-size: 12px; max-width: 7em; }
.mk-detail-media .mk-buff-tag { font-size: 9px; }

.mk-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 逛摊：橱窗卡片 */
.mk-list.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}

/* 全部：装扮/头像框单行横滑，下方紧凑行 */
.mk-list.is-grid.is-all {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mk-rail {
  position: relative;
  width: 100%;
  padding: 0 0 2px;
}

.mk-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1a1714;
  border-bottom: 1px dotted rgba(17, 17, 17, 0.18);
  padding-bottom: 6px;
}

.mk-rail-hint {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: rgba(26, 23, 20, 0.5);
}

.mk-rail-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 2px 36px 10px;
  margin: 0 -2px;
  scrollbar-width: none;
}

.mk-rail-track::-webkit-scrollbar {
  display: none;
}

.mk-rail-track .mk-card.is-showcase {
  flex: 0 0 156px;
  width: 156px;
  max-width: 70vw;
  scroll-snap-align: start;
  margin: 0;
}

.mk-rail-btn {
  appearance: none;
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 32px;
  height: 32px;
  margin-top: 4px;
  border: 1px solid rgba(17, 17, 17, 0.25);
  border-radius: 4px;
  background: #fffef8;
  color: #111;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(17, 17, 17, 0.1);
  display: grid;
  place-items: center;
  transform: translateY(-20%);
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.mk-rail-btn.is-prev { left: 0; }
.mk-rail-btn.is-next { right: 0; }

.mk-rail-btn:hover:not(:disabled) {
  background: #111;
  color: #fff;
  border-color: #111;
}

.mk-rail-btn:disabled {
  opacity: 0.28;
  cursor: default;
}

.mk-rail:not(.is-scrollable) .mk-rail-btn {
  display: none;
}

.mk-list.is-grid.is-all .mk-card.is-compact {
  grid-column: auto;
  width: auto;
}

.mk-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  width: 100%;
  justify-content: stretch;
}

.mk-list.is-grid > .mk-compact-grid {
  grid-column: 1 / -1;
}

/* 我的挂牌 / 成交：同布局，整体更小；点缀对齐全站金黑 */
.mk-list.is-grid.is-sm.is-all {
  gap: 8px;
}

.mk-list.is-grid.is-sm .mk-type-cosmetic,
.mk-list.is-grid.is-sm .mk-type-pet_item,
.mk-list.is-grid.is-sm .mk-type-frame,
.mk-list.is-grid.is-sm .mk-type-title,
.mk-list.is-grid.is-sm .mk-type-arena_buff {
  --mk-rarity: var(--mk-gold);
}

.mk-list.is-grid.is-sm .mk-row.mk-card {
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--mk-gold) 26%, var(--mk-line));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--mk-gold) 11%, #fff) 0%, #fff 42%, #fff 100%);
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.02), 0 8px 18px rgba(184, 134, 11, 0.06);
}

.mk-list.is-grid.is-sm .mk-row.mk-card:hover {
  border-color: color-mix(in srgb, var(--mk-gold) 48%, var(--mk-line));
  box-shadow: 0 2px 0 rgba(17, 17, 17, 0.02), 0 12px 24px rgba(184, 134, 11, 0.12);
}

.mk-list.is-grid.is-sm .mk-rail-head {
  margin-bottom: 6px;
  font-size: 11px;
}

.mk-list.is-grid.is-sm .mk-rail-head > span:first-child {
  color: var(--mk-gold);
  letter-spacing: 0.04em;
}

.mk-list.is-grid.is-sm .mk-rail-track {
  gap: 8px;
  padding: 2px 28px 8px;
}

.mk-list.is-grid.is-sm .mk-rail-track .mk-card.is-showcase {
  flex-basis: 118px;
  width: 118px;
  max-width: 58vw;
}

.mk-list.is-grid.is-sm .mk-rail-btn {
  width: 26px;
  height: 26px;
  font-size: 18px;
  border-color: color-mix(in srgb, var(--mk-gold) 35%, var(--mk-line-strong));
  color: var(--mk-text);
}

.mk-list.is-grid.is-sm .mk-rail-btn:hover:not(:disabled) {
  background: #111;
  border-color: #111;
  color: #fff;
}

.mk-list.is-grid.is-sm .mk-card-media {
  aspect-ratio: 1 / 1.02;
  min-height: 0;
}

.mk-list.is-grid.is-sm .is-showcase .mk-card-chip {
  color: color-mix(in srgb, var(--mk-rarity, var(--mk-gold)) 70%, #111);
  border-color: color-mix(in srgb, var(--mk-rarity, var(--mk-gold)) 50%, #111);
  background: color-mix(in srgb, var(--mk-ticket, #f6f0e4) 72%, #fff);
  border-radius: 2px;
  box-shadow: none;
}

.mk-list.is-grid.is-sm .mk-card-media > .mk-thumb,
.mk-list.is-grid.is-sm .mk-card-media > .mk-thumb-ph,
.mk-list.is-grid.is-sm .mk-card-media > .mk-card-cos,
.mk-list.is-grid.is-sm .mk-card-media > .mk-thumb-emoji {
  max-width: 96px;
  max-height: 96px;
}

.mk-list.is-grid.is-sm .mk-card-chip {
  color: var(--mk-gold);
  border-color: color-mix(in srgb, var(--mk-gold) 32%, transparent);
  background: color-mix(in srgb, var(--mk-gold) 10%, #fff);
}

.mk-list.is-grid.is-sm .mk-compact-type {
  color: color-mix(in srgb, var(--mk-rarity, var(--mk-gold)) 70%, #111);
  border-color: color-mix(in srgb, var(--mk-rarity, var(--mk-gold)) 50%, #111);
  background: color-mix(in srgb, var(--mk-ticket, #f7f2e8) 75%, #fff);
}

.mk-list.is-grid.is-sm .mk-card-chip {
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  font-size: 9px;
}

.mk-list.is-grid.is-sm .mk-card-body {
  padding: 8px 8px 5px;
  gap: 2px;
}

.mk-list.is-grid.is-sm .mk-card-body h3 {
  font-size: 11.5px;
}

.mk-list.is-grid.is-sm .mk-card-sub,
.mk-list.is-grid.is-sm .mk-card-seller {
  font-size: 10px;
}

.mk-list.is-grid.is-sm .mk-card-seller {
  color: color-mix(in srgb, var(--mk-gold) 40%, var(--mk-muted));
}

.mk-list.is-grid.is-sm .mk-card-seller span {
  color: var(--mk-gold);
  opacity: 1;
}

.mk-list.is-grid.is-sm .mk-card-foot {
  padding: 6px 8px 8px;
  gap: 6px;
  border-top: 1px solid color-mix(in srgb, var(--mk-gold) 18%, transparent);
}

.mk-list.is-grid.is-sm .mk-card-foot .mk-price,
.mk-list.is-grid.is-sm .mk-compact-side .mk-price {
  color: var(--mk-text);
}

.mk-list.is-grid.is-sm .mk-card-foot .mk-price small,
.mk-list.is-grid.is-sm .mk-compact-side .mk-price small {
  color: var(--mk-gold);
}

.mk-list.is-grid.is-sm .mk-card-foot .mk-price {
  font-size: 14px;
}

.mk-list.is-grid.is-sm .mk-card-foot .mk-btn:not(.mk-btn-cancel) {
  padding: 4px 8px;
  font-size: 11px;
  min-height: 28px;
  background: #111;
  border-color: #111;
  color: #fff;
}

.mk-list.is-grid.is-sm .mk-compact-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 7px;
}

.mk-list.is-grid.is-sm .mk-row.mk-card.is-compact {
  --mk-compact-pad-x: 9px;
  --mk-compact-pad-y: 8px;
  padding: var(--mk-compact-pad-y) var(--mk-compact-pad-x) 0;
  gap: 5px;
  border-radius: 13px;
  max-width: none;
}

.mk-list.is-grid.is-sm .mk-compact-name {
  font-size: 12px;
}

.mk-list.is-grid.is-sm .mk-compact-sub,
.mk-list.is-grid.is-sm .mk-compact-peer {
  font-size: 10px;
}

.mk-list.is-grid.is-sm .mk-compact-peer {
  color: color-mix(in srgb, var(--mk-gold) 48%, var(--mk-muted));
}

.mk-list.is-grid.is-sm .mk-compact-side {
  border-top-color: color-mix(in srgb, var(--mk-gold) 22%, transparent);
}

.mk-list.is-grid.is-sm .mk-compact-side .mk-price {
  font-size: 14px;
}

.mk-list.is-grid.is-sm .mk-compact-side .mk-btn:not(.mk-btn-cancel) {
  padding: 4px 8px;
  font-size: 11px;
  min-height: 26px;
  border-radius: 4px;
  background: #111;
  border-color: #111;
  color: #f6e7a8;
  box-shadow: none;
}

.mk-list.is-grid.is-sm .is-compact .mk-thumb-ph.mk-pet-ico,
.mk-list.is-grid.is-sm .is-compact .mk-title-ico,
.mk-list.is-grid.is-sm .is-compact .mk-compact-ico {
  width: 30px;
  height: 30px;
  max-width: 30px;
  max-height: 30px;
  border-color: color-mix(in srgb, var(--mk-gold) 30%, var(--mk-line));
  background: color-mix(in srgb, var(--mk-gold) 8%, #fff);
}

.mk-list.is-grid.is-sm .is-compact .mk-compact-ico.is-buff .mk-buff-ico {
  background: var(--mk-gold) !important;
}

.mk-list.is-grid.is-sm .is-compact .mk-buff-tag {
  color: var(--mk-gold);
}

.mk-list.is-grid.is-sm .mk-btn-cancel {
  border-color: color-mix(in srgb, var(--mk-text) 55%, transparent);
  background: #fff;
  color: var(--mk-text);
}

.mk-list.is-grid.is-sm .mk-btn-cancel:hover {
  background: #111;
  border-color: #111;
  color: #fff;
}

.mk-card-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  color: var(--mk-muted);
  line-height: 1.2;
  white-space: nowrap;
}

.mk-list.is-grid.is-sm .mk-card-status {
  font-size: 10px;
  font-weight: 700;
  color: var(--mk-gold);
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--mk-gold) 30%, transparent);
  background: color-mix(in srgb, var(--mk-gold) 10%, #fff);
}

.mk-list.is-grid .mk-empty {
  grid-column: 1 / -1;
}

.mk-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  border: 1px solid var(--mk-line);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--mk-rarity, #9aa7b5) 9%, #fff) 0%, #fff 48%, #fff 100%);
  border-radius: 10px;
  padding: 7px 9px 7px 11px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  position: relative;
  overflow: hidden;
  min-height: 54px;
}

.mk-list.is-grid .mk-row.mk-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 16px;
  border-color: rgba(17, 17, 17, 0.1);
  background: #fff;
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.03), 0 8px 20px rgba(17, 17, 17, 0.04);
}

.mk-list.is-grid .mk-row.mk-card:not(.is-compact)::before {
  display: none;
}

.mk-list.is-grid .mk-card-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  margin: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, color-mix(in srgb, var(--mk-rarity, #b8860b) 18%, #fff) 0%, transparent 72%),
    linear-gradient(180deg, #f6f3ec 0%, #efeae2 55%, #e8e2d8 100%);
  overflow: hidden;
}

.mk-list.is-grid .mk-card-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.55));
  pointer-events: none;
}

.mk-list.is-grid .mk-card-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 48px);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  color: var(--mk-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.06);
}

.mk-list.is-grid .mk-card-sf {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.mk-list.is-grid .mk-card-media > .mk-thumb,
.mk-list.is-grid .mk-card-media > .mk-thumb-ph,
.mk-list.is-grid .mk-card-media > .mk-card-cos {
  width: 72%;
  height: 72%;
  max-width: 132px;
  max-height: 132px;
  margin: 0;
  border-radius: 14px;
  border-color: rgba(17, 17, 17, 0.08);
  box-shadow: 0 10px 22px rgba(17, 17, 17, 0.1);
  transition: transform 0.22s ease;
  z-index: 1;
}

.mk-list.is-grid .mk-card-media > .mk-thumb-ph img {
  width: 28px;
  height: 28px;
}

.mk-list.is-grid .mk-card-media > .mk-thumb-emoji {
  font-size: 34px !important;
  width: 72%;
  height: 72%;
  max-width: 132px;
  max-height: 132px;
}

.mk-list.is-grid .mk-card-cos {
  position: relative;
  overflow: hidden;
  background: #f3f0ea;
  border: 1px solid rgba(17, 17, 17, 0.08);
}
.mk-list.is-grid .mk-card-cos-bg,
.mk-list.is-grid .mk-card-cos-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.mk-list.is-grid .mk-card-cos-bg {
  object-fit: cover;
}

.mk-list.is-grid .mk-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px 8px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.mk-list.is-grid .mk-card-body h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--mk-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.mk-list.is-grid .mk-title-hit {
  justify-content: flex-start;
  width: 100%;
  margin: 0;
}

.mk-list.is-grid .mk-title-hit .eo-title-badge .eo-title-text {
  max-width: 8.5em;
}

.mk-list.is-grid .mk-card-sub {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--mk-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mk-list.is-grid .mk-card-seller {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--mk-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-list.is-grid .mk-card-seller span {
  opacity: 0.72;
}

.mk-list.is-grid .mk-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px 12px;
  margin-top: auto;
}

.mk-list.is-grid .mk-card-foot .mk-price {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--mk-text);
  line-height: 1;
}

.mk-list.is-grid .mk-card-foot .mk-price small {
  margin-left: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--mk-gold);
}

.mk-list.is-grid .mk-card-foot .mk-btn {
  min-width: 58px;
  flex-shrink: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  box-shadow: 0 4px 10px rgba(17, 17, 17, 0.12);
}

.mk-list.is-grid .mk-row.mk-card:hover {
  border-color: color-mix(in srgb, var(--mk-gold) 45%, var(--mk-line));
  box-shadow: 0 2px 0 rgba(17, 17, 17, 0.02), 0 14px 28px rgba(17, 17, 17, 0.1);
  transform: translateY(-3px);
}

.mk-list.is-grid .mk-row.mk-card:hover .mk-card-media > .mk-thumb,
.mk-list.is-grid .mk-row.mk-card:hover .mk-card-media > .mk-thumb-ph,
.mk-list.is-grid .mk-row.mk-card:hover .mk-card-media > .mk-card-cos {
  transform: scale(1.04);
}

.mk-list.is-grid .mk-row.mk-card:focus-visible {
  outline: 2px solid var(--mk-gold);
  outline-offset: 2px;
}

/* —— 装扮 / 头像框：票据橱窗（不改尺寸） —— */
.mk-list.is-grid .mk-row.mk-card.is-showcase {
  --mk-ticket: #f6f0e4;
  --mk-rarity: #8a7340;
  border-radius: 8px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  background-color: var(--mk-ticket);
  background-image:
    radial-gradient(rgba(26, 23, 20, 0.04) 0.55px, transparent 0.75px),
    linear-gradient(180deg, #fffdf8 0%, var(--mk-ticket) 100%);
  background-size: 4px 4px, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    3px 3px 0 rgba(17, 17, 17, 0.07);
}

.mk-list.is-grid .mk-row.mk-card.is-showcase.mk-type-frame {
  --mk-ticket: #f1f3f5;
  --mk-rarity: #5a6674;
}

.mk-list.is-grid .mk-row.mk-card.is-showcase:hover {
  transform: translate(-1px, -2px);
  border-color: #111;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    4px 4px 0 rgba(17, 17, 17, 0.1);
}

.mk-list.is-grid .mk-row.mk-card.is-showcase:hover .mk-card-media > .mk-thumb,
.mk-list.is-grid .mk-row.mk-card.is-showcase:hover .mk-card-media > .mk-thumb-ph,
.mk-list.is-grid .mk-row.mk-card.is-showcase:hover .mk-card-media > .mk-card-cos {
  transform: none;
}

.mk-list.is-grid .is-showcase .mk-card-media {
  background:
    radial-gradient(rgba(26, 23, 20, 0.035) 0.5px, transparent 0.7px),
    linear-gradient(180deg, #ebe4d6 0%, #e2d8c6 100%);
  background-size: 5px 5px, auto;
  border-bottom: 1px dashed rgba(17, 17, 17, 0.16);
}

.mk-list.is-grid .is-showcase.mk-type-frame .mk-card-media {
  background:
    radial-gradient(rgba(26, 23, 20, 0.035) 0.5px, transparent 0.7px),
    linear-gradient(180deg, #e8eaee 0%, #dde1e6 100%);
  background-size: 5px 5px, auto;
}

.mk-list.is-grid .is-showcase .mk-card-media::after {
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(247, 242, 232, 0.75));
}

.mk-list.is-grid .is-showcase .mk-card-chip {
  top: 7px;
  left: 7px;
  padding: 2px 5px;
  border-radius: 2px;
  border: 1.5px dashed color-mix(in srgb, var(--mk-rarity) 55%, #111);
  background: color-mix(in srgb, var(--mk-ticket) 72%, #fff);
  backdrop-filter: none;
  color: color-mix(in srgb, var(--mk-rarity) 70%, #111);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  box-shadow: none;
  transform: rotate(-3deg);
}

.mk-list.is-grid .is-showcase .mk-card-media > .mk-thumb,
.mk-list.is-grid .is-showcase .mk-card-media > .mk-thumb-ph,
.mk-list.is-grid .is-showcase .mk-card-media > .mk-card-cos {
  border-radius: 4px;
  border: 1px solid rgba(17, 17, 17, 0.22);
  box-shadow: 2px 2px 0 rgba(17, 17, 17, 0.1);
}

.mk-list.is-grid .is-showcase .mk-card-body {
  padding: 9px 10px 6px;
  gap: 3px;
  background: transparent;
}

.mk-list.is-grid .is-showcase .mk-card-body h3 {
  font-family: var(--mk-display);
  font-size: 13px;
  font-weight: 800;
  color: #1a1714;
  letter-spacing: 0.01em;
}

.mk-list.is-grid .is-showcase .mk-card-sub {
  font-size: 10.5px;
  font-weight: 650;
  color: rgba(26, 23, 20, 0.52);
  letter-spacing: 0.02em;
}

.mk-list.is-grid .is-showcase .mk-card-seller {
  margin: 3px 0 0;
  padding-top: 4px;
  border-top: 1px dotted rgba(17, 17, 17, 0.16);
  font-size: 10.5px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: rgba(26, 23, 20, 0.5);
}

.mk-list.is-grid .is-showcase .mk-card-seller-lab {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--mk-rarity) 65%, #111);
  opacity: 1;
}

.mk-list.is-grid .is-showcase .mk-card-seller-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1a1714;
  font-weight: 700;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}

.mk-list.is-grid .is-showcase .mk-card-seller span {
  opacity: 1;
}

.mk-list.is-grid .is-showcase .mk-card-foot {
  padding: 7px 10px 9px;
  border-top: 1px dashed rgba(17, 17, 17, 0.2);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 3px,
      rgba(17, 17, 17, 0.03) 3px 4px
    ),
    rgba(17, 17, 17, 0.03);
}

.mk-list.is-grid .is-showcase .mk-card-foot .mk-price {
  font-size: 16px;
  font-weight: 900;
  color: #111;
  font-variant-numeric: tabular-nums;
}

.mk-list.is-grid .is-showcase .mk-card-foot .mk-price small {
  color: var(--mk-gold);
  letter-spacing: 0.03em;
}

.mk-list.is-grid .is-showcase .mk-card-foot .mk-btn:not(.mk-btn-cancel) {
  border-radius: 4px;
  min-width: 52px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: #111;
  border: 1px solid #111;
  color: #f6e7a8;
  box-shadow: none;
}

.mk-list.is-grid .is-showcase .mk-card-foot .mk-btn:not(.mk-btn-cancel):hover {
  background: #222;
  color: #fff4c2;
}

/* 用品 / 称号 / 词条：交易所票据风 */
.mk-list.is-grid .mk-row.mk-card.is-compact,
.mk-compact-grid .mk-row.mk-card.is-compact {
  --mk-compact-pad-x: 11px;
  --mk-compact-pad-y: 10px;
  --mk-ticket: #f7f2e8;
  --mk-ticket-ink: #1a1714;
  position: relative;
  grid-column: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: var(--mk-compact-pad-y) var(--mk-compact-pad-x) 0;
  min-height: 0;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  text-align: left;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  background-color: var(--mk-ticket);
  background-image:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.55) 0 28%, transparent 55%),
    radial-gradient(rgba(26, 23, 20, 0.045) 0.55px, transparent 0.75px),
    radial-gradient(rgba(184, 134, 11, 0.035) 0.45px, transparent 0.7px),
    linear-gradient(165deg, #fffef9 0%, var(--mk-ticket) 48%, color-mix(in srgb, var(--mk-ticket) 82%, #d9cbb3) 100%);
  background-size: auto, 4px 4px, 7px 7px, auto;
  background-position: 0 0, 0 0, 1px 2px, 0 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    3px 3px 0 rgba(17, 17, 17, 0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mk-type-pet_item.is-compact {
  --mk-rarity: #3d6b4f;
  --mk-ticket: #f3f6f1;
}

.mk-type-arena_buff.is-compact {
  --mk-rarity: #8a5a2b;
  --mk-ticket: #f8f1e6;
}

.mk-type-title.is-compact {
  --mk-rarity: #9a7a18;
  --mk-ticket: #f8f4e7;
}

.mk-list.is-grid .mk-row.mk-card.is-compact::before,
.mk-compact-grid .mk-row.mk-card.is-compact::before {
  content: '';
  display: block;
  position: absolute;
  right: -10px;
  top: -10px;
  width: 28px;
  height: 28px;
  background:
    linear-gradient(135deg, transparent 48%, rgba(17, 17, 17, 0.08) 49%, rgba(17, 17, 17, 0.08) 51%, transparent 52%);
  pointer-events: none;
  z-index: 0;
}

.mk-list.is-grid .mk-row.mk-card.is-compact::after,
.mk-compact-grid .mk-row.mk-card.is-compact::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  width: 4px;
  height: calc(100% - 16px);
  border-radius: 0;
  background:
    repeating-linear-gradient(
      180deg,
      var(--mk-rarity, #8a5a2b) 0 3px,
      color-mix(in srgb, var(--mk-rarity, #8a5a2b) 55%, #111) 3px 4px
    );
  transform: translateY(-50%) scaleY(0.28);
  transform-origin: center center;
  opacity: 0.85;
  pointer-events: none;
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  z-index: 2;
}

.mk-list.is-grid .mk-row.mk-card.is-compact:hover::after,
.mk-list.is-grid .mk-row.mk-card.is-compact:focus-visible::after,
.mk-list.is-grid .mk-row.mk-card.is-compact:focus-within::after,
.mk-compact-grid .mk-row.mk-card.is-compact:hover::after,
.mk-compact-grid .mk-row.mk-card.is-compact:focus-visible::after,
.mk-compact-grid .mk-row.mk-card.is-compact:focus-within::after {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}

.mk-list.is-grid .mk-row.mk-card.is-compact:hover,
.mk-compact-grid .mk-row.mk-card.is-compact:hover {
  transform: translate(-1px, -2px);
  border-color: #111;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    4px 4px 0 rgba(17, 17, 17, 0.1);
}

.mk-compact-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
  text-align: left;
  padding: 0 0 3px 6px;
  padding-right: 3.2em;
  position: relative;
  z-index: 1;
}

.mk-compact-type {
  position: absolute;
  top: 9px;
  right: 8px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--mk-rarity, #8a5a2b) 70%, #111);
  padding: 3px 5px 2px;
  border-radius: 2px;
  border: 1.5px dashed color-mix(in srgb, var(--mk-rarity, #8a5a2b) 55%, #111);
  background: color-mix(in srgb, var(--mk-ticket, #f7f2e8) 70%, #fff);
  white-space: nowrap;
  line-height: 1.15;
  pointer-events: none;
  transform: rotate(4deg);
  box-shadow: none;
}

.mk-compact-lead {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.mk-compact-lead.is-buff,
.mk-compact-lead.is-title {
  justify-content: flex-start;
}

.mk-compact-lead.is-title .mk-title-hit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.mk-compact-lead.is-title .mk-compact-name,
.mk-compact-lead.is-buff .mk-compact-name {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.mk-compact-lead.is-buff .mk-compact-text {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 3px;
}

.mk-type-arena_buff.is-compact .mk-compact-name {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.3;
}

.mk-type-title.is-compact .mk-compact-name:not(.is-name-fx) {
  color: #6b5420;
}

.mk-compact-sf {
  display: none;
}

.mk-compact-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.mk-compact-name {
  font-family: var(--mk-display);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--mk-ticket-ink, #1a1714);
  line-height: 1.25;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  min-width: 0;
  flex: 1 1 auto;
  letter-spacing: 0.01em;
}

.mk-compact-sub {
  margin: 0;
  font-size: 10.5px;
  color: rgba(26, 23, 20, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
  text-align: left;
  width: 100%;
  padding-left: 2px;
}

.mk-compact-peer {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 650;
  color: rgba(26, 23, 20, 0.5);
  line-height: 1.3;
  text-align: left;
  width: 100%;
  padding: 4px 2px 0;
  border-top: 1px dotted rgba(17, 17, 17, 0.18);
  white-space: nowrap;
}

.mk-compact-peer-lab {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--mk-rarity, #8a5a2b) 65%, #111);
}

.mk-compact-peer-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1a1714;
  font-weight: 700;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}

.mk-compact-peer-fee {
  flex: 0 0 auto;
  color: rgba(26, 23, 20, 0.45);
  font-size: 10px;
}

.mk-compact-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 1px calc(var(--mk-compact-pad-x) * -1) 0;
  padding: 8px var(--mk-compact-pad-x) 9px;
  border-top: 1px dashed rgba(17, 17, 17, 0.22);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 3px,
      rgba(17, 17, 17, 0.03) 3px 4px
    ),
    linear-gradient(180deg, rgba(17, 17, 17, 0.03), rgba(17, 17, 17, 0.06));
  position: relative;
  z-index: 1;
}

.mk-compact-side .mk-price {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #111;
  font-variant-numeric: tabular-nums;
}

.mk-compact-side .mk-price small {
  margin-left: 3px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: var(--mk-gold);
}

.mk-compact-side .mk-btn:not(.mk-btn-cancel) {
  border-radius: 4px;
  min-width: 48px;
  padding: 5px 10px;
  font-size: 11px;
  min-height: 28px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: #111;
  border: 1px solid #111;
  color: #f6e7a8;
  box-shadow: none;
}

.mk-compact-side .mk-btn:not(.mk-btn-cancel):hover {
  background: #222;
  border-color: #222;
  color: #fff4c2;
}

.mk-btn-cancel {
  min-width: 44px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--mk-danger) 42%, #111);
  background: color-mix(in srgb, var(--mk-danger) 9%, #fff);
  color: var(--mk-danger);
  font-size: 11px !important;
  font-weight: 750;
  letter-spacing: 0.02em;
  box-shadow: none !important;
  line-height: 1.2;
}

.mk-btn-cancel:hover {
  background: var(--mk-danger);
  border-color: var(--mk-danger);
  color: #fff;
}

.mk-list.is-grid .mk-card-foot .mk-btn-cancel {
  min-width: 44px;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: none;
}

.mk-compact-grid .is-compact .mk-thumb-ph.mk-pet-ico,
.mk-compact-grid .is-compact .mk-title-ico,
.mk-compact-grid .is-compact .mk-compact-ico,
.mk-list.is-grid .is-compact .mk-thumb-ph.mk-pet-ico,
.mk-list.is-grid .is-compact .mk-title-ico,
.mk-list.is-grid .is-compact .mk-compact-ico {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  margin: 0;
  border-radius: 5px;
  box-shadow: 2px 2px 0 rgba(17, 17, 17, 0.1);
  flex-shrink: 0;
}

.mk-compact-grid .is-compact .mk-thumb-ph.mk-pet-ico.is-svg,
.mk-list.is-grid .is-compact .mk-thumb-ph.mk-pet-ico.is-svg {
  padding: 5px !important;
  border: 1px solid rgba(17, 17, 17, 0.28) !important;
  background:
    linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--mk-rarity, #3d6b4f) 14%, #f3f6f1) 100%) !important;
}

.mk-compact-grid .is-compact .mk-thumb-ph.mk-pet-ico.is-svg .mk-pet-ico-img,
.mk-list.is-grid .is-compact .mk-thumb-ph.mk-pet-ico.is-svg .mk-pet-ico-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mk-compact-grid .is-compact .mk-title-ico,
.mk-list.is-grid .is-compact .mk-title-ico {
  border: 1px solid rgba(17, 17, 17, 0.28);
  border-radius: 5px;
}

.mk-compact-grid .is-compact .mk-title-ico img,
.mk-list.is-grid .is-compact .mk-title-ico img {
  width: 56%;
  height: 56%;
}

.mk-compact-grid .is-compact .mk-compact-ico.is-buff,
.mk-list.is-grid .is-compact .mk-compact-ico.is-buff {
  display: grid;
  place-items: center;
  border: 1px solid rgba(17, 17, 17, 0.3);
  background: linear-gradient(
    165deg,
    #fff 0%,
    color-mix(in srgb, var(--mk-buff-c, #8a5a2b) 16%, #f8f1e6) 100%
  );
  box-sizing: border-box;
}

.mk-compact-grid .is-compact .mk-compact-ico.is-buff .mk-buff-ico,
.mk-list.is-grid .is-compact .mk-compact-ico.is-buff .mk-buff-ico {
  width: 17px;
  height: 17px;
}

.mk-compact-grid .is-compact .mk-title-hit,
.mk-list.is-grid .is-compact .mk-title-hit {
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.mk-compact-grid .is-compact .mk-buff-tag,
.mk-list.is-grid .is-compact .mk-buff-tag {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.1em;
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--mk-buff-c, #8a5a2b) 45%, #111);
  background: transparent;
  color: color-mix(in srgb, var(--mk-buff-c, #8a5a2b) 75%, #111);
  flex-shrink: 0;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-type-arena_buff.is-compact .mk-compact-lead {
  align-items: flex-start;
  padding-top: 1px;
}

.mk-type-pet_item.is-compact .mk-compact-sub {
  color: color-mix(in srgb, #1a7a45 55%, var(--mk-muted));
  font-weight: 700;
}

/* —— 词条名 / 称号名：墨色 / 箔金字，少霓虹 —— */
.mk-compact-name.is-name-fx {
  --mk-name-c: #1a1714;
  color: var(--mk-name-c);
}

.mk-compact-name.is-name-fx.rarity-low { --mk-name-c: #6b6560; }
.mk-compact-name.is-name-fx.rarity-common { --mk-name-c: #3f3a35; }
.mk-compact-name.is-name-fx.rarity-rare { --mk-name-c: #1d4f8c; }
.mk-compact-name.is-name-fx.rarity-epic { --mk-name-c: #6b2d8b; }
.mk-compact-name.is-name-fx.rarity-legendary { --mk-name-c: #a16207; }
.mk-compact-name.is-name-fx.rarity-mythic { --mk-name-c: #5c4d8a; }
.mk-compact-name.is-name-fx.rarity-immortal { --mk-name-c: #92400e; }

.mk-compact-name.is-name-fx.is-title-r1 { --mk-name-c: #5b5560; }
.mk-compact-name.is-name-fx.is-title-r2 { --mk-name-c: #1d4f8c; }
.mk-compact-name.is-name-fx.is-title-r3 { --mk-name-c: #6b2d8b; }
.mk-compact-name.is-name-fx.is-title-r4 { --mk-name-c: #a16207; }
.mk-compact-name.is-name-fx.is-title-r5 { --mk-name-c: #9f1239; }

.mk-compact-name.is-name-fx.rarity-rare,
.mk-compact-name.is-name-fx.is-title-r2 {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--mk-name-c) 28%, transparent);
}

.mk-compact-name.is-name-fx.rarity-epic,
.mk-compact-name.is-name-fx.is-title-r3 {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--mk-name-c) 40%, transparent);
}

.mk-compact-name.is-name-fx.rarity-legendary,
.mk-compact-name.is-name-fx.rarity-immortal,
.mk-compact-name.is-name-fx.is-title-r4 {
  background-image: linear-gradient(
    100deg,
    #7a4e0a 0%,
    #b8860b 35%,
    #e8c547 50%,
    #b8860b 65%,
    #7a4e0a 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mkNameFoil 4.5s ease-in-out infinite;
}

.mk-compact-name.is-name-fx.rarity-mythic {
  background-image: linear-gradient(
    100deg,
    #3f3566 0%,
    #5c4d8a 40%,
    #9b8ec4 52%,
    #5c4d8a 70%,
    #3f3566 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mkNameFoil 4s ease-in-out infinite;
}

.mk-compact-name.is-name-fx.is-title-r5 {
  background-image: linear-gradient(
    100deg,
    #7f1d1d 0%,
    #9f1239 38%,
    #b8860b 52%,
    #9f1239 66%,
    #7f1d1d 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mkNameFoil 3.8s ease-in-out infinite;
}

@keyframes mkNameFoil {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-compact-name.is-name-fx {
    animation: none !important;
  }
}

.mk-buff-chip {
  --mk-buff-c: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 5px 10px 5px 6px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--mk-buff-c) 45%, #111);
  background: color-mix(in srgb, var(--mk-buff-c) 10%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-buff-c) 18%, transparent);
  vertical-align: middle;
}

.mk-buff-ico {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.mk-buff-name {
  font-size: 13px;
  font-weight: 750;
  color: var(--mk-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(18em, 46vw);
}

.mk-buff-tag {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--mk-buff-c);
  flex-shrink: 0;
}

.mk-buff-chip.rarity-low { --mk-buff-c: #78716c; }
.mk-buff-chip.rarity-common { --mk-buff-c: #64748b; }
.mk-buff-chip.rarity-rare {
  --mk-buff-c: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 0 12px rgba(59, 130, 246, 0.18);
}
.mk-buff-chip.rarity-epic {
  --mk-buff-c: #a855f7;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.4), 0 0 14px rgba(168, 85, 247, 0.28);
}
.mk-buff-chip.rarity-legendary {
  --mk-buff-c: #d97706;
  border-color: #b45309;
  background: linear-gradient(100deg, #fff7ed 0%, #fff 55%);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.55), 0 0 16px rgba(245, 158, 11, 0.4);
  animation: mkBuffGlow 1.8s ease-in-out infinite;
}
.mk-buff-chip.rarity-mythic {
  --mk-buff-c: #7c6bc4;
  border-color: #6d5fad;
  background: linear-gradient(100deg, #f5f3ff 0%, #fff 55%);
  box-shadow: 0 0 0 1px rgba(139, 127, 214, 0.45), 0 0 14px rgba(139, 127, 214, 0.3);
  animation: mkBuffGlow 1.5s ease-in-out infinite;
}
.mk-buff-chip.rarity-immortal {
  --mk-buff-c: #d97706;
  border-color: #d97706;
  background: linear-gradient(100deg, #fffbeb 0%, #fef3c7 42%, #fff 72%);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.65), 0 0 20px rgba(251, 191, 36, 0.55);
  animation: mkBuffGlow 1.2s ease-in-out infinite;
}

@keyframes mkBuffGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}

.mk-detail-media .mk-buff-chip {
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
}
.mk-detail-media .mk-buff-ico { width: 28px; height: 28px; }
.mk-detail-media .mk-buff-name { font-size: 15px; max-width: none; }
.mk-detail-media .mk-buff-tag { font-size: 11px; }

.mk-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--mk-rarity, var(--mk-gold));
}

.mk-row:hover {
  border-color: var(--mk-line-strong);
  box-shadow: 0 3px 10px rgba(17, 17, 17, 0.05);
}

.mk-list.is-grid .mk-row:not(.mk-card):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
}

.mk-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--mk-soft);
  border: 1px solid var(--mk-line);
  object-fit: contain;
  display: block;
}

.mk-thumb-ph {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--mk-soft);
  border: 1px solid var(--mk-line);
}

.mk-thumb-ph img {
  width: 18px;
  height: 18px;
  opacity: 0.45;
}

.mk-thumb-emoji {
  font-size: 22px;
  line-height: 1;
  opacity: 1 !important;
  background: #fff;
  place-items: center;
  display: grid;
}

.mk-bag-item .ph.mk-thumb-emoji {
  font-size: 20px;
  line-height: 1;
  color: inherit;
  opacity: 1;
}

/* 宠物用品图标：分类色底 + emoji */
.mk-pet-ico {
  --mk-pet-bg1: #f4f5f7;
  --mk-pet-bg2: #e8eaee;
  --mk-pet-ring: #c5cad3;
  --mk-pet-ink: #2a3140;
  position: relative;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--mk-pet-ring) 55%, transparent);
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(255, 255, 255, 0.85) 0%, transparent 52%),
    linear-gradient(160deg, var(--mk-pet-bg1) 0%, var(--mk-pet-bg2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 4px 12px rgba(28, 36, 52, 0.08);
  color: var(--mk-pet-ink) !important;
  opacity: 1 !important;
  line-height: 1;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

.mk-pet-ico-glow {
  position: absolute;
  inset: auto -20% -35% -20%;
  height: 70%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--mk-pet-ring) 35%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.mk-pet-ico-glyph {
  position: relative;
  z-index: 1;
  display: block;
  transform: translateY(0.5px);
  filter: drop-shadow(0 1px 1px rgba(20, 28, 40, 0.12));
}

.mk-pet-ico.is-emoji {
  font-size: 22px !important;
  font-weight: 400;
}

.mk-pet-ico.is-mark {
  font-size: 14px !important;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
}

.mk-pet-ico[data-cat="food"] {
  --mk-pet-bg1: #fff7ea;
  --mk-pet-bg2: #ffe0b8;
  --mk-pet-ring: #f0a45a;
  --mk-pet-ink: #8a4a12;
}
.mk-pet-ico[data-cat="water"] {
  --mk-pet-bg1: #eef7ff;
  --mk-pet-bg2: #cfe6ff;
  --mk-pet-ring: #5ba4e8;
  --mk-pet-ink: #1d5f9a;
}
.mk-pet-ico[data-cat="toy"] {
  --mk-pet-bg1: #f8efff;
  --mk-pet-bg2: #e4ccff;
  --mk-pet-ring: #b07ae8;
  --mk-pet-ink: #6a2d9e;
}
.mk-pet-ico[data-cat="clean"] {
  --mk-pet-bg1: #eefcf5;
  --mk-pet-bg2: #c7f0db;
  --mk-pet-ring: #4ecf8e;
  --mk-pet-ink: #1d7a4d;
}
.mk-pet-ico[data-cat="heal"] {
  --mk-pet-bg1: #fff0f0;
  --mk-pet-bg2: #ffd0d0;
  --mk-pet-ring: #ef7a7a;
  --mk-pet-ink: #a12e2e;
}
.mk-pet-ico[data-cat="energy"] {
  --mk-pet-bg1: #fff9e6;
  --mk-pet-bg2: #ffe39a;
  --mk-pet-ring: #e6b422;
  --mk-pet-ink: #8a6500;
}
.mk-pet-ico[data-cat="explore"] {
  --mk-pet-bg1: #fff8e8;
  --mk-pet-bg2: #ffe4b0;
  --mk-pet-ring: #d4a017;
  --mk-pet-ink: #7a5a00;
}
.mk-pet-ico[data-cat="revive"] {
  --mk-pet-bg1: #f3f4f8;
  --mk-pet-bg2: #d9dde8;
  --mk-pet-ring: #8b93a8;
  --mk-pet-ink: #3a4256;
}

.mk-thumb-ph.mk-pet-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.mk-thumb-ph.mk-pet-ico.is-emoji {
  font-size: 20px !important;
}

.mk-bag-item .ph.mk-pet-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.mk-bag-item .ph.mk-pet-ico.is-emoji {
  font-size: 20px !important;
}

.mk-list.is-grid .mk-card-media > .mk-thumb-ph.mk-pet-ico,
.mk-list.is-grid .mk-card-media > .mk-title-ico {
  width: 72%;
  height: 72%;
  max-width: 132px;
  max-height: 132px;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(28, 36, 52, 0.12);
}

.mk-pet-ico.is-svg {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: 0 10px 22px rgba(28, 36, 52, 0.1) !important;
  overflow: hidden;
}

.mk-pet-ico.is-svg .mk-pet-ico-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mk-title-ico {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(160deg, #f7f0de, #efe2c0);
  border: 1px solid rgba(184, 134, 11, 0.28);
  box-shadow: 0 10px 22px rgba(184, 134, 11, 0.14);
}

.mk-title-ico[data-r="2"] { background: linear-gradient(160deg, #eaf6ef, #d5ebdd); border-color: rgba(61, 154, 95, 0.35); }
.mk-title-ico[data-r="3"] { background: linear-gradient(160deg, #e8f1fa, #d3e4f5); border-color: rgba(59, 130, 196, 0.35); }
.mk-title-ico[data-r="4"] { background: linear-gradient(160deg, #f1eafc, #e2d6f8); border-color: rgba(139, 92, 246, 0.35); }
.mk-title-ico[data-r="5"] { background: linear-gradient(160deg, #fff4d6, #f0d78a); border-color: rgba(212, 160, 23, 0.45); }

.mk-title-ico img {
  width: 54%;
  height: 54%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(17, 17, 17, 0.12));
}

.mk-list.is-grid .mk-card-media > .mk-title-ico {
  transition: transform 0.22s ease;
}

.mk-list.is-grid .mk-row.mk-card:hover .mk-card-media > .mk-title-ico {
  transform: scale(1.04);
}

.mk-bag-item .ph.mk-pet-ico.is-svg {
  padding: 0;
  border: 0;
  background: transparent;
}

.mk-bag-item .ph.mk-pet-ico.is-svg .mk-pet-ico-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.mk-detail-media .mk-thumb-ph.mk-pet-ico {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 12px 28px rgba(28, 36, 52, 0.12);
}

.mk-detail-media .mk-thumb-ph.mk-pet-ico.is-emoji {
  font-size: 44px !important;
}

.mk-detail-media .mk-thumb-ph.mk-pet-ico.is-mark {
  font-size: 28px !important;
}

.mk-meta {
  min-width: 0;
}

.mk-meta h3 {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mk-text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-meta .mk-line2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
  font-size: 11px;
  color: var(--mk-muted);
  line-height: 1.35;
}

.mk-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--mk-rarity, var(--mk-gold)) 72%, #111);
  background: color-mix(in srgb, var(--mk-rarity, var(--mk-gold)) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--mk-rarity, var(--mk-gold)) 28%, transparent);
}

.mk-attrs {
  display: inline-block;
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 700;
  color: #1a7a45;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-list.is-grid .mk-attrs {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  text-overflow: unset;
  overflow: hidden;
  max-width: 100%;
  line-height: 1.4;
}

.mk-meta .mk-line2 a {
  color: var(--mk-gold);
  text-decoration: none;
  font-weight: 600;
}

.mk-meta .mk-line2 a:hover {
  text-decoration: underline;
}

.mk-side {
  text-align: right;
  display: grid;
  gap: 4px;
  justify-items: end;
  align-content: center;
  flex-shrink: 0;
}

.mk-price {
  font-family: var(--mk-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--mk-gold);
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
}

.mk-price small {
  font-size: 10px;
  color: var(--mk-muted);
  font-family: var(--mk-font);
  font-weight: 500;
  margin-left: 1px;
}

.mk-side .mk-btn {
  min-width: 52px;
  justify-content: center;
  padding: 5px 10px;
}

.mk-empty {
  text-align: center;
  padding: 28px 14px;
  color: rgba(26, 23, 20, 0.55);
  border: 1px dashed rgba(17, 17, 17, 0.28);
  border-radius: 4px;
  background:
    radial-gradient(rgba(26, 23, 20, 0.03) 0.5px, transparent 0.7px),
    var(--mk-ticket);
  background-size: 5px 5px, auto;
  font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.mk-empty img {
  width: 36px;
  height: 36px;
  opacity: 0.4;
  margin-bottom: 8px;
}

.mk-pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}

.mk-pager .mk-btn,
.mk-pager button {
  border-radius: 3px;
  box-shadow: none;
  min-width: 34px;
}

.mk-note {
  margin-top: 16px;
  font-size: 11px;
  color: rgba(26, 23, 20, 0.55);
  line-height: 1.7;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 4px;
  padding: 10px 12px;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 17px,
      rgba(17, 17, 17, 0.035) 17px 18px
    ),
    color-mix(in srgb, var(--mk-ticket) 80%, #fff);
}

.mk-note img {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  opacity: 0.55;
  margin-right: 4px;
}

.mk-ico-inline {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  opacity: 0.55;
}

/* Modal */
.mk-mask {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.42);
  backdrop-filter: blur(2px);
  z-index: 1200;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}

.mk-mask.show {
  display: flex;
}

.mk-modal {
  width: min(480px, 100%);
  max-height: min(86vh, 700px);
  overflow: auto;
  background-color: var(--mk-ticket);
  background-image:
    radial-gradient(rgba(26, 23, 20, 0.035) 0.5px, transparent 0.7px),
    linear-gradient(165deg, #fffef9 0%, var(--mk-ticket) 100%);
  background-size: 4px 4px, auto;
  border: 1px solid rgba(17, 17, 17, 0.22);
  border-radius: 6px;
  padding: 16px;
  color: var(--mk-text);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    4px 4px 0 rgba(17, 17, 17, 0.12);
  animation: mk-up 0.2s ease;
}

@keyframes mk-up {
  from { transform: translateY(10px); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}

.mk-modal h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-family: var(--mk-display);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mk-modal .mk-modal-sub {
  margin: 0 0 14px;
  color: rgba(26, 23, 20, 0.55);
  font-size: 13px;
  line-height: 1.45;
}

.mk-form-row {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}

.mk-form-row label {
  font-size: 12px;
  color: rgba(26, 23, 20, 0.55);
  font-weight: 750;
  letter-spacing: 0.04em;
}

.mk-form-row input,
.mk-form-row select {
  border: 1px solid rgba(17, 17, 17, 0.2);
  background: #fffef8;
  color: var(--mk-text);
  border-radius: 3px;
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
}

.mk-form-row input:focus,
.mk-form-row select:focus,
.mk-select:focus {
  border-color: #111;
  outline: none;
}

/* 上架弹窗：紧凑布局 */
.mk-sell-modal {
  width: min(400px, 100%);
  max-height: min(84vh, 640px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  border-radius: 6px;
  border-color: rgba(17, 17, 17, 0.22);
}

.mk-sell-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 8px;
  border-bottom: 1px dashed rgba(17, 17, 17, 0.2);
  background: color-mix(in srgb, var(--mk-ticket) 70%, #fff);
  flex: 0 0 auto;
}

.mk-sell-head h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 800;
}

.mk-sell-modal .mk-modal-sub {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--mk-muted);
}

.mk-sell-x {
  appearance: none;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(17, 17, 17, 0.25);
  border-radius: 3px;
  background: #fffef8;
  color: #1a1714;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none;
}

.mk-sell-x:hover {
  color: #f6e7a8;
  border-color: #111;
  background: #111;
}

.mk-sell-section {
  position: relative;
  padding: 6px 12px 0;
  flex: 0 0 auto;
}

.mk-sell-lab {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  color: var(--mk-gold);
  margin-bottom: 4px;
}

.mk-sell-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.mk-sell-pills::-webkit-scrollbar {
  display: none;
}

.mk-sell-pills .mk-type-pill {
  flex: 0 0 auto;
  padding: 5px 10px;
  font-size: 11.5px;
  border-radius: 999px;
}

.mk-sell-pills .mk-type-pill.active {
  background: #111;
  border-color: #111;
  color: #fff;
}

.mk-sell-type-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mk-sell-bag-sec {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  padding-bottom: 0;
}

.mk-sell-bag-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.mk-sell-bag-bar .mk-sell-lab {
  margin: 0;
  flex-shrink: 0;
}

.mk-sell-modal .mk-bag-q {
  width: min(148px, 46%);
  margin: 0;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 8px;
  background: var(--mk-soft);
}

.mk-sell-modal .mk-bag-list {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(28vh, 180px);
  gap: 3px;
  margin: 0;
  padding: 2px;
  align-content: start;
  border: 1px solid var(--mk-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--mk-soft) 55%, #fff);
}

.mk-sell-modal .mk-bag-item {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 4px 7px;
  border-radius: 8px;
  background: #fff;
  min-width: 0;
}

.mk-sell-modal .mk-empty {
  padding: 10px 8px;
  font-size: 12px;
}

.mk-sell-modal .mk-bag-item.is-title.is-lite {
  grid-template-columns: minmax(0, 1fr) auto;
}

.mk-sell-modal .mk-bag-item.is-arena_buff {
  grid-template-columns: 30px minmax(0, 1fr) auto;
}

.mk-sell-modal .mk-bag-item img,
.mk-sell-modal .mk-bag-item .ph,
.mk-sell-modal .mk-bag-cos,
.mk-sell-modal .mk-bag-frame,
.mk-sell-modal .mk-bag-buff {
  width: 36px;
  height: 36px;
  border-radius: 7px;
}

.mk-sell-modal .mk-bag-item.is-arena_buff .mk-bag-buff {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.mk-sell-modal .mk-bag-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mk-sell-modal .mk-bag-item strong,
.mk-sell-modal .mk-bag-name,
.mk-sell-modal .mk-bag-title-name {
  font-size: 12.5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-sell-modal .mk-bag-sub {
  font-size: 10.5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-sell-modal .mk-bag-peek,
.mk-sell-modal .mk-bag-pick {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 7px;
  flex-shrink: 0;
}

.mk-sell-modal .mk-bag-more {
  padding: 7px;
  font-size: 11px;
  border-radius: 8px;
}

.mk-sell-fields {
  display: grid;
  grid-template-columns: 0.75fr 1fr 1.2fr;
  gap: 8px;
  align-items: start;
  padding: 8px 12px 0;
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.mk-sell-fields .mk-form-row {
  margin: 0;
  gap: 4px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mk-sell-fields .mk-form-row label {
  font-size: 10.5px;
  font-weight: 750;
  color: var(--mk-gold);
  letter-spacing: 0.04em;
}

.mk-sell-fields .mk-form-row input,
.mk-sell-fields .mk-form-row select {
  padding: 7px 8px;
  font-size: 13px;
  border-radius: 8px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.mk-sell-price-tip {
  margin: 6px 12px 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--mk-muted, #8a8070) 92%, #666);
  flex: 0 0 auto;
}

.mk-sell-price-tip.is-err {
  color: #c45c4a;
  font-weight: 650;
}

.mk-sell-price input.is-invalid {
  border-color: #c45c4a;
  box-shadow: 0 0 0 1px color-mix(in srgb, #c45c4a 35%, transparent);
}

.mk-sell-actions {
  margin: 10px 12px 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--mk-gold) 14%, var(--mk-line));
  justify-content: stretch;
  gap: 8px;
  flex: 0 0 auto;
}

.mk-sell-actions .mk-btn {
  flex: 1;
  justify-content: center;
  min-height: 36px;
  border-radius: 9px;
  font-weight: 750;
}

.mk-sell-actions .mk-btn-primary {
  flex: 1.35;
  box-shadow: none;
}

/* 我的背包弹窗 — 账本 / 票根 */
.mk-mybag-modal {
  --mk-ticket: #f7f2e8;
  position: relative;
  width: min(460px, 100%);
  max-height: min(86vh, 700px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(17, 17, 17, 0.24);
  background-color: var(--mk-ticket);
  background-image:
    radial-gradient(rgba(26, 23, 20, 0.035) 0.55px, transparent 0.75px),
    linear-gradient(165deg, #fffef9 0%, var(--mk-ticket) 58%, #ebe2d2 100%);
  background-size: 4px 4px, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    4px 4px 0 rgba(17, 17, 17, 0.1);
}

.mk-mybag-modal::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 2;
  background:
    repeating-linear-gradient(
      180deg,
      var(--mk-gold) 0 3px,
      color-mix(in srgb, var(--mk-gold) 55%, #111) 3px 4px
    );
  pointer-events: none;
}

.mk-mybag-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 10px 14px;
  border-bottom: 1px dashed rgba(17, 17, 17, 0.22);
  background: color-mix(in srgb, var(--mk-ticket) 55%, #fff);
  flex: 0 0 auto;
}

.mk-mybag-head-main {
  min-width: 0;
}

.mk-mybag-kicker {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--mk-gold) 70%, #111);
}

.mk-mybag-head h3 {
  margin: 0 0 2px;
  font-family: var(--mk-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #111;
}

.mk-mybag-modal .mk-modal-sub {
  margin: 0;
  font-size: 11px;
  color: var(--mk-muted);
  letter-spacing: 0.02em;
}

.mk-mybag-tabs-wrap {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 10px 0 12px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  background: color-mix(in srgb, var(--mk-ticket) 40%, #fff);
}

.mk-mybag-tabs-wrap::before,
.mk-mybag-tabs-wrap::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 1px;
  width: 22px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.mk-mybag-tabs-wrap::before {
  left: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mk-ticket) 40%, #fff) 30%, transparent);
}

.mk-mybag-tabs-wrap::after {
  right: 10px;
  background: linear-gradient(270deg, color-mix(in srgb, var(--mk-ticket) 40%, #fff) 30%, transparent);
}

.mk-mybag-tabs-wrap.can-left::before { opacity: 1; }
.mk-mybag-tabs-wrap.can-right::after { opacity: 1; }

.mk-mybag-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0 26px 8px 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 17, 17, 0.28) transparent;
  cursor: grab;
  outline: none;
  border: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 3px;
  background: #fffef8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.mk-mybag-tabs.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

.mk-mybag-tabs::-webkit-scrollbar {
  height: 3px;
}

.mk-mybag-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.mk-mybag-tabs::-webkit-scrollbar-thumb {
  background: rgba(17, 17, 17, 0.28);
  border-radius: 0;
}

.mk-mybag-tabs-nav {
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% + 2px));
  z-index: 3;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.28);
  border-radius: 2px;
  background: #fffef8;
  color: #111;
  font-size: 15px;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
}

.mk-mybag-tabs-nav:hover {
  border-color: #111;
  background: #111;
  color: #f6e7a8;
}

.mk-mybag-tabs-nav.is-prev { left: 14px; }
.mk-mybag-tabs-nav.is-next { right: 12px; }

.mk-mybag-tabs-nav[hidden] { display: none !important; }

.mk-mybag-tab {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-right: 1px dotted rgba(17, 17, 17, 0.16);
  background: transparent;
  color: rgba(26, 23, 20, 0.55);
  border-radius: 0;
  padding: 7px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
}

.mk-mybag-tab:last-child {
  border-right: 0;
}

.mk-mybag-tab:hover {
  color: #111;
  background: rgba(17, 17, 17, 0.04);
}

.mk-mybag-tab.active {
  background: #111;
  color: #f6e7a8;
  font-weight: 800;
}

.mk-mybag-tab-n {
  font-size: 10px;
  font-weight: 800;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.mk-mybag-tab.active .mk-mybag-tab-n {
  opacity: 0.9;
  color: #fff4c2;
}

@media (max-width: 640px) {
  .mk-mybag-tabs {
    padding-right: 0;
    scrollbar-width: none;
  }
  .mk-mybag-tabs::-webkit-scrollbar { display: none; }
  .mk-mybag-tabs-nav { display: none !important; }
}

.mk-mybag-body {
  flex: 1 1 auto;
  min-height: 180px;
  max-height: min(52vh, 440px);
  overflow: auto;
  padding: 10px 12px 12px 14px;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 27px,
      rgba(17, 17, 17, 0.035) 27px 28px
    );
}

.mk-mybag-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mk-mybag-grid {
  display: grid;
  gap: 8px;
}

.mk-mybag-grid.is-showcase {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.mk-mybag-grid.is-rows {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mk-mybag-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 8px 7px 7px;
  border: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 3px;
  background-color: #fffef8;
  background-image:
    radial-gradient(rgba(26, 23, 20, 0.03) 0.45px, transparent 0.7px);
  background-size: 3px 3px;
  text-align: left;
  min-width: 0;
  box-shadow: 2px 2px 0 rgba(17, 17, 17, 0.06);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

/* 装扮 / 头像框：图在上、名在下 */
.mk-mybag-card.is-showcase .mk-mybag-lead {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

/* 其余类型：图标与名称同一排，一排两个 */
.mk-mybag-card.is-row {
  flex-direction: column;
  gap: 3px;
  padding: 6px 7px 6px 8px;
  min-width: 0;
}

.mk-mybag-card.is-row .mk-mybag-lead {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mk-mybag-card.is-row .mk-mybag-media {
  width: 32px;
  height: 32px;
  max-height: none;
  aspect-ratio: auto;
  flex: 0 0 32px;
}

.mk-mybag-card.is-row .mk-mybag-media .emoji {
  font-size: 16px;
}

.mk-mybag-card.is-row .mk-mybag-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.mk-mybag-card.is-row .mk-mybag-name {
  font-size: 11px;
  -webkit-line-clamp: 1;
}

.mk-mybag-card.is-row .mk-mybag-sub {
  font-size: 9.5px;
}

.mk-mybag-card.is-row .mk-mybag-stamp {
  top: 3px;
  right: 4px;
  transform: rotate(6deg);
  font-size: 8px;
  padding: 0 3px;
}

.mk-mybag-card.is-row .mk-mybag-tags {
  padding-left: 0;
  gap: 2px;
}

.mk-mybag-card.is-row .mk-mybag-tags span {
  font-size: 8.5px;
  padding: 0 3px;
}

.mk-mybag-card.is-row .mk-mybag-go {
  margin-top: 0;
  padding-top: 2px;
  font-size: 9px;
  letter-spacing: 0.06em;
}

.mk-mybag-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(17, 17, 17, 0.18);
  transform: scaleY(0.35);
  transform-origin: top;
  transition: transform 0.14s ease, background 0.14s ease;
}

.mk-mybag-card:hover::before,
.mk-mybag-card:focus-within::before,
.mk-mybag-card.is-eq::before,
.mk-mybag-card.is-trade::before {
  transform: scaleY(1);
}

.mk-mybag-card.is-eq::before,
.mk-mybag-card.is-trade::before {
  background: var(--mk-gold);
}

.mk-mybag-card.is-eq {
  border-color: color-mix(in srgb, var(--mk-gold) 42%, #111);
  background-color: color-mix(in srgb, var(--mk-gold) 8%, #fffef8);
}

.mk-mybag-card.is-cosmetic { --mk-bag-tint: #6e5630; }
.mk-mybag-card.is-fragment { --mk-bag-tint: #6e5630; }
.mk-mybag-card.is-pet_item { --mk-bag-tint: #2f6b45; }
.mk-mybag-card.is-frame { --mk-bag-tint: #3f4d5c; }
.mk-mybag-card.is-title { --mk-bag-tint: #8a6a12; }
.mk-mybag-card.is-arena_buff { --mk-bag-tint: #6e4524; }

.mk-mybag-card[class*="is-"]:not(.is-eq):not(.is-trade):hover::before {
  background: var(--mk-bag-tint, rgba(17, 17, 17, 0.35));
}

.mk-mybag-stamp {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--mk-gold) 55%, #111);
  border: 1.5px solid color-mix(in srgb, var(--mk-gold) 55%, #111);
  border-radius: 2px;
  padding: 1px 4px;
  background: color-mix(in srgb, var(--mk-ticket) 50%, #fff);
  transform: rotate(8deg);
  line-height: 1.2;
  pointer-events: none;
}

.mk-mybag-media {
  width: 100%;
  aspect-ratio: 1;
  max-height: 72px;
  border-radius: 2px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.mk-mybag-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mk-mybag-cos {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #efe8da;
}

.mk-mybag-cos-bg,
.mk-mybag-cos-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mk-mybag-cos-bg {
  object-fit: cover;
  opacity: 0.9;
}

.mk-mybag-cos-fg {
  object-fit: contain;
}

.mk-mybag-media .emoji {
  font-size: 24px;
  line-height: 1;
}

.mk-mybag-meta {
  min-width: 0;
}

.mk-mybag-name {
  font-size: 11.5px;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  letter-spacing: 0.01em;
}

.mk-mybag-qty {
  margin-left: 3px;
  font-style: normal;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--mk-gold) 55%, #111);
}

.mk-mybag-sub {
  margin-top: 2px;
  font-size: 10px;
  color: var(--mk-muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.mk-mybag-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 1px;
}

.mk-mybag-tags span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px dashed rgba(17, 17, 17, 0.28);
  color: rgba(17, 17, 17, 0.62);
  background: color-mix(in srgb, var(--mk-ticket) 45%, #fff);
}

.mk-mybag-tags span.is-ok {
  color: #2f6b45;
  border-color: color-mix(in srgb, #2f6b45 55%, #111);
  border-style: solid;
  background: color-mix(in srgb, #2f6b45 8%, #fff);
}

.mk-mybag-tags span.is-no {
  color: #8a3a1a;
  border-color: color-mix(in srgb, #8a3a1a 45%, #111);
  background: color-mix(in srgb, #8a3a1a 7%, #fff);
}

.mk-mybag-actions {
  margin: 0;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 14px;
  border-top: 1px dashed rgba(17, 17, 17, 0.2);
  background: color-mix(in srgb, var(--mk-ticket) 50%, #fff);
  justify-content: stretch;
  gap: 8px;
  flex: 0 0 auto;
}

.mk-mybag-actions .mk-btn {
  flex: 1;
  justify-content: center;
  min-height: 36px;
  border-radius: 3px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mk-mybag-card.is-trade {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--mk-gold) 38%, #111);
}

.mk-mybag-card.is-trade:hover,
.mk-mybag-card.is-trade:focus-visible {
  border-color: #111;
  box-shadow: 3px 3px 0 rgba(17, 17, 17, 0.1);
  transform: translate(-1px, -1px);
  outline: none;
}

.mk-mybag-go {
  margin-top: auto;
  padding-top: 5px;
  border-top: 1px dotted rgba(17, 17, 17, 0.2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #111;
  text-align: right;
}

.mk-bag-q {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--mk-line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}
.mk-bag-q:focus {
  outline: none;
  border-color: var(--mk-line-strong);
}

.mk-bag-list {
  display: grid;
  gap: 6px;
  max-height: 280px;
  overflow: auto;
  margin-bottom: 4px;
  padding: 2px;
}

.mk-bag-more {
  appearance: none;
  width: 100%;
  border: 1px dashed var(--mk-line-strong);
  background: #fff;
  color: var(--mk-muted);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.mk-bag-more:hover {
  border-color: #111;
  color: #111;
}
.mk-bag-end {
  text-align: center;
  font-size: 11px;
  color: var(--mk-muted);
  padding: 6px;
}

.mk-bag-cos,
.mk-bag-frame {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f0ea;
  border: 1px solid var(--mk-line);
  flex-shrink: 0;
}
.mk-bag-frame {
  border-radius: 50%;
  overflow: hidden;
  background: #ebe6dc;
}
.mk-bag-item .mk-bag-cos-bg,
.mk-bag-item .mk-bag-cos-fg,
.mk-bag-item .mk-bag-frame-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.mk-bag-item .mk-bag-cos-bg {
  object-fit: cover;
  opacity: 0.9;
}
.mk-bag-item .mk-bag-frame-fg {
  object-fit: contain;
}

.mk-bag-buff {
  --mk-buff-c: #64748b;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--mk-buff-c) 40%, var(--mk-line));
  background: color-mix(in srgb, var(--mk-buff-c) 12%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-buff-c) 16%, transparent);
  flex-shrink: 0;
}
.mk-bag-buff .mk-buff-ico {
  width: 18px;
  height: 18px;
  display: block;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.mk-bag-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mk-bag-name {
  font-weight: 750;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-bag-sub {
  font-size: 12px;
  color: var(--mk-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-bag-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--mk-line);
  cursor: pointer;
  background: var(--mk-soft);
  transition: border-color 0.12s ease, background 0.12s ease;
  min-width: 0;
}

.mk-bag-item.is-arena_buff {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.mk-bag-item:hover {
  border-color: var(--mk-line-strong);
}

.mk-bag-item.active {
  border-color: #111;
  background: color-mix(in srgb, var(--mk-gold) 12%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mk-gold) 35%, transparent);
}

.mk-bag-item img,
.mk-bag-item .ph {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--mk-line);
}

.mk-bag-item .ph {
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--mk-muted);
}

.mk-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

#mkBargainMask,
#mkBargainInboxMask {
  z-index: 1275;
}

#mkConfirmMask {
  z-index: 1285;
}

.mk-confirm-modal {
  max-width: 380px;
  text-align: left;
}

.mk-confirm-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--mk-text);
}

.mk-confirm-body {
  margin: 0 0 4px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--mk-muted);
  white-space: pre-line;
}

.mk-confirm-modal .mk-modal-actions {
  margin-top: 16px;
  justify-content: stretch;
}

.mk-confirm-modal .mk-modal-actions .mk-btn {
  flex: 1;
  justify-content: center;
}

.mk-confirm-modal.is-danger #mkConfirmOk {
  background: #c62828;
  border-color: #c62828;
  color: #fff;
}

.mk-confirm-modal.is-danger #mkConfirmOk:hover {
  background: #a61f1f;
  border-color: #a61f1f;
}

.mk-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(16px);
  background: #111;
  border: 1px solid #111;
  color: #f6e7a8;
  padding: 10px 14px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  z-index: 1300;
  opacity: 0;
  pointer-events: none;
  transition: 0.22s ease;
  box-shadow: 3px 3px 0 rgba(184, 134, 11, 0.35);
}

.mk-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mk-type-cosmetic { --mk-rarity: #c4a574; }
.mk-type-pet_item { --mk-rarity: #6aaa78; }
.mk-type-frame { --mk-rarity: #7a8fa3; }
.mk-type-title { --mk-rarity: #b8860b; }
.mk-type-arena_buff { --mk-rarity: #b07a4a; }

@media (min-width: 720px) {
  .mk-mask {
    align-items: center;
  }
  .mk-modal {
    border-radius: 16px;
  }
  .mk-list.is-grid {
    grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
    gap: 16px;
  }
  .mk-list:not(.is-grid) .mk-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: 8px 12px 8px 14px;
    gap: 10px 12px;
  }
  .mk-list:not(.is-grid) .mk-thumb,
  .mk-list:not(.is-grid) .mk-thumb-ph {
    width: 44px;
    height: 44px;
  }
  .mk-meta h3 {
    font-size: 14px;
  }
  .mk-price {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .mk-wrap {
    padding: 8px 10px calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .mk-hero {
    margin-bottom: 8px;
    padding: 10px 12px 8px;
    border-radius: 12px;
  }

  .mk-kicker {
    font-size: 10px;
    padding: 3px 8px;
    margin-bottom: 4px;
    letter-spacing: 0.1em;
  }

  .mk-kicker img {
    width: 13px;
    height: 13px;
  }

  .mk-sub {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mk-stats {
    margin-top: 8px;
    gap: 5px;
  }

  .mk-stats span {
    padding: 4px 8px;
    font-size: 10px;
  }

  .mk-stats b {
    font-size: 13px;
  }

  .mk-toolbar {
    gap: 6px;
    margin-bottom: 6px;
  }

  .mk-tabs {
    width: 100%;
    flex: 1 1 100%;
  }

  .mk-tab {
    padding: 6px 10px;
    font-size: 12px;
  }

  .mk-tab.active {
    box-shadow: none;
  }

  .mk-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 6px;
  }

  .mk-actions .mk-btn {
    justify-content: center;
    min-height: 36px;
  }

  .mk-filters {
    margin-bottom: 6px;
    padding: 6px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .mk-type-tabs {
    flex: 1 1 100%;
    order: 1;
  }

  .mk-type-tab {
    padding: 6px 10px;
    font-size: 11.5px;
  }

  .mk-filters .mk-dd {
    flex: 0 0 auto;
    margin-left: auto;
    order: 0;
    min-width: 0;
  }

  .mk-dd-btn {
    min-width: 0;
    width: auto;
    padding: 7px 9px;
  }

  .mk-dd-menu {
    left: auto;
    right: 0;
    min-width: 148px;
    width: max-content;
    max-width: min(240px, calc(100vw - 24px));
  }

  #mkSortDd .mk-dd-menu {
    left: auto;
    right: 0;
  }

  .mk-list:not(.is-grid) {
    gap: 4px;
  }

  .mk-list.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mk-list.is-grid.is-all {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mk-rail-track {
    padding: 2px 30px 8px;
    gap: 10px;
  }

  .mk-rail-track .mk-card.is-showcase {
    flex-basis: 138px;
    width: 138px;
  }

  .mk-rail-btn {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }

  .mk-rail-hint {
    display: none;
  }

  .mk-list.is-grid .mk-row.mk-card {
    border-radius: 14px;
  }

  .mk-list.is-grid .mk-card-body {
    padding: 9px 10px 6px;
  }

  .mk-list.is-grid .mk-card-body h3 {
    font-size: 12.5px;
  }

  .mk-list.is-grid .mk-row.mk-card.is-compact {
    --mk-compact-pad-x: 9px;
    --mk-compact-pad-y: 8px;
    padding: var(--mk-compact-pad-y) var(--mk-compact-pad-x) 0;
    gap: 5px;
  }

  .mk-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    justify-content: stretch;
  }

  .mk-list.is-grid .mk-row.mk-card.is-compact,
  .mk-compact-grid .mk-row.mk-card.is-compact {
    max-width: none;
    justify-self: stretch;
  }

  .mk-list.is-grid.is-sm .mk-rail-track .mk-card.is-showcase {
    flex-basis: 108px;
    width: 108px;
  }

  .mk-list.is-grid.is-sm .mk-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mk-list.is-grid.is-sm .mk-row.mk-card.is-compact {
    max-width: none;
  }

  .mk-compact-name {
    font-size: 12px;
  }

  .mk-compact-side .mk-price {
    font-size: 13.5px;
  }

  .mk-buff-name {
    font-size: 12px;
  }

  /* 手机端行列表：保持三列，避免价格折到下一行占高度 */
  .mk-list:not(.is-grid) .mk-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 7px 8px;
    padding: 6px 8px 6px 10px;
    border-radius: 9px;
    min-height: 48px;
  }

  .mk-title-hit .eo-title-badge .eo-title-text {
    max-width: min(9em, 38vw);
  }

  .mk-list:not(.is-grid) .mk-row::before {
    top: 6px;
    bottom: 6px;
  }

  .mk-list:not(.is-grid) .mk-thumb,
  .mk-list:not(.is-grid) .mk-thumb-ph {
    width: 36px;
    height: 36px;
    border-radius: 7px;
  }

  .mk-list:not(.is-grid) .mk-thumb-ph img {
    width: 15px;
    height: 15px;
  }

  .mk-meta h3 {
    font-size: 12.5px;
    margin-bottom: 1px;
  }

  .mk-meta .mk-line2 {
    font-size: 10.5px;
    gap: 2px 6px;
  }

  .mk-tag {
    padding: 0 5px;
    font-size: 9.5px;
  }

  .mk-side {
    gap: 3px;
  }

  .mk-price {
    font-size: 14px;
  }

  .mk-price small {
    font-size: 9px;
  }

  .mk-side .mk-btn {
    min-width: 48px;
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 7px;
  }

  .mk-empty {
    padding: 22px 12px;
    border-radius: 10px;
  }

  .mk-note {
    font-size: 10.5px;
    margin-top: 12px;
  }

  .mk-mask {
    padding: 0;
    align-items: flex-end;
  }

  .mk-modal {
    width: 100%;
    max-height: min(92vh, 780px);
    border-radius: 16px 16px 0 0;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .mk-sell-modal {
    width: 100%;
    max-height: min(92vh, 780px);
    border-radius: 16px 16px 0 0;
    padding: 0;
  }

  .mk-sell-fields {
    grid-template-columns: 0.7fr 1fr 1.15fr;
    gap: 6px;
    padding: 8px 10px 0;
  }

  .mk-sell-fields .mk-form-row select {
    font-size: 12px;
    padding: 7px 6px;
  }

  .mk-sell-actions {
    margin: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .mk-sell-modal .mk-bag-list {
    max-height: min(32vh, 200px);
  }
}

@media (max-width: 380px) {
  .mk-actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .mk-actions .mk-btn {
    min-width: 0;
    padding: 6px 8px;
    font-size: 11.5px;
  }

  .mk-actions .mk-btn img {
    width: 14px;
    height: 14px;
  }

  .mk-list:not(.is-grid) .mk-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .mk-list:not(.is-grid) .mk-thumb,
  .mk-list:not(.is-grid) .mk-thumb-ph {
    width: 32px;
    height: 32px;
  }

  .mk-list.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mk-x7 {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px dashed var(--mk-line-strong);
  border-radius: 10px;
  background: rgba(17, 17, 17, 0.02);
}

.mk-x7-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mk-x7-lab {
  font-size: 12px;
  color: var(--mk-muted);
  margin: 0;
}

.mk-x7-sel {
  min-width: 140px;
  max-width: 240px;
  padding: 6px 8px;
  border: 1px solid var(--mk-line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}

.mk-x7-n {
  font-size: 12px;
  color: var(--mk-muted);
  font-variant-numeric: tabular-nums;
}

.mk-sf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border: 1px solid var(--mk-line);
  color: var(--mk-muted);
  background: #fff;
}

.mk-sf[data-v="1"],
.mk-row[data-sf="1"] .mk-sf {
  color: #111;
  border-color: rgba(17, 17, 17, 0.35);
  background: rgba(17, 17, 17, 0.06);
}

.mk-row[data-sf="1"] {
  box-shadow: inset 3px 0 0 rgba(17, 17, 17, 0.35);
}


/* =========================================================
   地球Online 主站黑白配色覆盖
   不改：.mk-kicker 市集执照；卡片称号 / 词条相关样式
   ========================================================= */

.mk-page {
  background: var(--page-bg, #f7f8fa);
  color: var(--t0, #111);
  font-family: var(--font-ui, "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif);
}

.mk-wrap {
  padding: 16px 14px 48px;
}

/* Hero 壳：白底硬边；执照角标仍用下方原规则 */
.mk-hero {
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid #111;
  border-radius: 2px;
  box-shadow: 6px 6px 0 #111;
}

.mk-hero::before {
  width: 3px;
  background: #111;
}

.mk-hero::after {
  display: none;
}

.mk-hero-mark {
  font-family: var(--font-code, "IBM Plex Mono", Consolas, monospace);
  color: rgba(0, 0, 0, 0.38);
  letter-spacing: 0.14em;
}

.mk-title {
  font-family: var(--font-ui, "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif);
  letter-spacing: 0.01em;
  padding-left: 0;
}

.mk-title span {
  color: #111;
  border-bottom: 2px solid #111;
}

.mk-sub {
  color: rgba(0, 0, 0, 0.55);
  padding-left: 0;
}

.mk-stats {
  margin-left: 0;
  margin-right: 0;
  border: 1px solid #111;
  background: #fafafa;
}

.mk-stats span {
  border-right: 1px solid rgba(0, 0, 0, 0.14);
  color: rgba(0, 0, 0, 0.55);
}

.mk-stats em {
  font-family: var(--font-code, "IBM Plex Mono", Consolas, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.38);
}

.mk-tabs {
  background: #fff;
  border: 1px solid #111;
  border-radius: 2px;
  box-shadow: none;
}

.mk-tab {
  border-right: 1px solid rgba(0, 0, 0, 0.14);
  color: rgba(0, 0, 0, 0.55);
}

.mk-tab:hover {
  background: #fafafa;
  color: #111;
}

.mk-tab.active {
  background: #111;
  color: #fff;
}

.mk-btn {
  background: #fff;
  border: 1px solid #111;
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

.mk-btn:hover {
  background: #111;
  color: #fff;
}

.mk-btn-primary {
  background: #111;
  color: #fff;
  border-color: #111;
}

.mk-btn-primary:hover {
  background: #222;
  color: #fff;
}

.mk-btn-ghost {
  background: #fff;
}

.mk-filters {
  border: 1px solid #111;
  border-radius: 2px;
  background: #fff;
  box-shadow: none;
}

.mk-type-tab {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.55);
}

.mk-type-tab:hover {
  color: #111;
  border-color: #111;
}

.mk-type-tab.active {
  background: #111;
  border-color: #111;
  color: #fff;
}

/* 分类色点：装扮/宠物/框改为更克制；称号/词条保持原色 */
.mk-type-tab[data-tone="cosmetic"].active {
  background: #111;
  border-color: #111;
  color: #fff;
}
.mk-type-tab[data-tone="pet"].active {
  background: #111;
  border-color: #111;
  color: #fff;
}
.mk-type-tab[data-tone="frame"].active {
  background: #111;
  border-color: #111;
  color: #fff;
}
.mk-type-tab[data-tone="title"].active {
  background: #8a6a12;
  border-color: #8a6a12;
  color: #fff4c2;
}
.mk-type-tab[data-tone="buff"].active {
  background: #6e4524;
  border-color: #6e4524;
  color: #f6e7a8;
}

.mk-select,
.mk-dd-btn,
.mk-dd-menu,
.mk-type-pill {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.2);
}

.mk-dd.open .mk-dd-btn,
.mk-dd-btn:hover {
  border-color: #111;
  background: #fff;
}

.mk-dd-menu {
  border: 1px solid #111;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

.mk-dd-menu button.active {
  background: #111;
  color: #fff;
}

.mk-type-pill.active {
  background: #111;
  border-color: #111;
  color: #fff;
}

/* 通用卡片：去奶油底，硬边黑白（不碰称号徽章 / 词条芯片） */
.mk-list.is-grid .mk-row.mk-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.08);
}

.mk-list.is-grid .mk-row.mk-card:hover {
  border-color: #111;
  box-shadow: 4px 4px 0 #111;
}

.mk-list.is-grid .mk-row.mk-card.is-showcase {
  --mk-ticket: #ffffff;
  --mk-rarity: #111111;
  border-radius: 2px;
  border: 1px solid #111;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}

.mk-list.is-grid .mk-row.mk-card.is-showcase.mk-type-frame {
  --mk-ticket: #ffffff;
  --mk-rarity: #111111;
}

.mk-list.is-grid .is-showcase .mk-card-media {
  background: #f5f5f5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mk-list.is-grid .is-showcase.mk-type-frame .mk-card-media {
  background: #f5f5f5;
}

.mk-list.is-grid .is-showcase .mk-card-media::after {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.7));
}

.mk-list.is-grid .is-showcase .mk-card-chip {
  border: 1px solid #111;
  background: #fff;
  color: #111;
  border-radius: 2px;
  transform: none;
}

.mk-list.is-grid .mk-card-seller,
.mk-list.is-grid.is-sm .mk-card-seller {
  color: rgba(0, 0, 0, 0.45);
}

.mk-list.is-grid .mk-card-seller span,
.mk-list.is-grid.is-sm .mk-card-seller span,
.mk-list.is-grid.is-sm .mk-card-seller span {
  color: #111;
  opacity: 1;
}

.mk-list.is-grid .mk-card-foot,
.mk-list.is-grid.is-sm .mk-card-foot {
  border-top-color: rgba(0, 0, 0, 0.12);
}

.mk-list.is-grid .mk-card-foot .mk-price small,
.mk-list.is-grid.is-sm .mk-card-foot .mk-price small,
.mk-list.is-grid.is-sm .mk-compact-side .mk-price small {
  color: rgba(0, 0, 0, 0.45);
}

.mk-list.is-grid.is-sm .mk-compact-peer {
  color: rgba(0, 0, 0, 0.45);
}

.mk-list.is-grid.is-sm .mk-compact-side {
  border-top-color: rgba(0, 0, 0, 0.12);
}

.mk-list.is-grid.is-sm .mk-compact-side .mk-btn:not(.mk-btn-cancel),
.mk-list.is-grid.is-sm .mk-card-foot .mk-btn:not(.mk-btn-cancel) {
  background: #111;
  border-color: #111;
  color: #fff;
}

.mk-list.is-grid .mk-row.mk-card:focus-visible {
  outline: 2px solid #111;
}

/* 弹层 / 背包壳：白底 */
.mk-modal,
.mk-bag-panel,
.mk-sell-modal .mk-modal-inner,
.mk-empty {
  background: #fff;
}

.mk-pager .mk-page-btn.active,
.mk-page-btn.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* —— 锁定保留：市集执照（覆盖层之后再写回） —— */
.mk-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: none !important;
  color: color-mix(in srgb, #b8860b 72%, #111) !important;
  margin: 0 !important;
  padding: 3px 7px !important;
  border-radius: 2px !important;
  background: color-mix(in srgb, #f7f2e8 65%, #fff) !important;
  border: 1.5px dashed color-mix(in srgb, #b8860b 48%, #111) !important;
  transform: rotate(-1.5deg) !important;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
}

.mk-kicker img {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.8 !important;
  filter: none !important;
}

/* 称号 / 词条分类 Tab 保持原色（再锁一次） */
.mk-type-tab[data-tone="title"].active {
  background: #8a6a12 !important;
  border-color: #8a6a12 !important;
  color: #fff4c2 !important;
}
.mk-type-tab[data-tone="buff"].active {
  background: #6e4524 !important;
  border-color: #6e4524 !important;
  color: #f6e7a8 !important;
}

/* 详情弹窗：称号 / 词条票据底保留 */
.mk-detail-modal[data-type="title"] {
  --mk-ticket: #f8f4e7;
}
.mk-detail-modal[data-type="arena_buff"] {
  --mk-ticket: #f8f1e6;
}


/* 详情弹窗：非称号/词条改为白底；称号与词条保持票据底 */
.mk-detail-modal:not([data-type="title"]):not([data-type="arena_buff"]) {
  --mk-ticket: #ffffff;
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid #111;
  border-radius: 2px;
  box-shadow: 6px 6px 0 #111;
}

.mk-detail-modal[data-type="title"],
.mk-detail-modal[data-type="arena_buff"] {
  background-color: var(--mk-ticket);
  background-image:
    radial-gradient(rgba(26, 23, 20, 0.04) 0.55px, transparent 0.75px),
    linear-gradient(165deg, #fffef9 0%, var(--mk-ticket) 55%, #ebe2d2 100%);
  background-size: 4px 4px, auto;
}

.mk-sell-bargain {
  grid-column: 1 / -1;
}

.mk-check-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px !important;
  font-weight: 650 !important;
  color: var(--mk-ink) !important;
  letter-spacing: 0 !important;
  user-select: none;
}

.mk-check-label input {
  width: 16px !important;
  height: 16px !important;
  margin: 0;
  accent-color: var(--mk-gold);
}

.mk-bargain-hint {
  margin: 0 16px 8px;
  font-size: 13px;
  color: var(--mk-muted);
  line-height: 1.45;
}

.mk-bargain-inbox {
  max-height: min(52vh, 420px);
  overflow: auto;
  padding: 0 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mk-bargain-item {
  border: 1px solid #111;
  padding: 10px 12px;
  background: #fff;
  display: grid;
  gap: 6px;
}

.mk-bargain-item strong {
  font-size: 13px;
}

.mk-bargain-item .mk-bargain-meta {
  font-size: 12px;
  color: var(--mk-muted);
  line-height: 1.4;
}

.mk-bargain-item .mk-bargain-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.mk-tag-bargain {
  color: #8a4b12 !important;
  background: #ffe8c8 !important;
}

.mk-card-acts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mk-card-acts .mk-bargain-card-btn,
.mk-card-acts .mk-bargain-done,
.mk-detail-actions .mk-bargain-done {
  min-width: 44px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  background: #fff !important;
  border: 1px solid #111 !important;
  color: #111 !important;
  box-shadow: none !important;
}

.mk-card-acts .mk-bargain-done,
.mk-detail-actions .mk-bargain-done {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
  background: #f3f3f3 !important;
  border-color: #bbb !important;
  color: #666 !important;
}

.mk-card-acts .mk-bargain-card-btn:hover {
  background: #111 !important;
  color: #f6e7a8 !important;
}

.mk-list.is-grid.is-sm .mk-card-acts .mk-bargain-card-btn,
.mk-compact-side .mk-card-acts .mk-bargain-card-btn {
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 4px;
}