/* Halaman Marketplace admin. Memakai token & komponen admin.css (warna, radius, .btn, .pill, .field, .seg, .opt, dialog). */
:root { --mkt: #f28db8; --mkt-bg: #3c1829; }
.pill--mkt { background: var(--mkt-bg); color: var(--mkt); }

.search { position: relative; }
.mk h3, .mk h4, .mk h5, .mk-formdlg h3, .mk-formdlg h5, .mk-wizdlg h3 { margin: 0; }
.mk { display: grid; gap: 16px; }
.mk-card { overflow: hidden; }
.mk-bar { padding: 16px 20px; }
.mk-back { justify-self: start; margin-left: -6px; }

/* ---------- thumbnail & badge ---------- */
.mk-thumb { position: relative; display: inline-block; flex: none; width: 76px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--s2); border: 1px solid var(--line-soft); }
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-thumb__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); }
.mk-thumb--sm { width: 52px; border-radius: 7px; }
.mk-thumb--md { width: 112px; border-radius: 10px; }
.mk-thumb--lg { width: 100%; border-radius: 12px; }
.mk-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font: 700 11px/1.5 var(--f-body); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.mk-badge--hot { background: #3d1f19; color: #ff9d7a; }
.mk-badge--new { background: var(--accent-soft); color: var(--accent-hi); }
.mk-badge--best { background: var(--gold-bg); color: var(--gold); }
.mk-badge--custom { background: var(--s3); color: var(--fg-2); }
.mk-dhead h2 .mk-badge { margin-left: 10px; }

/* ---------- tabel daftar ---------- */
.mk-tablebox[data-state="loading"], .mk-card[data-state="loading"] .mk-tablebox { opacity: 0.55; transition: opacity 0.15s; }
.mk-table td, .mk-table th { padding: 12px 10px; white-space: nowrap; }
.mk-table td:first-child, .mk-table th:first-child { padding-left: 20px; }
.mk-table td:last-child, .mk-table th:last-child { padding-right: 16px; }
.mk-cnts { display: flex; gap: 14px; }
.mk-table th.num, .mk-table td.num { text-align: right; }
.mk-row { transition: background 0.12s; }
.mk-row:hover { background: var(--wash); }
.mk-row[data-status="archived"] .mk-thumb { filter: grayscale(0.7); opacity: 0.8; }
.mk-cell-prod { display: flex; align-items: center; gap: 12px; min-width: 230px; max-width: 280px; white-space: normal; }
.mk-cell-prod__t { display: grid; gap: 2px; min-width: 0; }
.mk-cell-prod__n { font-weight: 600; }
.mk-cell-prod small, .mk-clip { display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.mk-link { color: var(--fg); font: inherit; font-weight: 600; text-align: left; border-radius: 6px; }
.mk-link:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
.mk-price { font-variant-numeric: tabular-nums; font-weight: 600; }
.mk-cnt { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.mk-cnt .i { color: var(--dim); }
.mk-times { display: grid; gap: 1px; min-width: 112px; font-size: 13px; }
.mk-times small { color: var(--dim); font-size: 12px; }
.mk-actions { display: flex; justify-content: flex-end; gap: 2px; }
.mk-actions .icon-btn { width: 32px; height: 32px; }
.mk-th-actions { text-align: right; }
.mk-skel { padding: 20px; }
.is-inactive { opacity: 0.6; }

/* ---------- detail ---------- */
.mk-detail { overflow: hidden; }
.mk-dhead { display: flex; align-items: center; gap: 18px; padding: 20px 24px 4px; flex-wrap: wrap; }
.mk-dhead__sk { width: 100%; height: 64px; }
.mk-dhead__t { flex: 1 1 280px; min-width: 0; display: grid; gap: 6px; }
.mk-dhead__t h2 { font: 700 21px var(--f-display); overflow-wrap: anywhere; }
.mk-dhead__m { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mk-dhead__a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-tabsbar { margin-top: 16px; }
.mk-pane { display: grid; gap: 22px; padding: 22px 24px 26px; min-width: 0; }
.mk-pane__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mk-pane__head h3 { font: 700 16px var(--f-display); }
.mk-pane__head p { margin-top: 3px; color: var(--muted); font-size: 13.5px; max-width: 62ch; }
.mk-pane__head--sub { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.mk-pane__tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mk-pane__tools select, .mk-bar select { width: auto; min-width: 150px; }
.mk-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-black); border: 1px solid var(--line-soft); color: var(--muted); font-size: 13px; }
.mk-note .i { flex: none; margin-top: 2px; color: var(--dim); }
.mk-note a { color: var(--accent-hi); }

/* informasi */
.mk-info { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 28px; align-items: start; }
.mk-info__l { display: grid; gap: 16px; position: sticky; top: 76px; }
.mk-kvs { display: grid; gap: 0; margin: 0; }
.mk-kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.mk-kv dt { color: var(--muted); }
.mk-kv dd { margin: 0; text-align: right; font-weight: 500; }
.mk-info__r { display: grid; gap: 26px; min-width: 0; }
.mk-info__r h3 { margin-bottom: 10px; font: 700 15px var(--f-display); }
.mk-lead { margin-bottom: 8px; color: var(--fg); font-weight: 500; }
.mk-rich { display: grid; gap: 10px; color: var(--fg-2); line-height: 1.6; overflow-wrap: anywhere; }
.mk-rich h4 { color: var(--fg); font: 700 14px var(--f-display); margin-top: 6px; }
.mk-rich ul { margin: 0; padding-left: 22px; display: grid; gap: 4px; list-style: disc; }
.mk-rich ul li::marker { color: var(--dim); }
.mk-rich strong { color: var(--fg); }
.mk-reqs { display: grid; gap: 12px; }
.mk-reqs__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mk-req { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--c-black); }
.mk-req h5 { margin-bottom: 8px; font: 700 12.5px var(--f-body); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.mk-req dl { display: grid; gap: 6px; margin: 0; }
.mk-req dt { color: var(--dim); font-size: 12px; }
.mk-req dd { margin: 0 0 4px; font-size: 13.5px; overflow-wrap: anywhere; }
.mk-req__os, .mk-req__extra { font-size: 13.5px; color: var(--fg-2); }

/* konten (game / bypass) */
.mk-items { display: grid; gap: 8px; }
.mk-item { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--c-black); }
.mk-item__t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mk-item__t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-item.is-missing { border-style: dashed; opacity: 0.7; }

/* akses */
.mk-grant { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-soft); }
.mk-grant__h { display: grid; gap: 2px; }
.mk-grant .search input { background: var(--c-black); }
.mk-ures { display: grid; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--c-black); overflow: hidden; }
.mk-ures:empty { display: none; }
.mk-urow { justify-content: space-between; }
.mk-urow__s { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.mk-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk-who > div { display: grid; min-width: 0; }
.mk-who small { overflow: hidden; text-overflow: ellipsis; }
.mk-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden; background: var(--accent-soft); color: var(--accent-hi); font: 700 12px var(--f-display); }
.mk-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-flag { margin-left: 6px; }

