/* ============================================================================
 * app.css - page styles
 * SLIPPY light: paper cards, 3px black border, 4px hard shadow, Titan One
 * ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.1}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
b{font-weight:700}
input,button,select{font-family:inherit;font-size:inherit}

.mono{font-family:var(--f-mono);font-size:.92em;letter-spacing:-.01em}

/* top bar */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:14px 22px;
  background:rgba(244,233,210,.92);
  backdrop-filter:blur(14px);
  border-bottom:3px solid var(--line);
}

.brand{display:flex;align-items:center;gap:9px;flex-shrink:0}
.brand-name{
  font-family:var(--f-display);
  font-size:19px;letter-spacing:.02em;
  color:var(--ink);
  text-transform:uppercase;
}
.brand-name em{color:var(--red);font-style:normal}

/* navigation */
.tabs{display:flex;gap:6px;margin-left:6px}
.tab{
  padding:8px 15px;
  border:2px solid transparent;
  border-radius:8px;
  font-size:13px;font-weight:600;
  letter-spacing:.02em;
  color:var(--muted);
  transition:color .14s, background .14s, border-color .14s;
  white-space:nowrap;
}
.tab:hover{color:var(--ink);background:var(--paper)}
.tab.on{
  color:var(--ink);
  background:var(--paper);
  border-color:var(--line);
  box-shadow:var(--shadow-sm);
}

/* top bar */
.hd-stats{
  display:flex;gap:16px;margin-left:auto;
  font-family:var(--f-mono);font-size:11px;
  letter-spacing:.06em;color:var(--muted-2);
}
.hd-stat b{color:var(--ink);font-size:12px;margin-left:4px}

/* wallet button */
.wallet-btn{
  display:flex;align-items:center;gap:8px;
  padding:9px 16px;
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--line);
  border-radius:9px;
  box-shadow:var(--shadow-sm);
  font-size:13px;font-weight:700;
  cursor:pointer;
  transition:transform .1s, box-shadow .1s;
  flex-shrink:0;
}
.wallet-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}
.wallet-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.wallet-btn.on{background:var(--green);color:#04220f}
.wallet-btn .dot{
  width:7px;height:7px;border-radius:50%;
  background:#04220f;
}
.hide{display:none !important}

/* layout */
main{max-width:1180px;margin:0 auto;padding:34px 22px 90px}
.view[hidden]{display:none}

.kicker{
  font-family:var(--f-mono);font-size:11px;
  letter-spacing:.18em;color:var(--red);
  margin-bottom:14px;
  text-transform:uppercase;
}

h1{
  font-family:var(--f-display);
  font-size:clamp(38px,6vw,64px);
  letter-spacing:.01em;
  text-transform:uppercase;
  line-height:.98;
  color:var(--ink);
}
h1 em{color:var(--ink-soft);font-style:normal}

.lede{
  max-width:52ch;margin-top:14px;
  color:var(--muted);font-size:15px;line-height:1.6;
}

.page-head{margin-bottom:28px}

/* ------------------------------------------------------------------- Hero -- */
.hero{
  display:block;
  margin-bottom:30px;
}

.stat-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:11px;margin-top:30px;
}
.stat{
  padding:12px 13px;
  background:var(--navy-2);
  border:2px solid var(--line);
  border-radius:var(--r);
}
.stat-k{
  display:block;
  font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.14em;color:var(--muted-2);
  margin-bottom:5px;
}
.stat-v{
  display:block;
  font-family:var(--f-display);
  font-size:19px;
  color:var(--ink);
}

