/* The marketplace (modules/market): the filters beside the results, items on the skin's tiles named in the game's
   quality colours, their tooltips, an item's detail, the player's bag laid out as the game's, and the waits while the
   game does the work. Colours come from the skin's variables; the parchment re-inks what does not read on paper. */

[data-market] {
  --q-plain: var(--text-0);
  --q-high: #f2c94c;
  --q-exc: #63e394;
  --q-anc: #6fcaff;
  --q-socket: #c891ff;
  --q-blue: #9cbcff;
  --mk-tile: radial-gradient(ellipse at 50% 38%, rgba(var(--accent-rgb), 0.14), transparent 68%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.42));
  --mk-tile-line: rgba(150, 168, 192, 0.16);
  --mk-cell: rgba(0, 0, 0, 0.32);
}
[data-skin='parchment'] [data-market] {
  --q-high: #8a5a10;
  --q-exc: #1f7a3a;
  --q-anc: #1d5f8a;
  --q-socket: #6a3a9a;
  --q-blue: #2f4f8a;
  --mk-tile: radial-gradient(ellipse at 50% 40%, rgba(255, 250, 232, 0.65), rgba(196, 160, 110, 0.32) 80%);
  --mk-tile-line: rgba(74, 48, 22, 0.28);
  --mk-cell: rgba(120, 82, 40, 0.12);
}
[data-skin='samurai'] [data-market] { --mk-tile: radial-gradient(ellipse at 50% 42%, rgba(var(--accent-rgb), 0.1), transparent 66%), rgba(0, 0, 0, 0.55); --mk-tile-line: rgba(232, 226, 214, 0.1); }
[data-skin='gilded'] [data-market] { --mk-tile: radial-gradient(ellipse at 50% 38%, rgba(232, 190, 110, 0.12), transparent 70%), rgba(28, 25, 22, 0.8); --mk-tile-line: rgba(232, 190, 110, 0.16); }

[data-market] [hidden], .mk-dialog [hidden] { display: none !important; }
.is-plain { color: var(--text-0); }
.is-high { color: var(--q-high); }
.is-exc { color: var(--q-exc); }
.is-anc { color: var(--q-anc); }
.is-socket { color: var(--q-socket); }

/* ---------- layout: the filters beside the results ---------- */
.mk-wrap { display: grid; gap: 22px; }
.mk-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.mk-closed { margin: 0 0 16px; }
.mk-filters { position: sticky; top: 90px; display: grid; gap: 14px; padding: 14px; border: 1px solid var(--mk-tile-line); border-radius: 12px; background: rgba(0, 0, 0, 0.18); }
[data-skin='parchment'] .mk-filters { background: rgba(255, 248, 230, 0.35); }
.mk-search .input { width: 100%; }
.mk-group { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mk-group legend { margin-bottom: 6px; padding: 0; color: var(--text-2); font: 600 11px var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip input, .mk-class input, .mk-check input, .mk-char input { position: absolute; opacity: 0; pointer-events: none; }
.mk-chip span { display: block; padding: 3px 10px; border: 1px solid var(--mk-tile-line); border-radius: 999px; color: var(--text-1); font-size: 12px; cursor: pointer; transition: border-color 160ms, color 160ms, background 160ms; }
.mk-chip span:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--text-0); }
.mk-chip input:checked + span { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.2); color: var(--text-0); }
.mk-chip input:focus-visible + span, .mk-class input:focus-visible + *, .mk-check input:focus-visible + span, .mk-char input:focus-visible ~ span { outline: 1px solid var(--accent-hot); outline-offset: 2px; }
.mk-classes { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-class { position: relative; cursor: pointer; }
.mk-class img, .mk-class-any { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--mk-tile-line); border-radius: 50%; object-fit: cover; background: rgba(0, 0, 0, 0.3); color: var(--text-1); font-size: 10px;
  filter: grayscale(0.7) brightness(0.8); transition: filter 180ms, border-color 180ms, box-shadow 180ms; }