/* audit */
.mk-audit { display: grid; gap: 0; }
.mk-ev { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.mk-ev:first-child { padding-top: 2px; }
.mk-ev__i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--s2); color: var(--muted); }
.mk-ev__b { display: grid; gap: 4px; min-width: 0; }
.mk-ev__b p { color: var(--fg-2); font-size: 13.5px; }
.mk-ev__c { margin: 0; padding-left: 18px; font-size: 13px; color: var(--fg-2); display: grid; gap: 2px; }

/* ---------- form produk ---------- */
dialog.mk-formdlg { width: min(1040px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 32px)); }
.mk-formdlg .dlg__body { display: block; min-height: 0; padding: 0; overflow: hidden; }
.mk-form { display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: 100%; min-height: 0; position: relative; }
.mk-form__main { display: grid; gap: 0; align-content: start; overflow-y: auto; padding: 4px 26px 26px; }
.mk-formdlg .dlg__foot .form-error { margin-right: auto; max-width: 62%; font-size: 13px; padding: 7px 12px; }
.mk-form__aside { display: grid; gap: 10px; align-content: start; padding: 22px 22px 22px 0; }
.mk-aside__t { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.mk-aside__n { font-size: 12.5px; }
.mk-sec { display: grid; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.mk-sec:last-child { border-bottom: 0; }
.mk-sec > header h3 { font: 700 15px var(--f-display); }
.mk-sec > header p { margin-top: 2px; color: var(--muted); font-size: 13px; }
.mk-count { justify-self: end; margin-top: -2px; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.mk-count.is-over { color: var(--err); }
.mk-money { display: flex; align-items: stretch; }
.mk-money > span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); background: var(--s2); color: var(--muted); font-weight: 600; }
.mk-money input { border-radius: 0 var(--r-md) var(--r-md) 0; font-variant-numeric: tabular-nums; }
.mk-badge-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.mk-badge-row select { width: auto; min-width: 150px; }
.mk-badge-row input[type="text"] { width: 180px; }
.mk-reqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mk-reqcol { display: grid; gap: 10px; align-content: start; }
.mk-reqcol h5 { font: 700 12.5px var(--f-body); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.mk-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -6px; }
.mk-status { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-status .opt { align-content: start; }
.mk-status .opt:disabled { opacity: 0.5; cursor: not-allowed; }
.mk-status .opt__t { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.mk-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--c-black); border: 1px solid var(--line); justify-self: start; }
.mk-tab { padding: 5px 14px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 13px; }
.mk-tab.is-on { background: var(--s3); color: var(--fg); }
.mk-desc__prev { min-height: 190px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--c-black); }
.field code { padding: 1px 5px; border-radius: 4px; background: var(--s2); color: var(--fg-2); font-size: 12px; }
.mk-ctx { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--mkt-bg); color: var(--mkt); font-size: 13px; }
.mk-ctx .i { flex: none; margin-top: 2px; }
.mk-ctx p { color: var(--fg-2); }
.mk-ctx b { color: var(--mkt); }