/* ---- draws rolling card ---- */
.roll-head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:10px;border-bottom:2px solid var(--line);
  flex:0 0 auto;
}
.roll-title{
  font-family:var(--f-display);font-size:17px;
  letter-spacing:.01em;color:var(--ink);
}
.roll-count{
  font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.12em;color:var(--muted-2);
}
.roll-view{
  position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;
}
.roll-view.tall{min-height:0}
.panel.side{display:flex;flex-direction:column;min-height:0}
.roll-track{position:relative}
.roll-inner{animation:none}
/* Static list: no fade mask, no clipping */
.roll-view.no-scroll{-webkit-mask-image:none;mask-image:none;overflow-y:auto}
.roll-row{
  display:grid;
  grid-template-columns:56px 1fr 74px;
  gap:8px;align-items:center;
  padding:8px 2px;
  border-bottom:1px solid rgba(11,15,26,.12);
}
.roll-row .r-id{
  font-family:var(--f-mono);font-size:11px;color:var(--ink);
}
.roll-row .r-addr{
  font-family:var(--f-mono);font-size:11px;color:var(--muted-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.roll-row .r-res{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  text-align:right;color:var(--ink);
}
.roll-row .r-res.win{color:var(--ok,#1a7f37)}
.roll-row .r-res.miss{color:var(--muted-2)}
.roll-empty{
  padding:18px 2px;
  font-family:var(--f-mono);font-size:11px;color:var(--muted-2);
}
.roll-legend{
  display:grid;grid-template-columns:56px 1fr 74px;gap:8px;
  padding:8px 2px 6px;
  border-top:2px solid var(--line);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;
  color:var(--muted-2);flex:0 0 auto;
}
.roll-legend span:last-child{text-align:right}
.panel.side:has(.roll-legend){
  padding:14px 14px 0;
  height:246px;
  max-height:246px;
  overflow:hidden;
}

/* panels */
.panel-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:22px;align-items:start;
}
.proto-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;align-items:start;
}

.panel{
  padding:24px;
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.panel.side{background:var(--paper-2)}
.panel.mt-panel{margin-top:22px}

/* faq */
.qa{display:flex;flex-direction:column;gap:0}
.qa-item{
  padding:16px 0;
  border-bottom:1px dashed rgba(11,15,26,.16);
}
.qa-item:last-child{border-bottom:0;padding-bottom:0}
.qa-item:first-child{padding-top:0}
.qa-q{
  font-family:var(--f-display);
  font-size:15px;
  line-height:1.35;
  letter-spacing:.01em;
  color:var(--ink);
  margin-bottom:7px;
}
.qa-a{
  font-size:13px;
  line-height:1.62;
  color:var(--ink-soft);
}

.panel-h{
  font-family:var(--f-display);
  font-size:16px;letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:12px;
}
.panel-h.mt{margin-top:24px}

.panel-note{
  font-size:13.5px;line-height:1.6;
  color:var(--ink-soft);
  margin-bottom:18px;
}

/* rules */
.rules{display:flex;flex-direction:column;gap:10px}
.rules li{
  display:flex;gap:9px;
  font-size:13.5px;line-height:1.5;
  color:var(--ink-soft);
  padding-bottom:10px;
  border-bottom:1px dashed rgba(11,15,26,.16);
}
.rules li:last-child{border-bottom:0;padding-bottom:0}
.rules li b{color:var(--ink);white-space:nowrap;font-family:var(--f-mono)}

/* forms */
.field{display:block;margin-bottom:17px}
.field-k{
  display:block;
  font-family:var(--f-mono);font-size:10px;
  letter-spacing:.13em;color:var(--ink-soft);
  text-transform:uppercase;
  margin-bottom:7px;
}
.field-row{display:flex;gap:9px}
.field-row .input{flex:1;min-width:0}

.input{
  width:100%;
  padding:11px 13px;
  background:#fff;
  border:3px solid var(--line);
  border-radius:9px;
  color:var(--ink);
  font-size:14px;
  outline:none;
  transition:box-shadow .12s;
}
.input:focus{box-shadow:0 0 0 3px rgba(74,125,255,.35)}
.input::placeholder{color:#a8a29a}

.qty-row{display:flex;align-items:center;gap:11px}
.qty-row .input{width:104px}
.qty-hint{font-size:12px;color:var(--muted-2)}
.field-hint{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:var(--muted-2)}

/* quote */
.quote{
  padding:15px 16px;margin-bottom:18px;
  background:#fff;
  border:3px solid var(--line);
  border-radius:9px;
}
.quote-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:6px 0;
  font-size:13.5px;color:var(--ink-soft);
}
.quote-row b{font-family:var(--f-mono);font-size:13px;color:var(--ink)}
.quote-row.total{
  margin-top:6px;padding-top:11px;
  border-top:2px dashed rgba(11,15,26,.22);
  font-size:14px;
}
.quote-row.total b{font-size:19px;font-family:var(--f-display)}
.quote-warn{
  margin-top:9px;padding:8px 11px;
  background:#ffe4e4;color:var(--red-2);
  border:2px solid var(--red-2);border-radius:7px;
  font-size:12.5px;font-weight:600;
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 20px;
  background:#fff;
  color:var(--ink);
  border:3px solid var(--line);
  border-radius:9px;
  box-shadow:var(--shadow-sm);
  font-size:13.5px;font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .1s, box-shadow .1s, background .14s;
  white-space:nowrap;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}
.btn.primary{background:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-2)}
.btn.ghost{background:transparent;color:var(--ink-soft);box-shadow:none;border-color:rgba(11,15,26,.28)}
.btn.ghost:hover{background:rgba(11,15,26,.06);transform:none;box-shadow:none}
.btn-sm{padding:8px 14px;font-size:12.5px;box-shadow:2px 2px 0 var(--line)}
.btn-sm:hover{box-shadow:3px 3px 0 var(--line)}

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

/* ----------------------------------------------------------------- prompt -- */
.prompt-box{
  margin:16px 0 0;
  padding:14px;
  min-height:76px;
  background:#fff;
  color:var(--ink-soft);
  border:3px solid var(--line);
  border-radius:9px;
  font-family:var(--f-mono);font-size:11.5px;
  line-height:1.65;
  white-space:pre-wrap;word-break:break-all;
  overflow:auto;max-height:220px;
}
.prompt-box:empty::after{content:"Fill the fields above — the prompt appears here";color:var(--muted-2);font-family:var(--f-body)}

/* cards */
.mk-grid,.my-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:18px;
}

.mk-card,.my-card{
  display:flex;flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .12s, box-shadow .12s;
}
.mk-card:hover,.my-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}

