.mk-page { --mk-ink:#182e43; --mk-navy:#10283e; --mk-paper:#f8f1e3; --mk-sheet:#fffaf0; --mk-dim:#77694f; --mk-line:#d9c9ab; --mk-gold:#d2aa58; --mk-green:#237358; --mk-red:#963e31; }
.mk-app { max-width:1180px; margin:0 auto; padding:26px 22px 60px; color:var(--mk-ink); font:14px/1.45 'DM Sans',system-ui,sans-serif; }
.mk-app * { box-sizing:border-box; }
.mk-app [hidden] { display:none !important; }
.mk-app :is(h1,h2,h3,p) { margin:0; }
.mk-app :is(h1,h2,h3) { font-family:'Fraunces',Georgia,serif; font-weight:600; }
.mk-app button, .mk-app input, .mk-app select { font:inherit; color:inherit; }
.mk-app button:disabled { opacity:.5; cursor:not-allowed; }
.mk-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.mk-top { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; padding:6px 2px 16px; }
.mk-eyebrow { text-transform:uppercase; font-size:10px; letter-spacing:.15em; color:#896735; font-weight:700; }
.mk-app h1 { font-size:38px; line-height:1.1; letter-spacing:-1.4px; margin:4px 0 6px; }
.mk-top p { color:var(--mk-dim); font-size:13px; max-width:560px; }
.mk-wallet { background:var(--mk-navy); color:#f8eed9; border-bottom:3px solid var(--mk-gold); border-radius:7px; padding:9px 16px; text-align:right; }
.mk-wallet small { display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#d9c394; }
.mk-wallet .mk-run { font-size:22px; color:#ffe8b7; }
.mk-run { font-weight:800; white-space:nowrap; } .mk-run small { font-size:10px; font-weight:700; opacity:.75; }
.mk-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--mk-line); padding-bottom:12px; margin-bottom:16px; }
.mk-tabs button { display:flex; align-items:center; gap:7px; padding:9px 14px; border:1px solid transparent; background:transparent; border-radius:5px; font-weight:600; font-size:13px; cursor:pointer; }
.mk-tabs button[aria-pressed=true] { background:var(--mk-navy); color:#ffe8b7; box-shadow:0 3px 0 #b89550; }
.mk-badge { font-size:10px; min-width:18px; height:18px; padding:0 5px; display:inline-grid; place-items:center; border-radius:4px; background:var(--mk-gold); color:#172e43; font-weight:800; }
.mk-flash { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:200; width:min(440px,calc(100vw - 36px)); box-shadow:0 8px 26px #10283e55; display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 14px; border-radius:8px; background:#dcefe5; border:1px solid #9bc9b3; color:#144a38; font-weight:600; }
.mk-flash.mk-error { background:#f6dcd7; border-color:#d9a79e; color:var(--mk-red); }
.mk-flash button { border:0; background:transparent; font-size:20px; cursor:pointer; line-height:1; }
.mk-filters { display:grid; grid-template-columns:minmax(180px,2fr) repeat(3,minmax(140px,1fr)); gap:8px; margin-bottom:14px; }
.mk-filters input, .mk-filters select, .mk-form input, .mk-form select { width:100%; padding:9px 11px; border:1px solid var(--mk-line); border-radius:5px; background:var(--mk-sheet); }
.mk-count { font-size:12px; color:var(--mk-dim); margin-bottom:8px; }
.mk-grid { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:20px; align-items:start; }
.mk-rows { display:grid; gap:10px; }
.mk-listing, .mk-trade { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; padding:12px 14px; background:var(--mk-sheet); border:1px solid var(--mk-line); border-radius:8px; }
.mk-listing.mk-own { border-color:var(--mk-gold); background:#fff6dc; }
.mk-items { display:flex; gap:8px; flex-wrap:wrap; max-width:290px; }
.mk-card { position:relative; display:inline-flex; flex-direction:column; align-items:center; width:70px; text-align:center; border-radius:6px; padding:4px; background:#fff; border:2px solid #cdbf9e; }
.mk-card img { width:54px; height:72px; object-fit:cover; border-radius:3px; background:#eadfc6; }
.mk-card b { font-size:9px; line-height:1.15; margin-top:3px; font-weight:700; overflow-wrap:anywhere; }
.mk-card i { position:absolute; top:-6px; right:-6px; background:var(--mk-navy); color:#ffe8b7; border-radius:10px; padding:1px 6px; font-size:11px; font-style:normal; font-weight:800; }
.mk-r-uncommon { border-color:#5aa77e; } .mk-r-rare { border-color:#4d86c6; } .mk-r-epic { border-color:#9a62c9; } .mk-r-legendary { border-color:#e0a82e; box-shadow:0 0 8px #e0a82e88; }
.mk-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mk-sub { color:var(--mk-dim); font-size:12px; margin-top:3px; }
.mk-person { display:inline-flex; align-items:center; gap:6px; font-weight:700; } .mk-person img { border-radius:50%; object-fit:cover; }
.mk-kind { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:4px; background:#e4ecf3; color:#27506f; }
.mk-kind.auction { background:#f1e3f7; color:#6a3a86; }
.mk-you { font-style:normal; font-size:10px; font-weight:800; background:var(--mk-gold); color:#2a1f08; padding:2px 6px; border-radius:4px; }
.mk-deal { font-size:10px; font-weight:800; padding:1px 6px; border-radius:4px; } .mk-deal.good { background:#d4eddd; color:#14633f; } .mk-deal.high { background:#f6e1c9; color:#8a4a10; }
.mk-buy { display:grid; gap:8px; justify-items:end; min-width:190px; }
.mk-price { text-align:right; } .mk-price small { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--mk-dim); } .mk-price .mk-run { font-size:20px; }
.mk-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.mk-bid { display:flex; gap:6px; } .mk-bid input { width:92px; padding:7px 8px; border:1px solid var(--mk-line); border-radius:5px; background:#fff; }
.mk-btn { padding:8px 13px; border:1px solid #b9a77f; border-radius:5px; background:#f1e7cf; font-weight:700; font-size:12px; cursor:pointer; }
.mk-btn:hover:not(:disabled) { background:#e9dcb9; }
.mk-btn.mk-gold { background:var(--mk-gold); border-color:#a8832f; color:#2a1f08; } .mk-btn.mk-gold:hover:not(:disabled) { background:#e0b966; }
.mk-big { padding:12px 22px; font-size:14px; }
.mk-recent { padding:13px; background:var(--mk-sheet); border:1px solid var(--mk-line); border-radius:8px; font-size:12px; position:sticky; top:12px; }
.mk-recent h3 { font-size:15px; margin-bottom:8px; } .mk-recent div { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid #eadfc6; }
.mk-recent span { overflow-wrap:anywhere; }
.mk-pager { display:flex; justify-content:center; align-items:center; gap:14px; padding:6px; }
.mk-empty, .mk-muted { color:var(--mk-dim); } .mk-empty { padding:30px 16px; text-align:center; background:var(--mk-sheet); border:1px dashed var(--mk-line); border-radius:8px; } .mk-empty strong { display:block; color:var(--mk-ink); margin-bottom:4px; }
.mk-sellhead { margin-bottom:12px; color:var(--mk-dim); font-size:13px; } .mk-sellhead b { color:var(--mk-ink); }
.mk-kinds { display:flex; gap:6px; margin-bottom:14px; }
.mk-kinds button { padding:9px 14px; border:1px solid var(--mk-line); background:var(--mk-sheet); border-radius:5px; font-weight:700; cursor:pointer; }
.mk-kinds button[aria-pressed=true] { background:var(--mk-navy); color:#ffe8b7; border-color:var(--mk-navy); }
.mk-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; max-height:420px; overflow:auto; padding:6px 2px; margin-bottom:14px; }
.mk-pick { display:grid; justify-items:center; gap:5px; padding:8px; background:var(--mk-sheet); border:1px solid var(--mk-line); border-radius:8px; text-align:center; }
.mk-pick.on { border-color:var(--mk-gold); background:#fff6dc; } .mk-pick small { font-size:10px; color:var(--mk-dim); }
.mk-pick .mk-card { width:92px; } .mk-pick .mk-card img { width:70px; height:94px; }
.mk-step { display:flex; align-items:center; gap:10px; } .mk-step button { width:28px; height:28px; border-radius:50%; border:1px solid #b9a77f; background:#f1e7cf; font-weight:800; cursor:pointer; } .mk-step span { min-width:18px; text-align:center; font-weight:800; }
.mk-form { display:grid; gap:12px; } .mk-form label { display:grid; gap:4px; font-size:12px; font-weight:700; color:var(--mk-dim); }
.mk-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.mk-summary { font-size:13px; color:var(--mk-dim); }
.mk-app section { margin-bottom:26px; } .mk-app section > h2 { font-size:22px; margin-bottom:10px; }
.mk-twocol { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .mk-twocol h3 { font-size:17px; margin-bottom:8px; }
.mk-chosen { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; } .mk-chosen > div { display:grid; justify-items:center; gap:4px; }
.mk-found { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; } .mk-found button { border:0; background:none; padding:0; cursor:pointer; }
.mk-details { margin:6px 0 10px; } .mk-details summary { cursor:pointer; font-weight:700; font-size:13px; margin-bottom:8px; }
.mk-swap { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; margin:8px 0; } .mk-swap small { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--mk-dim); margin-bottom:4px; }
.mk-swap > div { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .mk-swap small { flex-basis:100%; } .mk-arrows { font-size:22px; color:var(--mk-dim); }
.mk-trade { grid-template-columns:minmax(0,1fr); }
.mk-done { display:flex; gap:12px; align-items:center; padding:8px 0; border-top:1px solid #eadfc6; font-size:13px; }
.mk-state { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:4px; background:#e6e2d6; color:#5b5340; }
.mk-state.sold, .mk-state.accepted { background:#d4eddd; color:#14633f; } .mk-state.declined, .mk-state.cancelled { background:#f6dcd7; color:var(--mk-red); }
@media (max-width:860px) {
  .mk-app { padding:16px 12px 50px; } .mk-app h1 { font-size:30px; }
  .mk-filters { grid-template-columns:1fr 1fr; } .mk-filters .mk-search { grid-column:1 / -1; }
  .mk-grid { grid-template-columns:1fr; } .mk-recent { position:static; order:-1; }
  .mk-listing { grid-template-columns:1fr; } .mk-items { max-width:none; } .mk-buy { justify-items:start; } .mk-price, .mk-actions { justify-content:flex-start; text-align:left; }
  .mk-twocol, .mk-swap { grid-template-columns:1fr; } .mk-arrows { transform:rotate(90deg); justify-self:center; }
}

/* ---- windows: swap picker and confirmations ---- */
body.mk-modal-open { overflow:hidden; }
.mk-shade, .mk-shade *, .mk-shade *::before, .mk-shade *::after { box-sizing:border-box; }
.mk-shade { position:fixed; inset:0; z-index:150; background:#10283ed1; backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:18px; }
.mk-dialog { width:min(520px,100%); max-height:calc(100dvh - 36px); display:flex; flex-direction:column; background:var(--mk-paper); color:var(--mk-ink); border:2px solid var(--mk-gold); border-radius:12px; box-shadow:0 22px 60px #000a; padding:20px; font:14px/1.45 'DM Sans',system-ui,sans-serif; }
.mk-dialog h2 { font:600 24px 'Fraunces',Georgia,serif; margin:0 0 12px; }
.mk-dialog-body { overflow:auto; display:grid; gap:10px; }
.mk-dialog-body .mk-items { max-width:none; }
.mk-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; flex-wrap:wrap; }
.mk-bad { color:var(--mk-red); font-weight:700; margin:0; }
.mk-wide { width:min(1120px,100%); height:calc(100dvh - 36px); padding:0; overflow:hidden; }
.mk-dialog-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px 10px; border-bottom:1px solid var(--mk-line); }
.mk-dialog-head h2 { margin:0; }
.mk-x { width:36px; height:36px; border:1px solid var(--mk-line); border-radius:50%; background:var(--mk-sheet); font-size:22px; line-height:1; cursor:pointer; }
.mk-dialog-scroll { flex:1; min-height:0; overflow:auto; padding:14px 20px; }
.mk-dialog-foot { border-top:1px solid var(--mk-line); padding:12px 20px 14px; background:var(--mk-sheet); border-radius:0 0 10px 10px; }
.mk-dialog-foot .mk-dialog-actions { margin-top:10px; }
.mk-friends small { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--mk-dim); margin-bottom:6px; }
.mk-friends > div { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.mk-friend { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border:1px solid var(--mk-line); border-radius:999px; background:var(--mk-sheet); font-weight:700; cursor:pointer; }
.mk-friend img { border-radius:50%; object-fit:cover; }
.mk-friend.on { background:var(--mk-navy); color:#ffe8b7; border-color:var(--mk-navy); }
.mk-side { min-width:0; display:grid; gap:10px; align-content:start; }
.mk-side h3 { margin:0; }
.mk-hint { color:var(--mk-dim); font-size:12px; }
.mk-chips { display:flex; flex-wrap:wrap; gap:6px; }
.mk-chip { border:1px solid var(--mk-gold); background:#fff6dc; border-radius:999px; padding:4px 6px 4px 11px; font-size:12px; font-weight:700; cursor:pointer; }
.mk-chip b { margin-left:5px; color:var(--mk-red); }
.mk-runefield { display:grid; gap:4px; font-size:12px; font-weight:700; color:var(--mk-dim); }
.mk-runefield input, .mk-find input, .mk-find select { padding:8px 10px; border:1px solid var(--mk-line); border-radius:5px; background:var(--mk-sheet); font:inherit; color:var(--mk-ink); width:100%; }
.mk-find { display:grid; grid-template-columns:1fr 150px; gap:8px; }
.mk-modes { display:flex; gap:6px; flex-wrap:wrap; }
.mk-modes button { padding:7px 12px; border:1px solid var(--mk-line); background:var(--mk-sheet); border-radius:5px; font-weight:700; font-size:12px; cursor:pointer; }
.mk-modes button[aria-pressed=true] { background:var(--mk-navy); color:#ffe8b7; border-color:var(--mk-navy); }
.mk-pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:8px; max-height:360px; overflow:auto; padding:4px 2px; }
.mk-cta { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:16px; background:var(--mk-sheet); border:1px solid var(--mk-line); border-radius:8px; }
.mk-cta p { flex:1; min-width:220px; color:var(--mk-dim); }
@media (max-width:860px) {
  .mk-shade { padding:0; } .mk-wide { height:100dvh; width:100%; border-radius:0; } .mk-dialog-foot { border-radius:0; }
  .mk-flash { bottom:76px; }
  .mk-find { grid-template-columns:1fr; } .mk-pick-grid { max-height:300px; }
}

body.mk-modal-open .rf-dock, body.mk-modal-open .rf-toast-host { display:none !important; }