/* gambar */
.mk-img { display: grid; gap: 12px; }
.mk-drop { display: grid; justify-items: center; gap: 4px; padding: 22px; text-align: center; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: var(--c-black); color: var(--fg-2); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.mk-drop:hover, .mk-drop.is-over, .mk-drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.mk-drop small { color: var(--muted); }
.mk-img__prev { max-width: 420px; }
.mk-img__state { display: grid; place-items: center; gap: 8px; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--s2); color: var(--dim); font-size: 13px; }
.mk-img__msg { padding: 9px 12px; border-radius: var(--r-md); background: var(--s2); color: var(--muted); font-size: 13px; }
.mk-img__msg.is-err { background: var(--err-bg); color: var(--err); }
.mk-spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent-hi); animation: spin 0.7s linear infinite; }

/* pratinjau kartu */
.mk-prev { overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--c-black); }
.mk-prev__img { position: relative; }
.mk-prev__img .mk-thumb { width: 100%; border: 0; border-radius: 0; }
.mk-prev__img .mk-badge { position: absolute; top: 10px; left: 10px; }
.mk-prev__body { display: grid; gap: 6px; padding: 14px; }
.mk-prev__body b { font: 700 15px var(--f-display); overflow-wrap: anywhere; }
.mk-prev__body p { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.mk-prev__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.mk-prev__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-prev__btn { padding: 4px 12px; border-radius: 8px; background: var(--s3); color: var(--fg-2); font-size: 12.5px; font-weight: 600; }

/* ---------- wizard & dialog tambah konten ---------- */
dialog.mk-wizdlg { width: min(540px, calc(100vw - 32px)); }
dialog.mk-adddlg { width: min(680px, calc(100vw - 32px)); }
.mk-wiz__head { display: flex; align-items: center; gap: 14px; }
.mk-wiz__head > div { display: grid; }
.mk-wiz__sum { padding: 9px 12px; border-radius: var(--r-md); background: var(--c-black); border: 1px solid var(--line-soft); color: var(--fg-2); font-size: 13.5px; }
.mk-wiz__sum.is-empty { color: var(--warn); }
.mk-wiz__opts { display: grid; gap: 10px; }
.mk-wizopt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--c-black); transition: border-color 0.15s, background 0.15s; }
.mk-wizopt:hover, .mk-wizopt:focus-visible { border-color: var(--accent-line); background: var(--accent-soft); }
.mk-wizopt > .i { color: var(--dim); }
.mk-wizopt__i { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--s2); color: var(--accent-hi); }
.mk-wizopt__t { flex: 1; display: grid; gap: 2px; }
.mk-wizopt__t small { color: var(--muted); font-size: 12.5px; }
.mk-wiz__note { font-size: 12.5px; }
.mk-pick { max-height: 300px; }
.mk-pickrow { cursor: default; }
.mk-pickrow .pick__t { flex: 1; min-width: 0; display: grid; }
.mk-pickrow__in { color: var(--dim); white-space: nowrap; }
.mk-or { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 12.5px; }
.mk-or::before, .mk-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mk-newbox { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--c-black); }
.mk-newbox > div { display: grid; gap: 2px; }