.mk-art,.my-art{
  position:relative;
  aspect-ratio:1;
  background:var(--paper-2);
  border-bottom:3px solid var(--line);
  display:grid;place-items:center;
  overflow:hidden;
}
.mk-art img,.my-art img{width:100%;height:100%;object-fit:cover}
/* On-chain pixel art: upscale 32x32 with nearest-neighbour or it blurs */
.mk-art img.pixel,.my-art img.pixel,
.pick-art img.pixel{image-rendering:pixelated;image-rendering:crisp-edges}

.mk-body,.my-body{display:flex;flex-direction:column;gap:9px;padding:14px}
.mk-top,.my-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.my-body{flex:1}

.cat-id{
  font-family:var(--f-display);
  font-size:17px;color:var(--ink);
}

.chip{
  padding:3px 7px;
  background:rgba(11,15,26,.09);
  border-radius:5px;
  font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);
}
.chip.gold{background:var(--gold);color:#3d2a00}
.chip.win{background:var(--blue);color:#fff}

.mk-price{font-size:13px;color:var(--ink-soft)}
.mk-price b{font-family:var(--f-display);font-size:20px;color:var(--ink);margin-right:3px}
.mk-seller{font-family:var(--f-mono);font-size:10.5px;color:var(--muted-2)}

.mk-actions,.my-actions{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:auto;padding-top:4px;
}
.mk-actions .btn-sm{width:100%}

/* top bar */
.mk-bar{
  display:flex;align-items:stretch;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  margin-bottom:22px;
}
.mk-bar-stats{display:flex;gap:12px;flex-wrap:wrap}
.mk-stat{
  min-width:118px;
  padding:12px 15px;
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}
.mk-stat-k{
  display:block;
  font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.14em;color:var(--muted-2);
  margin-bottom:5px;
}
.mk-stat-v{display:block;font-family:var(--f-display);font-size:20px;color:var(--ink)}
.mk-bar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mk-sort{min-width:118px;padding-right:8px}
.mk-search{width:132px}

/* art slots */
.art-ph{
  font-family:var(--f-display);
  font-size:15px;
  color:rgba(11,15,26,.22);
  letter-spacing:.02em;
  position:relative;z-index:0;
}
.mk-art img,.my-art img,.pick-art img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}

/* cards */
.mk-card.own{border-color:var(--gold)}
.mk-card.own:hover{box-shadow:6px 6px 0 var(--gold)}

/* listing modal */
.modal.modal-wide{max-width:660px}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-x{
  background:none;border:none;cursor:pointer;
  font-size:16px;line-height:1;color:var(--muted-2);
  padding:2px 4px;
}
.modal-x:hover{color:var(--ink)}

.pick-tools{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.pick-search{flex:1}

.pick-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:11px;
  max-height:min(46vh,340px);
  overflow-y:auto;
  padding:3px;
  margin-bottom:14px;
}
.pick-card{
  position:relative;
  display:flex;flex-direction:column;gap:6px;
  padding:0 0 9px;
  background:#fff;
  border:3px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  overflow:hidden;
  transition:transform .1s, box-shadow .1s, border-color .1s;
}
.pick-card:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--line)}
.pick-card.on{border-color:var(--red);box-shadow:3px 3px 0 var(--red);transform:translate(-1px,-1px)}
.pick-card.locked{opacity:.5;cursor:not-allowed}
.pick-card.locked:hover{transform:none;box-shadow:none}
.pick-art{
  position:relative;
  aspect-ratio:1;
  background:var(--paper-2);
  border-bottom:2px solid var(--line);
  display:grid;place-items:center;
  overflow:hidden;
}
.pick-meta{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:0 8px}
.pick-id{font-family:var(--f-display);font-size:14px;color:var(--ink)}
.pick-pend{
  padding:0 8px;
  font-family:var(--f-mono);font-size:9.5px;color:var(--muted-2);
}
.pick-tick{
  position:absolute;top:6px;right:6px;
  width:20px;height:20px;line-height:18px;
  text-align:center;
  background:var(--red);color:#fff;
  border-radius:50%;
  font-size:12px;font-weight:700;
}
.pick-tick:empty{display:none}

