/* ======================================================= market (js/market.js)
   Reuses .tabs/.tab/.btn/.money-pill/.total/.qty and the tokens from style.css. */
.mk-modal .modal-body { display: flex; flex-direction: column; }
.market { position: relative; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: min(62vh, 560px); }
.mk-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-top .tabs { margin-bottom: 0; }
.mk-money { align-self: center; flex: none; white-space: nowrap; }
.mk-ph { display: none; }
.mk-badge:not(:empty) { margin-left: 6px; background: #ff3b3b; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; }

/* search + categories */
.mk-filters { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; }
.mk-searchrow { display: flex; gap: 10px; align-items: center; flex: 1 1 380px; min-width: 0; }
.mk-catrow { display: flex; gap: 8px; align-items: center; flex: 1 1 auto; min-width: 0; }
.mk-sortsel { display: none; flex: none; background: #0a1838; color: #fff; border: 2px solid #2d5bb3; border-radius: 8px; padding: 6px 8px; font: inherit; font-weight: 800; font-size: 13px; }
.mk-search { flex: 1 1 220px; min-width: 0; background: #0a1838; color: #fff; border: 2px solid #2d5bb3; border-radius: 8px; padding: 6px 10px; font: inherit; font-weight: 700; }
.mk-search:focus { outline: none; border-color: var(--border-hi); }
.mk-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-cat { font-size: 12px; padding: 4px 10px; }

/* table */
.mk-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mk-main > .mk-scroll { flex: 1 1 auto; min-height: 140px; }
.mk-scroll { max-height: none; overflow: auto; overscroll-behavior: contain; border: 2px solid #2d5bb3; border-radius: 10px; background: #0b1c42; }
.mk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mk-table th {
  position: sticky; top: 0; z-index: 1; background: #12264d; color: var(--muted); font-size: 11px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .4px; text-align: left; padding: 8px 10px; border-bottom: 2px solid #2d5bb3; white-space: nowrap;
}
.mk-table th.sortable { cursor: pointer; user-select: none; }
.mk-table th.sortable:hover, .mk-table th.sorted { color: var(--gold); }
.mk-table td { padding: 5px 10px; border-bottom: 1px solid rgba(111, 166, 255, 0.15); white-space: nowrap; font-weight: 700; }
.mk-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.mk-table tbody tr:hover { background: rgba(111, 166, 255, 0.12); }
.mk-table tr.mine { background: rgba(255, 207, 74, 0.08); }
.mk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-item { display: flex; align-items: center; gap: 8px; }
.mk-item b { font-weight: 900; }
.mk-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(#26468f, #12264d); overflow: hidden; }
.mk-ic img { width: 28px; height: 28px; }
.mk-ic.mon img { width: 100%; height: 100%; image-rendering: auto; }
.mk-price { color: var(--gold); font-weight: 900; }
.mk-seller { color: #9fe1ff; font-weight: 800; }
.mk-exp { color: var(--muted); font-weight: 800; }
.mk-exp.soon { color: #ff9a7a; }
.btn.mk-buy { background: linear-gradient(#5fe08a, #2fae5a); border-color: #a6f7c1; color: #06301a; font-weight: 900; padding: 3px 14px; }
.mk-tag { font-size: 11px; font-weight: 900; color: var(--gold); border: 1px solid var(--gold); border-radius: 6px; padding: 0 6px; }
.mk-more-row td { text-align: center; padding: 10px; }
.mk-empty { text-align: center; color: var(--muted); padding: 30px 10px !important; }
.mk-link { display: block; background: none; border: 0; padding: 0; text-align: left; }
.mk-link:hover b { color: var(--gold); text-decoration: underline; }
.mk-spark { display: block; }
.mk-up { color: var(--hp); }
.mk-down { color: #ff7a7a; }
.mk-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); font-weight: 700; }
.mk-foot [data-count] { color: var(--text); font-weight: 900; }

/* sell */
.mk-sell { display: grid; grid-template-columns: 1fr 300px; gap: 14px; flex: 1; min-height: 0; }
.mk-inv { padding: 10px; min-height: 0; }
.mk-sell .mk-form { overflow: auto; min-height: 0; }
.mk-inv h4 { margin: 4px 0 8px; color: var(--gold); font-size: 13px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 10px; }
.mk-card { display: grid; grid-template-columns: 34px 1fr; gap: 0 8px; align-items: center; text-align: left; background: #0f2552; border: 2px solid #2d5bb3; border-radius: 10px; padding: 6px; }
.mk-card .mk-ic { grid-row: span 2; }
.mk-card b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card small { font-size: 11px; color: var(--muted); }
.mk-card:hover:not(:disabled) { border-color: var(--border-hi); }
.mk-card.sel { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 207, 74, 0.45); }
.mk-card:disabled { opacity: .5; cursor: not-allowed; }
.mk-form { display: flex; flex-direction: column; gap: 8px; }
.mk-form label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.mk-form .qty { align-items: center; }
.mk-form .qty input { height: 30px; }
.mk-form .mk-price-in { width: 110px; }
.mk-form select { background: #0a1838; color: #fff; border: 2px solid #2d5bb3; border-radius: 8px; padding: 4px 8px; font: inherit; font-weight: 800; }
.mk-detail { display: flex; gap: 10px; align-items: center; background: #0f2552; border-radius: 10px; padding: 8px; }
.mk-detail .mk-ic { width: 56px; height: 56px; }
.mk-detail .mk-ic img { width: 44px; height: 44px; }
.mk-detail .mk-ic.mon img { width: 100%; height: 100%; }
.mk-detail small { display: block; color: var(--muted); }
.mk-suggest { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); background: #0a1838; border-radius: 8px; padding: 6px 8px; }
.mk-suggest b { color: var(--gold); }
.mk-feeline { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 0 12px; }
.mk-feeline b { color: #ff9a7a; }
.mk-hint { font-size: 12px; color: var(--muted); font-weight: 800; }
.mk-hint.good { color: var(--hp); }
.mk-hint.bad { color: #ff9a7a; }

/* my offers */
.mk-offers-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 800; }
.mk-status { padding: 1px 8px; border-radius: 8px; font-size: 11px; font-weight: 900; }
.mk-status.active { background: #2c63c9; }
.mk-status.sold { background: #2fae5a; color: #06301a; }
.mk-status.expired, .mk-status.cancelled { background: #4a5a80; }

/* server states, collect, prices detail */
.mk-offline { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 260px; text-align: center; padding: 20px; }
.mk-offline h4 { margin: 0; color: var(--gold); font-size: 18px; }
.mk-offline p { margin: 0; max-width: 420px; font-weight: 800; }
.mk-loading { animation: mk-pulse 1.2s ease-in-out infinite; }
@keyframes mk-pulse { 50% { opacity: .45; } }
.mk-badge.collect:empty { display: inline-block; width: 8px; height: 8px; padding: 0; margin-left: 6px; background: #5fe08a; border-radius: 50%; }
.mk-offers-head { flex-wrap: wrap; }
.mk-collect { display: flex; align-items: center; gap: 8px; }
.mk-note { margin: -4px 0 8px; font-size: 12px; color: var(--muted); font-weight: 700; }
.mk-listings { font-size: 12px; color: var(--muted); font-weight: 800; text-align: right; }
.mk-listings b { color: var(--text); }
.mk-feeline.mk-receive b { color: var(--hp); }
.mk-price-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mk-price-head .mk-item b { font-size: 15px; }
.mk-avg { font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.mk-chart { display: block; width: 100%; max-height: 170px; background: #0b1c42; border: 2px solid #2d5bb3; border-radius: 10px; }
.mk-chart .mk-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.mk-chart .mk-dot { fill: var(--gold); }
.mk-chart .mk-avg-line { stroke: #9fe1ff; stroke-width: 1.2; stroke-dasharray: 5 4; }
.mk-chart .mk-axis { fill: var(--muted); font-size: 10px; font-weight: 800; }
.mk-sub { margin: 10px 0 6px; color: var(--gold); font-size: 13px; }
.mk-scroll.mk-sales { max-height: min(22vh, 200px); flex: none; }
.mk-main:has(.mk-price-head) { overflow: auto; }
.mk-pending { background: rgba(255, 207, 74, 0.12); border: 1px solid var(--gold); color: #ffe7a3; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 800; }
.mk-pending[hidden] { display: none; }
.mk-dash { color: var(--muted); }
.btn:disabled { cursor: not-allowed; }

/* buy confirmation */
.mk-dialog { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(4, 10, 24, 0.6); z-index: 2; border-radius: 10px; }
.mk-dialog[hidden] { display: none; }
.mk-dlg-card {
  width: min(360px, 92%); display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px;
  background: linear-gradient(#152c5c, #0f2148); border: 3px solid #6c7cff; box-shadow: 0 0 0 3px #0a1630, 0 10px 30px rgba(0, 0, 0, 0.5);
}
.mk-dlg-card h4 { margin: 0; color: var(--gold); font-size: 16px; }
.mk-warn { margin: 0; background: rgba(255, 154, 122, 0.15); border: 1px solid #ff9a7a; color: #ffd0c0; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 800; }
.mk-warn[hidden] { display: none; }
.mk-dlg-actions { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 900px) {
  .mk-col-seller, .mk-col-total { display: none; }
}
/* phones: one scrolling column for Sell, rows become two-line cards, big touch targets */
@media (max-width: 700px) {
  .market { gap: 8px; min-height: 0; }
  .mk-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
  .mk-tabs .tab { padding: 8px 4px; min-height: 42px; white-space: nowrap; font-size: 13px; justify-content: center; text-align: center; }
  .mk-search { min-height: 42px; font-size: 16px; }   /* 16px: iOS doesn't zoom into the field */
  .mk-searchrow { flex-basis: 100%; }
  .mk-catrow { flex-basis: 100%; }
  .mk-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1; min-width: 0;
    mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 18px; }
  .mk-cats::-webkit-scrollbar { display: none; }
  .mk-cat { flex: none; min-height: 36px; padding: 6px 12px; }
  .mk-sortsel { display: block; min-height: 38px; }
  .mk-sell { grid-template-columns: 1fr; flex: none; }
  .mk-main:has(.mk-sell) { overflow: auto; }
  .mk-sell .mk-inv { overflow: visible; }
  .mk-sell .mk-form { overflow: visible; padding-bottom: 6px; }
  .mk-form .qty input, .mk-form .mk-price-in { height: 40px; font-size: 16px; }
  .mk-form .qty .btn { min-width: 40px; min-height: 40px; }
  .mk-form .btn.buy { min-height: 48px; font-size: 16px; }
  .mk-foot { font-size: 11px; }
  .mk-foot > span:first-child { display: none; }
  .mk-offers-head { font-size: 12px; }
  .mk-collect .btn { min-height: 40px; }
  .mk-price-head .btn { min-height: 38px; }

  .mk-cards thead { display: none; }
  .mk-cards, .mk-cards tbody { display: block; }
  .mk-cards tbody tr { display: grid; grid-template-columns: 34px auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 2px 8px; padding: 8px 10px; border-bottom: 1px solid rgba(111, 166, 255, 0.15); }
  .mk-cards td { display: block; padding: 0; border: 0; min-width: 0; font-size: 12px; }
  .mk-cards tbody tr > td[colspan] { grid-column: 1 / -1; }
  .mk-cards .mk-ph { display: inline; }
  .mk-cards .mk-pc { display: none; }
  .mk-cards .c-item { grid-row: 1; grid-column: 1 / 6; overflow: hidden; font-size: 13px; }
  .mk-cards .c-item .mk-item > span { overflow: hidden; text-overflow: ellipsis; }
  .mk-cards .c-act { grid-row: 1 / 3; grid-column: 6; }
  .mk-cards .c-unit, .mk-cards .c-avg { grid-row: 2; grid-column: 2; text-align: left; }
  .mk-cards .c-qty, .mk-cards .c-sales { grid-row: 2; grid-column: 3; text-align: left; color: var(--muted); }
  .mk-cards .c-seller, .mk-cards .c-status, .mk-cards .c-min { grid-row: 2; grid-column: 4; overflow: hidden; text-overflow: ellipsis; text-align: left; color: var(--muted); }
  .mk-cards .c-seller { color: #9fe1ff; }
  .mk-cards .c-exp { grid-row: 2; grid-column: 5; display: block !important; }
  .mk-cards .c-total, .mk-cards .c-max { display: none; }
  .mk-cards .c-trend { grid-row: 1 / 3; grid-column: 5; }
  .mk-cards .c-chg { grid-row: 1 / 3; grid-column: 6; display: block !important; min-width: 48px; }
  .mk-cards .c-item .mk-ic { width: 34px; height: 34px; }
  .mk-cards .btn { min-height: 40px; min-width: 64px; padding: 6px 12px; font-size: 13px; }
  .mk-cards .btn.mk-buy { min-width: 72px; }
  .mk-cards .c-item .mk-link { width: 100%; }
  .mk-dlg-card .btn { min-height: 44px; }
  .mk-dlg-card .qty input { height: 40px; font-size: 16px; }
  .mk-dlg-card .qty .btn { min-width: 44px; }
  .mk-dlg-actions .btn { flex: 1; }
}
/* short landscape phones: tabs and search share a row, categories scroll, no footer */
@media (max-height: 500px) and (orientation: landscape) {
  .market { gap: 6px; }
  .mk-top { flex-wrap: nowrap; }
  .mk-tabs .tab { min-height: 36px; padding: 5px 10px; }
  .mk-filters { flex-wrap: nowrap; }
  .mk-searchrow { flex: 1 1 50%; }
  .mk-catrow { flex: 1 1 50%; }
  .mk-search { min-height: 36px; padding: 4px 10px; }
  .mk-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
  .mk-cats::-webkit-scrollbar { display: none; }
  .mk-cat { flex: none; }
  .mk-foot, .mk-note { display: none; }
  .mk-main > .mk-scroll { min-height: 90px; }
  .mk-sell { grid-template-columns: 1fr 280px; flex: 1; }
  .mk-main:has(.mk-sell) { overflow: hidden; }
  .mk-sell .mk-inv, .mk-sell .mk-form { overflow: auto; }
}
@media (max-width: 700px) { .mk-form .mk-listings { display: none; } }
@media (max-width: 700px) {
  .mk-prices .c-item { grid-column: 1 / 4; }
  .mk-prices .c-trend { grid-row: 1; grid-column: 4 / 6; justify-self: end; }
  .mk-prices .c-trend .mk-spark { width: 72px; height: 20px; }
  .mk-prices .c-min { grid-column: 4 / 6; }
  .mk-prices .c-chg { text-align: right; }
}
.mk-form .qty { flex-wrap: nowrap; }
@media (max-height: 500px) and (orientation: landscape) {
  .mk-form .mk-listings { display: none; }
  .mk-form .qty input { width: 56px; }
  .mk-form .qty .btn { padding: 4px 9px; min-width: 34px; }
  .mk-form { gap: 6px; }
}