.mk-class-any { width: auto; padding: 0 10px; border-radius: 999px; filter: none; }
.mk-class:hover img { filter: none; }
.mk-class input:checked + img, .mk-class input:checked + .mk-class-any { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35); filter: none; color: var(--text-0); }
.mk-quality { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-quality legend { width: 100%; }
.mk-check span { display: block; padding: 3px 10px; border: 1px solid var(--mk-tile-line); border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; opacity: 0.7; transition: opacity 160ms, background 160ms; }
.mk-check.is-exc span { color: var(--q-exc); }
.mk-check.is-anc span { color: var(--q-anc); }
.mk-check input:checked + span { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); border-color: currentColor; }
.mk-range { grid-template-columns: 1fr auto 1fr; align-items: center; }
.mk-range legend { grid-column: 1 / -1; }
.mk-range .input { width: 100%; min-width: 0; }
.mk-filter-end { display: flex; justify-content: flex-end; gap: 8px; }
.mk-fold { display: grid; gap: 14px; }
.mk-fold[open] { display: grid; }
.mk-fold > summary { display: none; }
.mk-fold-on { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }

/* ---------- results ---------- */
.mk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.mk-count { color: var(--text-1); font-weight: 600; }
.mk-new { padding: 4px 12px; border: 1px solid var(--accent); border-radius: 999px; background: rgba(var(--accent-rgb), 0.18); color: var(--text-0); font: inherit; font-size: 12px; cursor: pointer; animation: mk-pulse 2s ease-in-out infinite; }
@keyframes mk-pulse { 50% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18); } }
.mk-live { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12px; }
.mk-live i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); animation: mk-live 2.4s ease-out infinite; }
@keyframes mk-live { 70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.mk-sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--text-2); font-size: 12px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin: 0 0 16px; transition: opacity 200ms; }
.mk-grid.is-busy { opacity: 0.5; }
.mk-grid.is-block { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.mk-empty { color: var(--text-2); text-align: center; padding: 22px 0; }
.mk-card { position: relative; display: grid; grid-template-rows: auto auto auto auto; gap: 4px; padding: 10px 10px 12px; border: 1px solid var(--mk-tile-line); border-radius: 10px; background: var(--mk-tile); cursor: pointer;
  transition: transform 260ms var(--spring), border-color 200ms, box-shadow 200ms; outline: none; }
.mk-card:hover, .mk-card:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--q, var(--accent)) 60%, transparent); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45), 0 0 22px color-mix(in srgb, var(--q, var(--accent)) 22%, transparent); }
.mk-card.is-exc { --q: var(--q-exc); }
.mk-card.is-anc { --q: var(--q-anc); }
.mk-card.is-socket { --q: var(--q-socket); }
.mk-card.is-high { --q: var(--q-high); }
.mk-art { position: relative; display: grid; place-items: center; height: 112px; overflow: hidden; }
.mk-art::before { content: ''; position: absolute; inset: 14% 22%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--q, var(--accent)) 30%, transparent), transparent); opacity: 0.7; }
/* the pictures are the bag's canvases (a jewel a speck in its 120 px, an armour most of its 210): each is scaled by its
   height in cells, so a 1x1 reads at about 50 px and a 2x3 at about 90 */
.mk-art .item-icon, .mk-dialog-art .item-icon, .mk-sale-art .item-icon, .mk-hart .item-icon, .mk-bag-item .item-icon {
  position: absolute; left: 50%; top: 50%; width: auto; max-width: none; max-height: none; translate: -50% -50%; object-fit: contain; }