.pick-empty{
  grid-column:1/-1;
  display:flex;flex-direction:column;gap:5px;align-items:center;
  padding:34px 12px;
  background:#fff;
  border:3px dashed rgba(11,15,26,.25);
  border-radius:10px;
  text-align:center;
}
.pick-empty b{font-family:var(--f-display);font-size:14px}
.pick-empty span{font-size:12px;color:var(--muted-2)}

.pick-price{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pick-price-k{
  font-family:var(--f-mono);font-size:10px;
  letter-spacing:.14em;color:var(--muted-2);
  white-space:nowrap;
}
.pick-price .input{flex:1;font-size:15px;font-weight:700}
.pick-foot{
  font-family:var(--f-mono);font-size:11px;
  color:var(--ink-soft);
  padding-bottom:2px;
}

.my-pend{
  padding:9px 11px;
  background:#fff;
  border:2px solid var(--line);
  border-radius:7px;
  font-size:12px;color:var(--ink-soft);
}
.my-pend b{font-family:var(--f-mono);font-size:13px;color:var(--ink)}

/* summary */
.summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;align-items:stretch;
  margin-bottom:22px;
}
.sum-cell{
  padding:14px 15px;
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}
.sum-k{
  display:block;
  font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.14em;color:var(--muted-2);
  margin-bottom:5px;
}
.sum-v{
  display:block;
  font-family:var(--f-display);font-size:22px;
  color:var(--ink);
}

/* buttons */
.grid-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:14px;
}
.grid-title{
  font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--muted-2);
  display:inline-flex;align-items:center;gap:7px;
}
.grid-count{font-family:var(--f-display);font-size:14px;color:var(--ink);letter-spacing:0}