@media (max-width: 960px) {
  .mk-info { grid-template-columns: minmax(0, 1fr); }
  .mk-info__l { position: static; }
  .mk-form { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .mk-form__main { overflow: visible; }
  .mk-form__aside { display: none; }
  .mk-reqgrid, .mk-reqs__cols, .mk-status { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mk-dhead, .mk-pane { padding-left: 16px; padding-right: 16px; }
  .mk-newbox { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .mk-spin { animation-duration: 2s; } }

/* ---------- Role Discord produk, Bulk Whitelist ---------- */
.mk-grant__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mk-rolepill { margin-left: 0; }
.mk-note.is-warn { border-color: var(--warn); color: var(--fg-2); }
.mk-note.is-warn .i { color: var(--warn); }

.mk-role { display: grid; gap: 8px; }
.mk-role select { width: 100%; }
.mk-role__note { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.mk-role__note.is-err { color: var(--err); }
.mk-role__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mk-role__stat { min-width: 0; }

dialog.mk-bulkdlg { width: min(720px, calc(100vw - 32px)); }
.mk-bulkdlg .dlg__body { display: grid; gap: 12px; align-content: start; }
.mk-bulk__ta { width: 100%; min-height: 150px; resize: vertical; font-size: 13px; line-height: 1.55; }
.mk-bulk__count { display: block; margin-top: -4px; }
.mk-bulk__count.is-err { color: var(--err); }
.mk-bulk__out:empty { display: none; }
.mk-bulk__res { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--c-black); }
.mk-bulk__res h4 { font: 700 14px var(--f-display); margin: 0; }
.mk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.mk-stat { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--s2); }
.mk-stat b { font: 700 20px var(--f-display); color: var(--fg); }
.mk-stat small { color: var(--muted); font-size: 12px; }
.mk-stat.is-ok b { color: var(--ok); }
.mk-stat.is-bad { border-color: var(--err); }
.mk-stat.is-bad b { color: var(--err); }
.mk-bulk__failed { display: grid; gap: 8px; }
.mk-bulk__failed-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--err); }
.mk-bulk__tbl td, .mk-bulk__tbl th { padding: 7px 10px; font-size: 12.5px; }
.mk-bulk__failed .table-wrap { max-height: 220px; overflow: auto; }
.mk-bulk__list summary { cursor: pointer; color: var(--fg-2); font-size: 13px; }
.mk-bulk__list ul { margin: 8px 0 0; padding-left: 18px; max-height: 180px; overflow: auto; font-size: 12.5px; display: grid; gap: 2px; }
@media (max-width: 640px) { .mk-grant__top { flex-direction: column; } }