.mk-art .item-icon { height: calc((30px + 20px * var(--h, 1)) * 5 / var(--h, 1)); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)); transition: transform 300ms var(--spring); }
.mk-card:hover .mk-art .item-icon { transform: scale(1.06) rotate(-2deg); }
.mk-art .item-fx, .mk-bag-item .item-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mk-level { position: absolute; top: 4px; right: 6px; color: var(--q, var(--accent-hot)); font: 700 13px var(--font-display); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
[data-skin='parchment'] .mk-level { text-shadow: none; }
.mk-name { margin: 2px 0 0; overflow: hidden; color: var(--q, var(--text-0)); font: 600 13px/1.3 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.mk-price { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-0); font: 700 15px var(--font-display); font-variant-numeric: tabular-nums; }
.mk-price small { color: var(--text-2); font: 600 10px var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.mk-seller { margin: 0; overflow: hidden; color: var(--text-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mk-tip { display: none; }
/* the game's Zen: a gold coin drawn in CSS */
.mk-zen { display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c0, #f0c040 40%, #9c6a10 100%); box-shadow: inset 0 0 0 1px rgba(90, 56, 0, 0.5), 0 0 6px rgba(255, 196, 60, 0.35); }
.mk-zen.is-big { width: 44px; height: 44px; }
.mk-card.is-sold { pointer-events: none; animation: mk-sold 2.4s var(--ease) forwards; }
.mk-card.is-sold::after { content: attr(data-sold); position: absolute; inset: 0; display: grid; place-items: center; }
@keyframes mk-sold { 0% { opacity: 1; } 30% { opacity: 1; filter: grayscale(1) brightness(0.6); transform: scale(0.97); } 100% { opacity: 0; filter: grayscale(1) brightness(0.4); transform: scale(0.9); } }

/* ---------- the tooltip, as the game's: centred lines on dark glass, each in its kind's colour ---------- */
.mk-tipbox { position: fixed; z-index: 1000; max-width: 330px; padding: 12px 16px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 8px; background: rgba(6, 8, 12, 0.94); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  color: #e9edf2; text-align: center; pointer-events: none; opacity: 0; translate: 0 4px; transition: opacity 120ms, translate 160ms var(--ease); backdrop-filter: blur(6px);
  --q-exc: #63e394; --q-anc: #6fcaff; --q-socket: #c891ff; --q-high: #f2c94c; --q-blue: #9cbcff; --q-plain: #e9edf2; }
.mk-tipbox.is-shown { opacity: 1; translate: 0 0; }
.mk-tip-body { display: grid; gap: 3px; font-size: 12px; line-height: 1.4; }
.mk-tip-name { margin-bottom: 4px; font: 700 14px var(--font-display); }
.mk-tip-line.is-blue { color: var(--q-blue); }
.mk-tip-line.is-exc { color: var(--q-exc); }
.mk-tip-line.is-anc { color: var(--q-anc); }
.mk-tip-line.is-socket { color: var(--q-socket); }
.mk-tip-line.is-req { margin-top: 4px; color: #9aa2ad; font-size: 11px; }
[data-skin='arcane'] .mk-tipbox { border-color: rgba(var(--accent-rgb), 0.5); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), transparent 30%), rgba(10, 9, 12, 0.95); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--accent-rgb), 0.18), 0 14px 40px rgba(0, 0, 0, 0.6); }
[data-skin='parchment'] .mk-tipbox { border: 1px solid rgba(74, 48, 22, 0.45); border-radius: 3px; background: var(--ui-paper) 0 0 / 440px, #efe2c4; color: #2b1c0e; box-shadow: 0 10px 26px rgba(40, 24, 8, 0.45);
  --q-exc: #1f7a3a; --q-anc: #1d5f8a; --q-socket: #6a3a9a; --q-high: #8a5a10; --q-blue: #2f4f8a; --q-plain: #2b1c0e; }
[data-skin='parchment'] .mk-tipbox .mk-tip-name { font-family: var(--font-display); }
[data-skin='parchment'] .mk-tip-line.is-req { color: #6b5034; }
[data-skin='samurai'] .mk-tipbox { border: 0; border-radius: 0; background: radial-gradient(ellipse at 50% 0, rgba(var(--accent-rgb), 0.18), transparent 60%), #050505; box-shadow: 0 0 0 1px rgba(232, 226, 214, 0.12), 0 18px 40px rgba(0, 0, 0, 0.8); }
:is([data-skin='modern'], [data-skin='gilded']) .mk-tipbox { border-color: rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(16, 18, 24, 0.86); backdrop-filter: blur(14px) saturate(1.3); }
[data-skin='gilded'] .mk-tipbox { border-color: rgba(232, 190, 110, 0.3); }
[data-skin^='vine'] .mk-tipbox { border-color: rgba(180, 196, 210, 0.3); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%), rgba(8, 12, 10, 0.94); }

/* ---------- the latest sales ---------- */
.mk-sales { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mk-sale { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: var(--mk-cell); }
.mk-sale-art { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; }
.mk-sale-art { position: relative; }
.mk-sale-art .item-icon { height: calc(34px * 4 / var(--h, 1)); }
.mk-sale-text { display: grid; min-width: 0; }
.mk-sale-text b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mk-sale-text small, .mk-sale time { color: var(--text-2); font-size: 11px; }
.mk-sale-price { font: 700 13px var(--font-display); font-variant-numeric: tabular-nums; }
.mk-sale-price::after { content: ' Zen'; color: var(--text-2); font: 600 10px var(--font-ui); }
.mk-sub { margin: 22px 0 10px; color: var(--text-1); font: 600 13px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.mk-hint { color: var(--text-2); font-size: 13px; }

/* ---------- an item's detail ---------- */
.mk-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; overflow: visible; border: 0; background: none; color: var(--text-0); }
.mk-dialog::backdrop { background: rgba(2, 3, 6, 0.62); backdrop-filter: blur(4px); }
.mk-dialog[open] { animation: mk-rise 380ms var(--spring); }
@keyframes mk-rise { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.mk-dialog > .panel { margin: 0; }
.mk-dialog-close { position: absolute; top: 14px; right: 16px; z-index: 3; }
.mk-dialog-close .btn { min-width: 0; padding: 2px 10px; line-height: 1.4; }
.mk-dialog-text { padding-right: 34px; }
.mk-dialog-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; }
.mk-dialog-art { position: relative; display: grid; place-items: center; height: 190px; border: 1px solid var(--mk-tile-line); border-radius: 12px; background: var(--mk-tile); overflow: hidden; }
.mk-dialog-art .item-icon { height: calc((56px + 30px * var(--h, 1)) * 5 / var(--h, 1)); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6)); }
.mk-tip-static .mk-tip-body { text-align: left; font-size: 13px; }
.mk-tip-static .mk-tip-line.is-blue { color: var(--q-blue); }
.mk-tip-static .mk-tip-line.is-exc { color: var(--q-exc); }
.mk-tip-static .mk-tip-line.is-anc { color: var(--q-anc); }
.mk-tip-static .mk-tip-line.is-req { color: var(--text-2); }
.mk-dialog-price { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; font: 700 24px var(--font-display); }
.mk-dialog-price small { color: var(--text-2); font: 600 11px var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.mk-dialog-seller { color: var(--text-2); font-size: 13px; }
.mk-dialog-seller b { color: var(--text-1); }
.mk-dialog-act { margin-top: 16px; }
.mk-buy { display: grid; gap: 12px; }
.mk-buy .btn { justify-self: end; }

/* the account's characters: a portrait each, a dot for whether it is in the game */
.mk-chars { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-char { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--mk-tile-line); border-radius: 999px; cursor: pointer; transition: border-color 160ms, background 160ms; }
.mk-char img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.mk-char span { font-size: 13px; font-weight: 600; }
.mk-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0a43a; }
.mk-char.is-on .mk-dot { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); }
.mk-char.is-off .mk-dot { background: #6b7280; }
.mk-char.is-off { opacity: 0.7; }
.mk-char:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.16); opacity: 1; }

/* waiting for the game: the skin's loader drawing as the token's life runs out (arcane, samurai), a ring elsewhere */
.mk-wait { display: grid; justify-items: center; gap: 10px; margin-top: 14px; padding: 14px; text-align: center; }
.mk-wait p { margin: 0; color: var(--text-1); }
.mk-wait .loader-circle { width: 110px !important; }
.mk-wait:not(:has(.loader-circle))::before, :is([data-skin='modern'], [data-skin='gilded'], [data-skin^='vine'], [data-skin='parchment']) .mk-wait::before {
  content: ''; width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), rgba(var(--accent-rgb), 0.12) 0); mask: radial-gradient(closest-side, transparent 78%, #000 80%); transition: background 400ms; }
.mk-wait.is-waiting::before { animation: mk-breathe 1.6s ease-in-out infinite; }
@keyframes mk-breathe { 50% { filter: brightness(1.4); } }
.mk-wait.is-done p { color: var(--ok-text); font-weight: 600; }
.mk-wait.is-failed p { color: var(--danger-text); font-weight: 600; }
[data-skin='parchment'] .mk-wait.is-done p { color: #1f6a34; }
[data-skin='parchment'] .mk-wait.is-failed p { color: #8a2a1a; }
.mk-job { grid-template-columns: auto 1fr; justify-items: start; align-items: center; margin: 10px 0 0; border: 1px solid var(--mk-tile-line); border-radius: 10px; background: var(--mk-cell); text-align: left; }
.mk-job > b { grid-column: 1 / -1; }
.mk-job .loader-circle { width: 54px !important; }
.mk-job::before { width: 34px !important; height: 34px !important; }

/* ---------- the player's own ---------- */
.mk-actas { display: grid; gap: 8px; margin: 0 0 18px; }
.mk-wallet { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--mk-tile-line); border-radius: 12px; background: var(--mk-tile); }
.mk-wallet > div { display: grid; flex: 1; }
.mk-wallet small { color: var(--text-2); font-size: 12px; }
.mk-wallet b { font: 700 26px var(--font-display); font-variant-numeric: tabular-nums; }
.mk-wallet b small { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.mk-wallet.has-zen .mk-zen { animation: coin-spin 6s ease-in-out infinite; }
.mk-own-list, .mk-history { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-own-row, .mk-hrow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--mk-tile-line); border-radius: 10px; background: var(--mk-cell); }
.mk-hart { position: relative; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; }
.mk-hart .item-icon { height: calc(42px * 4 / var(--h, 1)); }
.mk-htext { display: grid; min-width: 0; }
.mk-htext b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-htext small { color: var(--text-2); font-size: 12px; }
.mk-held { color: var(--danger-text) !important; }
[data-skin='parchment'] .mk-held { color: #8a2a1a !important; }
.mk-hzen { font: 700 14px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-hzen small { color: var(--text-2); font: 600 10px var(--font-ui); }
.mk-hrow time { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.mk-badge { padding: 2px 9px; border: 1px solid currentColor; border-radius: 999px; color: var(--text-1); font-size: 11px; font-weight: 600; white-space: nowrap; }
.mk-badge:is(.is-active, .is-success) { color: #4ade80; }
.mk-badge:is(.is-sold) { color: #f2c94c; }
.mk-badge:is(.is-pending, .is-claimed, .is-returning) { color: #e0a43a; }
.mk-badge:is(.is-cancelled, .is-paid, .is-failed) { color: var(--text-2); }
.mk-badge.is-held { color: var(--danger-text); }
[data-skin='parchment'] .mk-badge.is-held { color: #8a2a1a; }
[data-skin='parchment'] .mk-badge:is(.is-active, .is-success) { color: #1f6a34; }
[data-skin='parchment'] .mk-badge.is-sold { color: #8a5a10; }
[data-skin='parchment'] .mk-badge:is(.is-pending, .is-claimed, .is-returning) { color: #9a5a10; }
[data-market-cancel].is-sure { border-color: var(--danger-text); color: var(--danger-text); opacity: 1; }

/* the bag as the game lays it out: eight columns of cells, an item over the cells it takes */
.mk-sell { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.mk-bag { min-height: 120px; transition: opacity 200ms; }
.mk-bag.is-busy { opacity: 0.5; }
.mk-bag-grid { --c: 42px; display: grid; grid-template-columns: repeat(8, var(--c)); grid-template-rows: repeat(var(--rows), var(--c)); width: max-content; padding: 3px; border: 1px solid var(--mk-tile-line); border-radius: 6px;
  background: linear-gradient(90deg, var(--mk-tile-line) 1px, transparent 1px) 3px 3px / var(--c) var(--c), linear-gradient(0deg, var(--mk-tile-line) 1px, transparent 1px) 3px 3px / var(--c) var(--c), var(--mk-cell); }
.mk-bag-item { position: relative; display: grid; place-items: center; margin: 1px; padding: 2px; overflow: hidden; border: 1px solid transparent; border-radius: 4px; background: rgba(var(--accent-rgb), 0.06); cursor: pointer; transition: background 160ms, border-color 160ms; }
.mk-bag-item:hover, .mk-bag-item:focus-visible { border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.16); outline: none; }
.mk-bag-item.is-picked { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.26); box-shadow: inset 0 0 12px rgba(var(--accent-rgb), 0.4); }
.mk-bag-item.is-exc { background: rgba(99, 227, 148, 0.08); }
.mk-bag-item.is-anc { background: rgba(111, 202, 255, 0.1); }
.mk-bag-item .item-icon { height: calc(var(--c) * 4.2); }
.mk-bag-item .mk-level { top: 1px; right: 3px; font-size: 10px; }
.mk-sell-form { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--mk-tile-line); border-radius: 12px; background: var(--mk-tile); }
.mk-sell-item { font: 700 15px var(--font-display); }
.mk-jobs:empty { display: none; }

.mk-toast { position: fixed; left: 50%; bottom: 26px; z-index: 1100; max-width: min(520px, calc(100vw - 32px)); padding: 10px 18px; border: 1px solid rgba(var(--accent-rgb), 0.5); border-radius: 10px; background: rgba(8, 10, 14, 0.95); color: #e9edf2;
  opacity: 0; translate: -50% 12px; transition: opacity 200ms, translate 260ms var(--ease); pointer-events: none; }
.mk-toast.is-shown { opacity: 1; translate: -50% 0; }
.mk-toast.is-error { border-color: rgba(240, 120, 100, 0.6); }
[data-skin='parchment'] .mk-toast { border-color: rgba(74, 48, 22, 0.5); background: var(--ui-paper) 0 0 / 440px, #efe2c4; color: #2b1c0e; }

@media (max-width: 900px) {
  .mk-layout { grid-template-columns: minmax(0, 1fr); }
  .mk-filters { position: static; }
  .mk-fold > summary { display: flex; align-items: center; gap: 6px; color: var(--text-1); font: 600 12px var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; list-style: none; }
  .mk-fold > summary::after { content: ''; width: 7px; height: 7px; margin-left: auto; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; transition: rotate 200ms; }
  .mk-fold[open] > summary::after { rotate: -135deg; }
  .mk-fold > .mk-group:first-of-type { margin-top: 6px; }
  .mk-sell { grid-template-columns: minmax(0, 1fr); }
  .mk-bag { overflow-x: auto; }
}
@media (max-width: 560px) {
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mk-art { height: 90px; }
  .mk-dialog-body { grid-template-columns: minmax(0, 1fr); }
  .mk-dialog-art { height: 150px; }
  .mk-own-row, .mk-hrow { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .mk-own-row .mk-badge, .mk-hrow time { grid-column: 2; justify-self: start; }
  .mk-bag-grid { --c: 36px; }
  .mk-sort { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-card, .mk-art .item-icon, .mk-dialog[open], .mk-new, .mk-live i, .mk-wait::before, .mk-wallet .mk-zen { animation: none !important; transition: none !important; }
}

/* samurai's display face is a brush script: figures read in the plain face */
[data-skin='samurai'] :is(.mk-price, .mk-dialog-price, .mk-hzen, .mk-sale-price, .mk-wallet b, .mk-level) { font-family: var(--font-ui); }