/* toolbar */
.toolbar{
  display:flex;align-items:baseline;gap:9px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:3px solid var(--line);
}
.toolbar-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--muted-2)}
.toolbar-v{font-family:var(--f-display);font-size:19px;color:var(--ink)}

/* panels */
.kv-list{display:flex;flex-direction:column}
.kv{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;
  border-bottom:1px dashed rgba(11,15,26,.16);
  font-size:13px;color:var(--ink-soft);
}
.kv:last-child{border-bottom:0}
.kv b{color:var(--ink);text-align:right;word-break:break-all}

.ep-list{display:flex;flex-direction:column;gap:5px;max-height:430px;overflow-y:auto}
.ep-row{
  display:grid;grid-template-columns:44px 1fr auto;
  gap:10px;align-items:center;
  padding:8px 10px;
  background:#fff;
  border:2px solid var(--line);
  border-radius:7px;
  font-size:12px;
}
.ep-no{font-family:var(--f-display);font-size:13px;color:var(--ink)}
.ep-range{font-family:var(--f-mono);font-size:11px;color:var(--muted-2)}
.ep-price{font-family:var(--f-mono);font-size:11.5px;color:var(--ink);font-weight:700}

.top-list{display:flex;flex-direction:column;gap:4px}
.top-row{
  display:grid;grid-template-columns:38px 1fr auto;
  gap:10px;align-items:center;
  padding:8px 2px;
  border-bottom:1px dashed rgba(11,15,26,.16);
  font-size:12.5px;
}
.top-row:last-child{border-bottom:0}
.top-rank{font-family:var(--f-display);font-size:12px;color:var(--muted-2)}
.top-addr{color:var(--ink-soft);font-family:var(--f-mono);font-size:11.5px}
.top-count{font-weight:700;color:var(--ink);font-size:12px}

/* empty states */
.empty-big{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:52px 22px;
  background:var(--navy-2);
  border:3px dashed var(--line);
  border-radius:var(--r-lg);
  text-align:center;
}
.empty-big b{
  font-family:var(--f-display);
  font-size:17px;color:var(--ink);
  text-transform:uppercase;letter-spacing:.02em;
}
.empty-big span{font-size:13px;color:var(--muted);max-width:44ch}

/* skeletons */
.sk{pointer-events:none;opacity:.55}
.sk-art{aspect-ratio:1;background:var(--navy-3);animation:pulse 1.3s ease-in-out infinite}
.sk-body{display:flex;flex-direction:column;gap:9px;padding:14px}
.sk-line{height:11px;border-radius:5px;background:rgba(11,15,26,.14);animation:pulse 1.3s ease-in-out infinite}
.sk-line.w40{width:40%}
.sk-line.w55{width:55%}
.sk-line.w70{width:70%}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.85}}

/* market toolbar */
.mk-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.mk-bar-stats{display:flex;gap:10px;flex-wrap:wrap}
.mk-stat{
  display:flex;flex-direction:column;gap:2px;
  padding:9px 16px;
  background:var(--paper);
  border:3px solid var(--line);
  border-radius:9px;
  box-shadow:var(--shadow-sm);
  min-width:104px;
}
.mk-stat-k{
  font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
}
.mk-stat-v{font-family:var(--f-display);font-size:16px;color:var(--ink)}
.mk-bar-actions{display:flex;gap:10px;align-items:center}
.mk-search{width:150px}

/* Placeholder so a missing image never leaves a blank block */
.art-ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:
    repeating-linear-gradient(45deg,rgba(11,15,26,.05) 0 6px,transparent 6px 12px),
    var(--paper-2);
}
.art-ph-k{font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;color:var(--muted-2)}
.art-ph-id{font-family:var(--f-display);font-size:22px;color:var(--ink-soft)}

/* listing modal */
.modal-wide{max-width:760px;max-height:86vh;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-head h3{margin-bottom:0}
.modal-x{
  flex:0 0 auto;
  width:32px;height:32px;
  display:grid;place-items:center;
  background:#fff;color:var(--ink);
  border:3px solid var(--line);border-radius:8px;
  box-shadow:2px 2px 0 var(--line);
  font-size:20px;line-height:1;font-weight:700;
  cursor:pointer;
}
.modal-x:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--line)}
.modal-wide .modal-note{margin:10px 0 14px}

