/* maxBet Market — additions on top of the shared escrow design system (style.css) */
body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.topbar .iconbtn.sm { width: 38px; height: 38px; border-radius: 12px; }
.iconbtn.on { color: var(--danger); border-color: rgba(255,122,122,.35); }
.iconbtn.on svg { fill: currentColor; }

/* bottom navigation */
#nav { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 15; display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-2); border-radius: 22px; padding: 6px; box-shadow: 0 10px 34px rgba(0,0,0,.35); }
#nav button { background: none; border: 0; color: var(--hint); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 5px; border-radius: 15px; font: 600 10.5px var(--font-ui); cursor: pointer; }
#nav button .i { width: 21px; height: 21px; }
#nav button.on { color: var(--gold); background: var(--gold-soft); }
#nav button.sell { color: var(--primary-text); background: var(--primary-bg); margin: 0 4px; box-shadow: 0 6px 18px rgba(201,168,127,.22); }
#nav button.sell.on { outline: 2px solid var(--gold-line); }

/* browse hero + search */
.mhero { position: relative; border-radius: 24px; padding: 18px 16px 16px; margin-bottom: 12px; overflow: hidden; color: #f2ede6;
  background: radial-gradient(80% 120% at 100% 0%, rgba(201,168,127,.22), transparent 55%), linear-gradient(160deg, #141414, #060606 70%);
  border: 1px solid rgba(201,168,127,.24); }
.mhero .eyebrow { color: rgba(242,237,230,.5); }
.mh { font: 650 21px/1.2 var(--font-display); letter-spacing: -.6px; margin: 8px 0 14px; }
.msearch { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(201,168,127,.28); border-radius: 15px; padding: 4px 4px 4px 12px; color: #d2b38b; }
.msearch input { border: 0; background: none; padding: 9px 0; color: #f2ede6; box-shadow: none !important; }
.msearch input::placeholder { color: rgba(242,237,230,.4); }
.fbtn { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--gold-grad); color: #0d0a06; display: grid; place-items: center; cursor: pointer; }
.fbtn i { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: #f2ede6; color: #0d0a06; font: 700 10.5px/18px var(--font-ui); font-style: normal; }
.cchips { display: flex; gap: 7px; overflow-x: auto; margin: 0 -14px 12px; padding: 2px 14px 4px; scrollbar-width: none; }
.cchips::-webkit-scrollbar { display: none; }
.cchips button { flex: none; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); border-radius: 999px; padding: 8px 13px; font: 600 13px var(--font-ui); cursor: pointer; }
.cchips button em { font-style: normal; color: var(--hint); font-weight: 500; margin-left: 3px; }
.cchips button.on { border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold); }
.rcount { margin: 0 6px 8px; }

/* listing card */
.lcard { display: flex; gap: 12px; padding: 12px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); cursor: pointer; animation: rise .3s var(--ease) both; }
.lcard:active { transform: scale(.99); }
.lthumb { position: relative; flex: none; width: 92px; height: 92px; border-radius: 15px; overflow: hidden; background: var(--raise); display: grid; place-items: center; }
.lthumb img { width: 100%; height: 100%; object-fit: cover; }
.lthumb em { position: absolute; right: 5px; bottom: 5px; font: 700 10px/1 var(--font-ui); font-style: normal; padding: 3px 6px; border-radius: 7px; background: rgba(0,0,0,.6); color: #fff; }
.lbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lcasino { font: 600 11.5px var(--font-ui); color: var(--gold); letter-spacing: .2px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltitle { font: 600 15px/1.25 var(--font-ui); letter-spacing: -.2px; }
.lchips { display: flex; gap: 5px; flex-wrap: wrap; }
.lchips span { font: 500 11px var(--font-ui); padding: 3px 7px; border-radius: 7px; background: var(--raise); color: var(--text-2); white-space: nowrap; }
.lfoot { margin-top: auto; gap: 8px; }
.lprice { font: 700 16px var(--font-ui); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lprice small { font-size: 11px; color: var(--hint); font-weight: 600; }
.lprice i { font: 700 9.5px var(--font-ui); font-style: normal; color: var(--gold); border: 1px solid var(--gold-line); border-radius: 5px; padding: 1px 4px; margin-left: 5px; vertical-align: 2px; }
.smini { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; color: var(--text-2); }
.smini b { font-weight: 600; max-width: 96px; }
.smini .star { color: var(--gold); font-weight: 600; white-space: nowrap; }
.rtag { display: inline-flex; align-items: center; gap: 3px; font: 600 11px var(--font-ui); color: var(--ok); background: var(--ok-soft); border-radius: 7px; padding: 3px 7px; white-space: nowrap; }
.lres { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.lres b { color: var(--ok); font-size: 13px; }
.lstats { margin-top: 4px; display: flex; gap: 4px; align-items: center; }

/* casino monogram */
.ctile { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font: 800 15px var(--font-ui); letter-spacing: -.3px; color: #fff;
  background: linear-gradient(150deg, hsl(var(--h) 45% 42%), hsl(calc(var(--h) + 35) 50% 22%)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.ctile.lg { width: 100%; height: 100%; border-radius: 0; font-size: 26px; }

/* listing page */
.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 -14px 8px; padding: 0 14px; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery img { flex: none; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; scroll-snap-align: center; border: 1px solid var(--line); background: var(--raise); }
.gdots { display: flex; justify-content: center; gap: 5px; margin-bottom: 10px; }
.gdots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: all .2s; }
.gdots i.on { width: 16px; background: var(--gold); }
.lhead .lt { font: 650 19px/1.25 var(--font-display); letter-spacing: -.4px; margin-top: 2px; }
.lpbig { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; font: 700 32px/1 var(--font-display); letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.lpbig small { font: 600 14px var(--font-ui); color: var(--hint); letter-spacing: .3px; }
.lmeta { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lmeta > span { display: inline-flex; align-items: center; gap: 4px; }
.ldesc { white-space: pre-wrap; line-height: 1.55; font-size: 14.5px; color: var(--text); }
.card.actions .linkbtn { display: flex; margin: 12px auto 0; }
.scard { cursor: pointer; }
.scard .chev, .scard > .row > .i:last-child { color: var(--hint); }
.orow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.orow:last-child { border-bottom: 0; }
.orow.tap, .tap { cursor: pointer; }
.okring { width: 64px; height: 64px; margin: 6px auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }

/* sell form photos */
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ph { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--raise); border: 1px solid var(--line); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph button { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 9px; border: 0; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ph.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed var(--gold-line); background: var(--gold-soft); color: var(--gold); font: 600 12px var(--font-ui); cursor: pointer; }

/* me */
.mehero { padding-top: 18px; }
.mehero .hello { margin-top: 18px; }
.wcard .ldesc { font-size: 14px; color: var(--text-2); }
.wrow { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.wrow input { padding: 10px 11px; font-size: 12px; }
.wnet { font: 700 11.5px var(--font-ui); color: var(--text-2); }
.chips .chip .coin { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font: 700 11px var(--font-ui); color: #fff; }
.sheet .chips { grid-template-columns: 1fr; }
.eyebrow .coin { width: 18px; height: 18px; border-radius: 6px; display: inline-grid; place-items: center; font: 700 9px var(--font-ui); color: #fff; vertical-align: -4px; margin-right: 4px; }

.lv { flex: none; font: 800 9.5px/1 var(--font-ui); padding: 3px 5px; border-radius: 6px; color: #0d0a06; letter-spacing: .2px; }
.lv.bronze { background: linear-gradient(135deg, #f6c79d, #b9773f); } .lv.silver { background: linear-gradient(135deg, #fff, #b8c2cc); }
.lv.gold { background: linear-gradient(135deg, #fff1c2, #dfb04e); } .lv.platinum { background: linear-gradient(135deg, #effdff, #9fdde5); }
.lv.diamond { background: linear-gradient(135deg, #efe7ff, #a593ff); } .lv.legend { background: linear-gradient(110deg, #b8976d, #f8e6b8 50%, #c9a87f); }

/* ── trust & safety ── */
.trust { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; font: 600 11.5px var(--font-ui); color: var(--hint); }
.trust span + span::before { content: '·'; margin-right: 10px; opacity: .6; }
.trust .warnc, .warnc { color: var(--warn); }
.scamchip { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); background: var(--danger-soft); border-radius: 999px; padding: 1px 8px 1px 6px; }
.scamchip .i { width: 12px; height: 12px; }
.vtick { flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #2f9bff; color: #fff; vertical-align: -2px; }
.vtick .i { width: 11px; height: 11px; stroke-width: 3.2; }
.vtick.lg { width: 21px; height: 21px; } .vtick.lg .i { width: 13px; height: 13px; }
.scambar { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid rgba(255,122,122,.28); background: var(--danger-soft); color: var(--text-2);
  border-radius: 15px; padding: 10px 12px; margin: 0 0 12px; font: 500 12.5px/1.35 var(--font-ui); cursor: pointer; }
.scambar > .i:first-child { color: var(--danger); flex: none; }
.scambar b { color: var(--text); }
.scamhero { background: radial-gradient(80% 120% at 100% 0%, rgba(255,122,122,.2), transparent 55%), linear-gradient(160deg, #161010, #060606 70%); border-color: rgba(255,122,122,.28); }
.scard2 .rtext { margin: 10px 0 2px; white-space: pre-wrap; }
.scard2.pending { opacity: .85; border-style: dashed; }
.sproofs { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; }
.sproofs img { flex: none; width: 92px; height: 92px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-2); cursor: zoom-in; }
.callout.tap { cursor: pointer; }
.qbadge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font: 700 10.5px/18px var(--font-ui); font-style: normal; text-align: center; margin-left: 4px; vertical-align: 1px; }
.qbadge.gold { background: var(--gold); color: #0d0a06; }
.tabs.scroll { overflow-x: auto; scrollbar-width: none; }
.tabs.scroll::-webkit-scrollbar { display: none; }
.tabs.scroll button { flex: none; padding: 9px 12px; white-space: nowrap; }
.mb { margin-bottom: 12px; }

/* escrow tracker */
.trk { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 13px 14px; margin-bottom: 10px; }
.trk.disp { border-color: rgba(255,122,122,.35); }
.tsteps { display: grid; grid-template-columns: repeat(5, 1fr); margin: 14px 0 2px; position: relative; }
.tstep { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; font: 600 10.5px var(--font-ui); color: var(--hint); text-align: center; }
.tstep::before { content: ''; position: absolute; top: 12px; right: 50%; width: 100%; height: 2px; background: var(--line-2); z-index: 0; }
.tstep:first-child::before { display: none; }
.tstep.done::before, .tstep.now::before { background: var(--gold); }
.tstep i { position: relative; z-index: 1; width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: var(--raise); border: 2px solid var(--line-2); color: var(--hint); }
.tstep.done i { background: var(--gold); border-color: var(--gold); color: #0d0a06; }
.tstep.done i .i { width: 13px; height: 13px; stroke-width: 3; }
.tstep.now i { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.tstep.now span, .tstep.done span { color: var(--text-2); }

/* price guide */
.guide .gnum { font: 650 22px var(--font-display); letter-spacing: -.5px; margin: 10px 0 2px; }
.gbar { position: relative; height: 8px; border-radius: 4px; margin: 14px 0 6px; background: linear-gradient(90deg, var(--ok-soft), var(--gold-soft), var(--warn-soft)); border: 1px solid var(--line); }
.gbar i { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--gold); border: 3px solid var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.ghint { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 13px; background: var(--gold-soft); color: var(--text-2); font: 500 12.5px/1.4 var(--font-ui); }
.ghint .i { flex: none; color: var(--gold); margin-top: 1px; }

/* reviews */
.sreviews { margin-top: 10px; border-top: 1px solid var(--line); }
.sreviews .review:last-child { border-bottom: 0; }
.starpick { display: flex; justify-content: center; gap: 6px; margin: 18px 0 4px; }
.starpick button { border: 0; background: none; padding: 2px; cursor: pointer; }
.starpick svg { width: 38px; height: 38px; fill: none; stroke: var(--line-2); stroke-width: 1.5; transition: transform .15s; }
.starpick button.on svg { fill: var(--gold); stroke: var(--gold); }
.starpick button:active svg { transform: scale(.9); }

/* dashboard charts */
.bars { display: flex; align-items: flex-end; gap: 2px; height: 96px; margin: 12px 0 6px; }
.bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bar i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 1px 1px; background: var(--text-2); opacity: .55; }
.bars.ok .bar i { background: var(--ok); opacity: .8; }
.bars.gold .bar i { background: var(--gold); opacity: .85; }
.hrow { padding: 8px 0; }
.hbar { height: 6px; border-radius: 3px; background: var(--raise); margin-top: 6px; overflow: hidden; }
.hbar i { display: block; height: 100%; border-radius: 3px; background: var(--gold-grad); }
.seg button em { font-style: normal; opacity: .6; font-size: 11px; margin-left: 3px; }

.scamrow { margin-top: 7px; }
.tabs button { position: relative; }
.tabs button .qbadge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px; line-height: 16px; margin: 0; }
.seg.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* photos: show the whole picture, fitted */
.gallery { align-items: center; }
.gallery img { object-fit: contain; aspect-ratio: auto; height: auto; max-height: min(62vh, 430px); background: #0b0a09; }
.lthumb { background: #0b0a09; }
.lthumb img, .ph img, .sproofs img { object-fit: contain; }
.fullimg { display: block; width: 100%; max-height: 78vh; object-fit: contain; border-radius: 16px; background: #0b0a09; }
/* browse quick links */
.bquick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.bquick button { display: flex; align-items: center; gap: 9px; text-align: left; padding: 10px 11px; border-radius: 15px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; min-width: 0; }
.bquick button > .i { flex: none; color: var(--gold); }
.bquick button.danger { border-color: rgba(255,122,122,.28); background: var(--danger-soft); }
.bquick button.danger > .i { color: var(--danger); }
.bquick span { display: flex; flex-direction: column; min-width: 0; font: 650 13px var(--font-ui); }
.bquick em { font-style: normal; font: 500 11px var(--font-ui); color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* scam search */
.slabel { font: 650 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: rgba(242,237,230,.55); margin: 12px 2px 6px; }
.srow { display: flex; gap: 8px; align-items: stretch; }
.srow .msearch { margin: 0; min-width: 0; }
.srow .dd, .srow select { flex: 0 0 40%; min-width: 0; }

.srow .dd-btn { height: 100%; background: rgba(255,255,255,.06); border-color: rgba(201,168,127,.28); color: #f2ede6; }
.srow .dd-btn .dd-chev { color: #d2b38b; }
.srow .msearch > svg, .srow .msearch > .i { flex: none; width: 18px; height: 18px; }
.scamhero #sgo2 { width: 100%; background: var(--gold-grad); color: #0d0a06; border: 0; box-shadow: none; }

/* website (maxbetmarket.com) */
.webauth { padding: 8px 12px; margin-left: 6px; }
.topbar .iconbtn + .iconbtn, .topbar [data-account] { margin-left: 6px; }
[data-account] .ava { width: 30px; height: 30px; border-radius: 10px; }
.tgw { min-height: 48px; display: flex; justify-content: center; align-items: center; }
@media (min-width: 640px) {
  html.web body { padding-top: 22px; }
  html.web #app { max-width: 600px; margin: 0 auto; }
  html.web #nav { max-width: 560px; margin: 0 auto; }
  html.web .sheet { max-width: 560px; margin: 0 auto; }
}