.pick-grid{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:11px;
  overflow-y:auto;
  padding:3px 3px 12px;
}
.pick-tile{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--paper);
  border:3px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .1s,box-shadow .1s;
}
.pick-tile:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--line)}
.pick-tile input[type=checkbox]{
  position:absolute;top:7px;left:7px;z-index:2;
  width:19px;height:19px;margin:0;
  accent-color:var(--red);
  cursor:pointer;
}
.pick-tile.is-listed{opacity:.5;cursor:not-allowed}
.pick-tile.is-listed:hover{transform:none;box-shadow:var(--shadow-sm)}
.pick-art{position:relative;aspect-ratio:1;background:var(--paper-2);border-bottom:3px solid var(--line);overflow:hidden;display:grid;place-items:center}
.pick-art img{width:100%;height:100%;object-fit:cover}
.pick-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 9px}
.pick-meta b{font-family:var(--f-display);font-size:13px}
.pick-tag{
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;
  padding:2px 5px;border-radius:4px;
  background:var(--red);color:#fff;
}
.pick-tag.dim{background:rgba(11,15,26,.1);color:var(--ink-soft)}

.pick-empty{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:34px 16px;text-align:center;
}
.pick-empty b{font-family:var(--f-display);font-size:15px;text-transform:uppercase}
.pick-empty span{font-size:12.5px;color:var(--ink-soft)}

.modal-foot{
  flex:0 0 auto;
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding-top:14px;margin-top:6px;
  border-top:2px solid rgba(11,15,26,.14);
}
.pick-all{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;color:var(--ink-soft);
  cursor:pointer;user-select:none;
}
.pick-all input{width:17px;height:17px;margin:0;accent-color:var(--red);cursor:pointer}
.pick-price{flex:1 1 180px;min-width:140px}
.modal-hint{
  flex:0 0 auto;
  margin-top:10px;min-height:17px;
  font-family:var(--f-mono);font-size:11px;color:var(--ink-soft);
}

/* modal */
.modal-wrap{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  padding:20px;
  background:rgba(11,15,26,.55);
  backdrop-filter:blur(4px);
}
.modal{
  width:100%;max-width:400px;
  padding:24px;
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
}
.modal h3{
  font-family:var(--f-display);font-size:18px;
  text-transform:uppercase;margin-bottom:10px;
}
.modal-note{font-size:13px;color:var(--ink-soft);margin-bottom:16px;line-height:1.55}
.modal-err{color:var(--red-2);font-size:12.5px;font-weight:600;min-height:18px;margin:8px 0}
.modal-actions{display:flex;gap:10px;margin-top:6px}

/* ----------------------------------------------------------------- toast -- */
#toast{
  position:fixed;left:50%;bottom:26px;
  transform:translate(-50%,26px);
  z-index:300;
  max-width:min(90vw,560px);
  padding:13px 20px;
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;
  transition:opacity .18s, transform .18s;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.ok{border-color:#0f3d24;background:#c9f2d6}
#toast.err{border-color:#5c1114;background:#ffd6d6}

/* responsive */
@media (max-width:960px){
  .panel-grid,.proto-grid{grid-template-columns:1fr}
  .summary{grid-template-columns:repeat(2,1fr)}
  .hd-stats{display:none}
}

@media (max-width:680px){
  main{padding:22px 15px 70px}
  .topbar{flex-wrap:wrap;gap:10px;padding:11px 15px}
  .tabs{order:3;width:100%;overflow-x:auto;margin-left:0;padding-bottom:2px}
  .tab{padding:7px 12px;font-size:12px}
  .wallet-btn{margin-left:auto}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .panel{padding:18px}
  .mk-grid,.my-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:13px}
  .summary{grid-template-columns:repeat(2,1fr);gap:9px}
  .brand-name{font-size:16px}
  h1{font-size:clamp(32px,9vw,44px)}
}