:root {
  --bg: #080d17;
  --bg-deep: #060a12;
  --surface: #101a2b;
  --surface-2: #142238;
  --surface-3: #192a43;
  --line: #293b55;
  --line-soft: rgba(165, 185, 213, .14);
  --text: #f4f7fc;
  --muted: #9aaac0;
  --muted-2: #6e8099;
  --coral: #ff5c61;
  --coral-button: #c83e52;
  --coral-button-hover: #b93248;
  --coral-2: #ff8062;
  --mint: #4cdeb5;
  --mint-2: #8de8c9;
  --blue: #77b1ff;
  --gold: #f5c96b;
  --purple: #ac8cff;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 25px 90px rgba(0, 0, 0, .3);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 92% 1%, rgba(255, 92, 97, .14), transparent 28rem),
    radial-gradient(circle at 4% 23%, rgba(76, 222, 181, .07), transparent 25rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
body.modal-open, body.chat-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
[hidden] { display: none !important; }

.app-shell { overflow: hidden; }
.section-shell { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }

/* Demo notice */
.demo-notice { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 11px 14px; border: 1px solid rgba(245,201,107,.35); border-radius: 12px; color: var(--muted); background: rgba(245,201,107,.07); font-size: 11px; }
.demo-notice > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.demo-notice p { margin: 0; }
.demo-notice-label { color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.demo-notice a { flex: 0 0 auto; color: var(--gold); font-size: 10px; font-weight: 800; }
.demo-notice a:hover { color: #fff; }

/* Header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 76px;
  padding: 0 28px;
  border-bottom: 1px solid rgba(165, 185, 213, .13);
  background: rgba(8, 13, 23, .88);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
/* The real logo is a circular badge, so it is shown as a disc with a hairline
   rim. The rim matters: without it a transparent PNG disappears into the dark
   header and the brand looks broken. */
.brand-logo { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #0b1425; box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(245,201,107,.5); }
.brand-mark { position: relative; width: 36px; height: 36px; display: block; border-radius: 11px; background: linear-gradient(145deg, var(--coral), #cf385b); box-shadow: 0 8px 24px rgba(255, 92, 97, .23); overflow: hidden; }
.brand-mark span { position: absolute; display: block; width: 18px; height: 23px; border: 1px solid rgba(255,255,255,.72); border-radius: 4px; background: rgba(255,255,255,.14); }
.brand-mark span:nth-child(1) { left: 5px; top: 9px; transform: rotate(-15deg); }
.brand-mark span:nth-child(2) { left: 10px; top: 6px; transform: rotate(4deg); background: rgba(255,255,255,.24); }
.brand-mark span:nth-child(3) { left: 15px; top: 10px; transform: rotate(20deg); background: rgba(255,255,255,.1); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { color: var(--text); font-size: 14px; font-weight: 850; letter-spacing: .08em; }
.brand-copy small { margin-top: 4px; color: var(--muted-2); font-size: 9px; font-weight: 650; letter-spacing: .035em; }
.main-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.main-nav a { padding: 9px 10px; border-radius: 9px; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: var(--text); background: rgba(255,255,255,.065); }
.nav-count { display: inline-grid; width: 17px; height: 17px; place-items: center; margin-left: 3px; border-radius: 50%; color: #fff; background: var(--coral); font-size: 9px; }
/* The rule above sets an explicit display, and an author display value beats the
   user agent's `[hidden] { display: none }`. Without this, setting the hidden
   attribute on a badge does nothing at all and a signed-out visitor is shown a
   red 0 next to Offers & trades, implying an offer is waiting when there is
   nothing there. */
.nav-count[hidden] { display: none; }
.account-signout { border-top: 1px solid var(--line-soft); }
.account-signout .account-actions { margin-top: 13px; }
.header-actions { display: flex; align-items: center; gap: 7px; }



select option { color: #172337; background: #f5f7fb; }
.text-button { padding: 7px 5px; border: 0; color: var(--muted); background: transparent; font-size: 12px; font-weight: 750; }
.text-button:hover { color: var(--text); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; color: var(--text); background: var(--surface-2); font-size: 12px; font-weight: 800; white-space: nowrap; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-1px); text-decoration: none; }
.button-primary { color: #fff; background: var(--coral-button); box-shadow: 0 8px 22px rgba(255,92,97,.17); }
.button-primary:hover { background: var(--coral-button-hover); }
.button-ghost { border-color: var(--line); color: var(--muted); background: rgba(16,26,43,.6); }
.button-ghost:hover { border-color: var(--mint); color: var(--text); background: rgba(76,222,181,.07); }
.button-upload { min-height: 40px; color: #fff; background: var(--coral-button); }
.button-upload span { font-size: 17px; line-height: 0; }
.button-large { min-height: 47px; padding: 0 18px; font-size: 13px; }
.full-width { width: 100%; }
.icon-button { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: transparent; }
.icon-button:hover { border-color: var(--mint); color: var(--text); }
.menu-button { display: none; width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--surface); font-size: 17px; }

/* Shared */
.eyebrow, .section-kicker { color: var(--mint); font-size: 10px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 19px; }
.eyebrow-dot, .live-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px var(--mint); }
.section-kicker { margin-bottom: 10px; color: var(--coral); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; }
h2 { max-width: 720px; margin-bottom: 13px; font-size: clamp(31px, 4.2vw, 50px); line-height: 1.04; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; margin-bottom: 28px; }
.section-heading p { max-width: 650px; margin: 0; color: var(--muted); font-size: 15px; }
.heading-side-note { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(16,26,43,.62); font-size: 11px; white-space: nowrap; }
.heading-side-stack { display: grid; gap: 8px; justify-items: end; }
.heading-side-note strong { color: var(--text); }
.live-pulse { width: 7px; height: 7px; }
.mini-status { display: inline-flex; align-items: center; gap: 7px; color: var(--mint-2); font-size: 11px; font-weight: 750; white-space: nowrap; }
.mini-status i, .live-indicator i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }
.mt { margin-top: 22px; }
.center-action { display: flex; justify-content: center; }
.tiny-label { color: var(--muted-2); font-size: 9px; font-weight: 850; letter-spacing: .13em; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(410px, .9fr); gap: 70px; align-items: center; min-height: 650px; padding-top: 80px; padding-bottom: 78px; }
.hero-copy h1 { max-width: 710px; margin-bottom: 24px; font-size: clamp(47px, 6.3vw, 78px); line-height: .98; }
.hero-copy h1 em { color: var(--coral); font-style: normal; }
.hero-lede { max-width: 640px; margin-bottom: 27px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 31px; }
.hero-proof { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.hero-proof strong, .hero-proof span { display: block; }
.hero-proof strong { color: var(--text); font-size: 11px; }
.hero-proof span { margin-top: 3px; color: var(--muted-2); font-size: 10px; }
.avatar-stack { display: flex; padding-left: 5px; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; margin-left: -5px; border: 2px solid var(--bg); border-radius: 50%; color: #fff; font-size: 10px; font-weight: 850; }
.avatar-a { background: #e8957b; }.avatar-b { background: #647fd2; }.avatar-c { background: #c17cba; }.avatar-d { background: #1f2c42; color: var(--mint-2); }
/* The panel behind the hero cards.
   Four layers, back to front: a deep diagonal base, a warm spotlight centred on
   the card fan, a faint dot grid for texture, and a vignette to push the edges
   back. The cards are the only saturated thing in here, which is what makes
   them read as the subject rather than as decoration. */
.hero-visual { position: relative; min-height: 470px; padding: 22px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(150deg, #1b2b41 0%, #101c2f 46%, #0a1220 100%); box-shadow: var(--shadow); overflow: hidden; isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 50%, transparent 22%, rgba(4,7,14,.5) 82%); pointer-events: none; }
/* Warm pool of light under the fan, so the cards sit in a lit space. */
.visual-spotlight { position: absolute; z-index: 0; left: 50%; top: 44%; width: 460px; height: 380px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(ellipse at center, rgba(116,173,255,.2) 0%, rgba(245,201,107,.11) 38%, rgba(10,18,32,0) 68%); filter: blur(6px); }
/* Dot grid, masked to fade out towards the edges. */
.hero-visual::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 45%, #000 0%, transparent 72%); }
.visual-orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(3px); pointer-events: none; }
.visual-orb-one { width: 260px; height: 260px; right: -95px; top: -100px; background: rgba(255,92,97,.2); }
.visual-orb-two { width: 240px; height: 240px; left: -120px; bottom: -110px; background: rgba(76,222,181,.1); }
.visual-topline, .visual-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--mint-2); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.secure-label { color: var(--mint-2); font-size: 10px; font-weight: 800; }
.collector-card-stack { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; height: 252px; margin: 16px 0 8px; transform: translateX(-7px); }
/* Real card photography, so the card itself is the artwork. No decorative
   frame: a border on top of a real card just crops it. Sizing follows the
   63x88mm trading-card ratio so the fan is not subtly stretched.

   The fan is flex-centred rather than absolutely positioned. Rotating a card
   widens its bounding box by roughly a quarter of its height, so fixed left
   and right offsets pushed the outer cards outside the panel and clipped them
   against its edge. Centring the row and letting each card rotate in place
   keeps the fan intact at every panel width. */
.collector-card { position: relative; width: clamp(120px, 30%, 168px); flex: 0 0 auto; margin: 0 -18px; transform-origin: 50% 86%; transition: transform .45s cubic-bezier(.2,.8,.25,1); }
.collector-card img { display: block; width: 100%; height: auto; border-radius: 9px; box-shadow: 0 22px 40px rgba(0,0,0,.52), 0 4px 10px rgba(0,0,0,.4); }
/* A thin bright edge picks out the card against the dark panel. */
.collector-card::after { content: ""; position: absolute; inset: 0; border-radius: 9px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.22); }
/* The two outer cards tilt by different amounts, so their bounding boxes come
   out different widths and the fan sat off-centre with a tight right edge.
   16 degrees against 11 keeps the fan lively while balancing the two sides. */
.card-art-one { z-index: 3; transform: rotate(-11deg) translateY(24px); }
.card-art-two { z-index: 2; transform: rotate(6deg) translateY(-2px); }
.card-art-three { z-index: 1; transform: rotate(16deg) translateY(28px); }
/* Hover lifts the card it belongs to rather than the whole fan, so the stack
   still reads as three separate listings. */
@media (hover: hover) {
  .card-art-one:hover { transform: rotate(-11deg) translateY(8px) scale(1.05); z-index: 5; }
  .card-art-two:hover { transform: rotate(6deg) translateY(-18px) scale(1.07); z-index: 5; }
  .card-art-three:hover { transform: rotate(16deg) translateY(12px) scale(1.05); z-index: 5; }
}
/* Coloured bloom behind each card, tinted to its own artwork, which stops the
   three of them merging into one dark mass. */
.collector-card-stack::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 46%; width: 340px; height: 250px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(ellipse at 22% 55%, rgba(245,201,107,.3) 0%, transparent 55%), radial-gradient(ellipse at 50% 40%, rgba(255,138,76,.24) 0%, transparent 58%), radial-gradient(ellipse at 80% 60%, rgba(124,110,240,.28) 0%, transparent 56%); filter: blur(14px); }
.offer-preview { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(8,13,23,.68); }
.offer-preview-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--coral-2); background: rgba(255,92,97,.12); font-size: 20px; }
.offer-preview-copy { flex: 1; min-width: 0; }.offer-preview-copy strong, .offer-preview-copy span { display: block; }.offer-preview-copy strong { font-size: 11px; }.offer-preview-copy span { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.offer-preview-amount { text-align: right; }.offer-preview-amount small, .offer-preview-amount strong { display: block; }.offer-preview-amount small { color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.offer-preview-amount strong { margin-top: 2px; color: var(--gold); font-size: 16px; }
.offer-check { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--mint); background: rgba(76,222,181,.13); font-size: 12px; }
.visual-foot { margin-top: 12px; color: var(--muted-2); font-size: 9px; }.visual-foot span { display: inline-flex; align-items: center; gap: 5px; }.tiny-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--mint); }

/* Trust strip */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 112px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); overflow: hidden; }
.trust-item { display: flex; align-items: center; gap: 11px; min-height: 91px; padding: 17px 18px; background: rgba(16,26,43,.9); }
.trust-icon { width: 33px; height: 33px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(76,222,181,.3); border-radius: 10px; color: var(--mint); background: rgba(76,222,181,.09); font-size: 15px; }
.trust-icon.blue { color: var(--blue); border-color: rgba(119,177,255,.3); background: rgba(119,177,255,.09); }.trust-icon.coral { color: var(--coral-2); border-color: rgba(255,92,97,.3); background: rgba(255,92,97,.09); }.trust-icon.gold { color: var(--gold); border-color: rgba(245,201,107,.3); background: rgba(245,201,107,.09); }
.trust-item strong, .trust-item span { display: block; }.trust-item strong { font-size: 11px; }.trust-item span { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }

/* Sections */
.content-section { padding-top: 0; padding-bottom: 112px; }
.market-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 170px 170px auto; gap: 9px; margin-bottom: 12px; }
.search-field, .select-field { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(16,26,43,.74); }
.search-field > span { color: var(--muted); font-size: 23px; line-height: 0; transform: translateY(-2px); }.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }.search-field input::placeholder { color: var(--muted-2); }
.select-field { position: relative; display: block; padding-top: 5px; }.select-field span { position: absolute; top: 6px; left: 13px; color: var(--muted-2); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.select-field select { width: 100%; min-height: 28px; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 11px; cursor: pointer; }
.filter-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: rgba(16,26,43,.74); font-size: 11px; font-weight: 800; }.filter-button:hover { border-color: var(--mint); color: var(--text); }.filter-button b { min-width: 18px; padding: 2px 5px; border-radius: 99px; color: var(--mint-2); background: rgba(76,222,181,.12); font-size: 9px; }
.category-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }.category-chip { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 800; }.category-chip:hover, .category-chip.active { border-color: rgba(76,222,181,.4); color: var(--mint-2); background: rgba(76,222,181,.09); }
.market-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.card-listing { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(20,33,53,.9), rgba(13,22,36,.9)); overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }.card-listing:hover { border-color: rgba(116,173,255,.5); transform: translateY(-3px); box-shadow: 0 17px 38px rgba(0,0,0,.22); }
.listing-art { position: relative; height: 245px; overflow: hidden; border-bottom: 1px solid rgba(165,185,213,.12); }.listing-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.15), transparent 40%); }.art-badge { position: absolute; z-index: 2; top: 11px; left: 11px; padding: 4px 7px; border-radius: 5px; color: #fff; background: rgba(12,24,41,.75); font-size: 9px; font-weight: 850; letter-spacing: .04em; }.art-availability { position: absolute; z-index: 2; right: 10px; top: 10px; width: 9px; height: 9px; border: 2px solid #11233b; border-radius: 50%; background: var(--mint); }.listing-art-one { background: linear-gradient(145deg, #246898, #5ab6ad 47%, #e19b60); }.listing-art-two { background: linear-gradient(145deg, #c48b4d, #743d74 47%, #232d6a); }.listing-art-three { background: linear-gradient(145deg, #79b1a0, #263f63 46%, #c7a263); }.listing-art-four { background: linear-gradient(145deg, #334b9b, #9a65bb 48%, #ee9b68); }.listing-art-five { background: linear-gradient(145deg, #ba5a55, #6d2c59 49%, #24295c); }.listing-art-six { background: linear-gradient(145deg, #3a8ca4, #4d5bb2 50%, #e7a864); }.listing-art-seven { background: linear-gradient(145deg, #6d9b54, #3e3f8b 51%, #d2aa5d); }.listing-art-eight { background: linear-gradient(145deg, #c76d50, #784275 46%, #2c5071); }
.art-glow { position: absolute; width: 145px; height: 145px; left: 50%; top: 46%; border-radius: 50%; background: radial-gradient(circle, rgba(255,247,180,.95) 0 10%, rgba(255,207,103,.6) 19%, rgba(255,255,255,0) 65%); transform: translate(-50%, -50%); filter: drop-shadow(0 0 22px rgba(255,216,112,.7)); }.listing-art-two .art-glow { background: radial-gradient(circle, rgba(255,241,181,.9) 0 10%, rgba(246,180,225,.35) 22%, transparent 67%); }.listing-art-three .art-glow { background: radial-gradient(circle, rgba(212,255,230,.85) 0 10%, rgba(108,226,194,.38) 22%, transparent 67%); }.listing-art-four .art-glow { background: radial-gradient(circle, rgba(255,255,255,.8) 0 8%, rgba(169,144,255,.48) 23%, transparent 68%); }
.art-shape { position: absolute; left: 50%; bottom: -17px; width: 185px; height: 125px; background: rgba(15,28,58,.78); clip-path: polygon(0 100%, 22% 30%, 43% 62%, 67% 8%, 100% 100%); transform: translateX(-50%); }.listing-art-three .art-shape { background: rgba(22,58,76,.72); clip-path: polygon(0 100%, 30% 55%, 45% 16%, 60% 53%, 100% 0, 100% 100%); }.listing-art-five .art-shape { background: rgba(39,20,56,.76); clip-path: polygon(0 100%, 14% 45%, 38% 70%, 52% 20%, 77% 52%, 100% 13%, 100% 100%); }
.art-sparkle { position: absolute; z-index: 1; color: #fff4bc; font-size: 18px; }.art-sparkle.one { top: 59px; left: 35px; }.art-sparkle.two { top: 88px; right: 42px; font-size: 12px; }.art-sparkle.three { top: 37px; right: 90px; font-size: 10px; }
.listing-info { padding: 14px 14px 13px; }.listing-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }.listing-set { color: var(--muted-2); font-size: 9px; font-weight: 800; }.listing-number { color: var(--muted-2); font-size: 9px; }.listing-name { min-height: 39px; margin: 0 0 6px; font-size: 14px; line-height: 1.35; }.listing-meta { display: flex; align-items: center; gap: 6px; min-height: 21px; color: var(--muted); font-size: 10px; }.condition-tag { padding: 3px 6px; border-radius: 5px; color: var(--mint-2); background: rgba(76,222,181,.1); font-size: 9px; font-weight: 800; }.condition-tag.graded { color: var(--gold); background: rgba(245,201,107,.11); }.listing-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line-soft); }.owner-mini { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: 9px; }.owner-avatar { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #c47b9c, #5a70bb); font-size: 8px; font-weight: 850; }.owner-avatar.green { background: linear-gradient(145deg, #5c9c85, #436eb0); }.owner-avatar.gold { background: linear-gradient(145deg, #b78a50, #8b5475); }.owner-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.asking-price { color: var(--mint-2); font-size: 10px; font-weight: 850; white-space: nowrap; }
.listing-offer { min-height: 31px; padding: 0 9px; border: 1px solid rgba(255,92,97,.35); border-radius: 8px; color: #fff; background: var(--coral-button); font-size: 10px; font-weight: 800; }.listing-offer:hover { color: #fff; background: var(--coral-button-hover); }
.empty-state { padding: 65px 20px; border: 1px dashed var(--line); border-radius: 15px; text-align: center; }.empty-icon { color: var(--coral); font-size: 32px; }.empty-state h3 { margin: 12px 0 6px; }.empty-state p { color: var(--muted); font-size: 13px; }

/* Binder */
.dark-panel-section { padding-top: 8px; padding-bottom: 114px; }.binder-dashboard { display: grid; grid-template-columns: 265px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 19px; background: rgba(16,26,43,.72); overflow: hidden; }.binder-sidebar { padding: 21px; border-right: 1px solid var(--line); background: rgba(8,13,23,.32); }.binder-profile { display: flex; align-items: center; gap: 10px; padding-bottom: 21px; border-bottom: 1px solid var(--line-soft); }.profile-avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #4a9caa, #5c5eae); font-size: 11px; font-weight: 850; }.binder-profile strong, .binder-profile span { display: block; }.binder-profile strong { font-size: 12px; }.binder-profile span { margin-top: 2px; color: var(--muted); font-size: 9px; }.verified-badge { width: 18px; height: 18px; display: grid; place-items: center; margin-left: auto; border-radius: 50%; color: #08121e; background: var(--mint); font-size: 11px; font-weight: 900; }.slot-meter { padding: 22px 0 18px; }.meter-label { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-size: 10px; }.meter-label strong { color: var(--text); }.meter-track { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }.meter-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), #84e5c4); }.slot-meter small { display: block; margin-top: 7px; color: var(--mint-2); font-size: 9px; }.binder-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 15px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }.binder-stats div { text-align: center; }.binder-stats strong, .binder-stats span { display: block; }.binder-stats strong { font-size: 17px; }.binder-stats span { margin-top: 2px; color: var(--muted-2); font-size: 9px; }.binder-link { width: 100%; display: flex; justify-content: space-between; padding: 17px 0 0; border: 0; color: var(--mint-2); background: transparent; font-size: 10px; font-weight: 800; text-align: left; }.binder-link span { color: var(--coral); font-size: 16px; }.binder-main { min-width: 0; padding: 24px; }.binder-main-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }.binder-main-top h3 { margin: 5px 0 0; font-size: 19px; }.binder-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.binder-card { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(9,15,27,.54); }.binder-thumb { position: relative; height: 125px; display: grid; place-items: end start; padding: 8px; border-radius: 8px; overflow: hidden; }.binder-thumb::before { content: ""; position: absolute; width: 80px; height: 80px; left: 50%; top: 23px; border-radius: 50%; background: radial-gradient(circle, rgba(255,239,164,.9), transparent 67%); transform: translateX(-50%); }.binder-thumb span { position: relative; z-index: 1; padding: 3px 5px; border-radius: 4px; color: #fff; background: rgba(9,15,27,.62); font-size: 8px; font-weight: 850; }.art-thumb-one { background: linear-gradient(145deg,#2675a1,#e19d63); }.art-thumb-two { background: linear-gradient(145deg,#c18b4d,#713b71); }.art-thumb-three { background: linear-gradient(145deg,#3e9a92,#c69f63); }.binder-card > div:not(.binder-thumb) { min-width: 0; padding: 10px 2px 2px; }.binder-card strong, .binder-card span, .binder-card small { display: block; }.binder-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.binder-card span { margin-top: 3px; color: var(--muted); font-size: 9px; }.binder-card small { margin-top: 3px; color: var(--muted-2); font-size: 8px; }.binder-note { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid rgba(245,201,107,.2); border-radius: 10px; background: rgba(245,201,107,.05); }.binder-note > span { color: var(--gold); font-size: 18px; }.binder-note div { flex: 1; }.binder-note strong, .binder-note p { display: block; }.binder-note strong { color: var(--gold); font-size: 10px; }.binder-note p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }.binder-note .text-button { color: var(--gold); font-size: 9px; }

/* Optional content-managed card photos */
.field-hint { color: var(--muted-2); font-size: 8px; font-weight: 650; }

.listing-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.listing-art.has-image::before { z-index: 1; pointer-events: none; }
.listing-art.has-image .art-glow, .listing-art.has-image .art-shape, .listing-art.has-image .art-sparkle { display: none; }
.listing-art.has-image .art-badge, .listing-art.has-image .art-availability { z-index: 2; }

/* Process */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.process-card { position: relative; min-height: 260px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: rgba(16,26,43,.73); }.process-number { position: absolute; right: 17px; top: 15px; color: var(--muted-2); font-size: 10px; font-weight: 850; letter-spacing: .1em; }.process-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 23px; border: 1px solid rgba(76,222,181,.32); border-radius: 11px; color: var(--mint); background: rgba(76,222,181,.1); font-size: 17px; }.process-card:nth-child(2) .process-icon { color: var(--coral-2); border-color: rgba(255,92,97,.3); background: rgba(255,92,97,.09); }.process-card:nth-child(3) .process-icon { color: var(--gold); border-color: rgba(245,201,107,.3); background: rgba(245,201,107,.09); }.process-card:nth-child(4) .process-icon { color: var(--blue); border-color: rgba(119,177,255,.3); background: rgba(119,177,255,.09); }.process-card h3 { margin-bottom: 9px; font-size: 17px; }.process-card p { min-height: 90px; margin-bottom: 14px; color: var(--muted); font-size: 12px; }.process-detail { color: var(--mint-2); font-size: 9px; font-weight: 750; }

/* Trade room */
.trade-dashboard { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 13px; }.trade-main-card, .trade-timeline { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: rgba(16,26,43,.75); }.trade-card-top { display: flex; align-items: center; gap: 10px; padding-bottom: 19px; border-bottom: 1px solid var(--line-soft); }.trade-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#d08a62,#725fc1); font-size: 12px; font-weight: 850; }.trade-card-top strong, .trade-card-top span { display: block; }.trade-card-top strong { font-size: 13px; }.trade-card-top span { margin-top: 3px; color: var(--muted); font-size: 9px; }.status-pill { margin-left: auto; padding: 5px 8px; border-radius: 999px; font-size: 8px !important; font-weight: 850; letter-spacing: .07em; }.status-pill.pending { color: var(--gold); background: rgba(245,201,107,.11); }.status-pill.done { color: var(--mint-2); background: rgba(76,222,181,.11); }.trade-items { display: grid; grid-template-columns: 1fr 34px 1fr 115px; align-items: center; gap: 10px; padding: 20px 0; }.trade-items > div:not(.swap-icon):not(.trade-type) span, .trade-items > div:not(.swap-icon):not(.trade-type) strong, .trade-items > div:not(.swap-icon):not(.trade-type) small { display: block; }.trade-items span { color: var(--muted-2); font-size: 8px; font-weight: 850; letter-spacing: .08em; }.trade-items strong { margin-top: 5px; font-size: 11px; }.trade-items small { margin-top: 3px; color: var(--muted); font-size: 9px; }.swap-icon { color: var(--coral); font-size: 22px; text-align: center; }.trade-type { padding: 10px; border: 1px solid rgba(245,201,107,.25); border-radius: 9px; background: rgba(245,201,107,.06); }.trade-type strong { color: var(--gold); font-size: 15px; }.trade-type small { color: var(--muted); font-size: 8px; }.trade-actions { display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-soft); }.trade-timeline { background: linear-gradient(145deg, rgba(76,222,181,.08), rgba(16,26,43,.77) 45%); }.timeline-heading { display: flex; justify-content: space-between; margin-bottom: 23px; font-size: 12px; }.timeline-heading span { color: var(--mint-2); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.progress-track { display: flex; gap: 4px; }.progress-track i { height: 6px; flex: 1; border-radius: 99px; background: var(--line); }.progress-track i.done { background: var(--mint); }.progress-track i.current { background: linear-gradient(90deg,var(--mint),var(--gold)); }.timeline-labels { display: flex; justify-content: space-between; gap: 4px; margin-top: 7px; color: var(--muted-2); font-size: 8px; }.tracking-card { display: flex; align-items: center; gap: 9px; margin-top: 26px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(8,13,23,.45); }.tracking-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: rgba(119,177,255,.1); font-size: 18px; }.tracking-card > div:nth-child(2) { flex: 1; }.tracking-card strong, .tracking-card span { display: block; }.tracking-card strong { font-size: 10px; }.tracking-card span { margin-top: 3px; color: var(--muted); font-size: 9px; }.trade-footnote { margin-top: 19px; color: var(--muted-2); font-size: 9px; }.trade-footnote span { color: var(--mint); }

/* Plans */
.plans-section { padding-bottom: 115px; }.plan-note { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 10px; font-weight: 750; white-space: nowrap; }.plan-note span { font-size: 17px; }.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }.plan-card { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(16,26,43,.75); }.plan-card.featured { border-color: rgba(255,92,97,.55); background: linear-gradient(155deg, rgba(255,92,97,.1), rgba(16,26,43,.8) 40%); box-shadow: 0 15px 45px rgba(255,92,97,.08); }.featured-ribbon { position: absolute; top: 0; right: 20px; padding: 5px 8px; border-radius: 0 0 7px 7px; color: #fff; background: var(--coral-button); font-size: 8px; font-weight: 850; letter-spacing: .1em; }.plan-top { display: flex; justify-content: space-between; align-items: center; }.plan-label { color: var(--coral); font-size: 10px; font-weight: 850; letter-spacing: .13em; }.plan-check { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--mint); background: rgba(76,222,181,.1); font-size: 11px; }.plan-card h3 { margin: 18px 0 5px; font-size: 20px; }.plan-card > p { min-height: 42px; color: var(--muted); font-size: 11px; }.plan-price { display: flex; align-items: baseline; gap: 5px; margin: 19px 0 13px; }.plan-price strong { font-size: 37px; letter-spacing: -.06em; }.plan-price span { color: var(--muted); font-size: 10px; }.plan-slots { display: flex; align-items: baseline; gap: 7px; margin-bottom: 17px; padding: 10px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }.plan-slots strong { color: var(--mint-2); font-size: 18px; }.plan-slots span { color: var(--muted); font-size: 10px; }.plan-card ul { margin: 17px 0 0; padding: 0; list-style: none; }.plan-card li { padding: 5px 0 5px 17px; color: var(--muted); font-size: 10px; position: relative; }.plan-card li::before { content: "✓"; position: absolute; left: 0; color: var(--mint); font-weight: 900; }

/* FAQ */
.faq-section { padding-bottom: 112px; }.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.faq-grid details { border: 1px solid var(--line); border-radius: 12px; background: rgba(16,26,43,.68); }.faq-grid summary { position: relative; padding: 16px 42px 16px 17px; color: var(--text); cursor: pointer; font-size: 12px; font-weight: 800; list-style: none; }.faq-grid summary::-webkit-details-marker { display: none; }.faq-grid summary::after { content: "+"; position: absolute; right: 17px; top: 14px; color: var(--coral); font-size: 18px; font-weight: 400; }.faq-grid details[open] summary::after { content: "−"; }.faq-grid details p { margin: 0; padding: 0 17px 17px; color: var(--muted); font-size: 11px; }

/* Footer */
.footer { padding-top: 30px; padding-bottom: 42px; border-top: 1px solid var(--line-soft); }.footer-main { display: flex; align-items: center; gap: 26px; }.footer-main p { margin: 0; color: var(--muted); font-size: 11px; }.footer-links { display: flex; gap: 16px; margin-left: auto; }.footer-links a { color: var(--muted-2); font-size: 10px; font-weight: 750; }.footer-links a:hover { color: var(--mint-2); }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 15px; border-top: 1px solid var(--line-soft); color: var(--muted-2); font-size: 9px; }

/* Toast */
.toast { position: fixed; z-index: 80; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 9px; max-width: min(360px, calc(100vw - 32px)); padding: 12px 15px; border: 1px solid rgba(76,222,181,.4); border-radius: 11px; color: var(--mint-2); background: #102338; box-shadow: var(--shadow); font-size: 11px; font-weight: 750; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }.toast.show { opacity: 1; transform: none; }.toast-icon { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #071a18; background: var(--mint); font-size: 12px; font-weight: 900; }

/* Modals */
.modal-backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(3, 6, 12, .78); backdrop-filter: blur(7px); }.modal { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 24px; overflow-y: auto; }.modal-card { position: relative; width: min(100%, 650px); max-height: calc(100vh - 48px); overflow-y: auto; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, #17253a, #0d1728); box-shadow: var(--shadow); }.compact-modal { width: min(100%, 430px); }.signup-modal { width: min(100%, 720px); }.offer-modal { width: min(100%, 750px); }.upload-modal { width: min(100%, 670px); }.modal-close { position: absolute; right: 15px; top: 14px; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(8,13,23,.35); font-size: 20px; line-height: 1; }.modal-close:hover { border-color: var(--coral); color: var(--text); }.modal-mark { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid rgba(76,222,181,.3); border-radius: 12px; color: var(--mint); background: rgba(76,222,181,.1); font-size: 21px; }.modal-card h2 { margin-bottom: 8px; font-size: 29px; }.modal-intro { margin-bottom: 22px; color: var(--muted); font-size: 12px; }.modal-heading { display: flex; justify-content: space-between; gap: 20px; }.modal-trust { display: flex; align-items: center; gap: 7px; align-self: flex-start; padding: 7px 9px; border: 1px solid rgba(76,222,181,.22); border-radius: 8px; color: var(--mint-2); background: rgba(76,222,181,.07); font-size: 16px; }.modal-trust span { font-size: 9px; font-weight: 800; }.stack-form { display: grid; gap: 13px; }.stack-form label, .offer-note-label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }.stack-form input:not([type="checkbox"]), .stack-form select, .stack-form textarea, .offer-note-label textarea, .chat-composer input { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--text); background: #0b1423; font-size: 12px; }.stack-form textarea, .offer-note-label textarea { min-height: 88px; padding-top: 11px; resize: vertical; }.stack-form input:not([type="checkbox"]):focus, .stack-form select:focus, .stack-form textarea:focus, .offer-note-label textarea:focus, .chat-composer input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(76,222,181,.1); }.two-col-form { grid-template-columns: 1fr 1fr; }.full-span { grid-column: 1 / -1; }.consent-label { display: flex !important; grid-template-columns: auto 1fr; align-items: start; gap: 8px !important; color: var(--muted) !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.4; }.consent-label input { margin-top: 2px; accent-color: var(--mint); }.verification-note { display: flex; gap: 10px; margin-top: 17px; padding: 12px; border: 1px solid rgba(119,177,255,.2); border-radius: 10px; color: var(--blue); background: rgba(119,177,255,.06); }.verification-note > span { font-size: 18px; }.verification-note strong, .verification-note p { display: block; }.verification-note strong { color: #b6d5ff; font-size: 10px; }.verification-note p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }.modal-switch { margin-top: 18px; color: var(--muted-2); font-size: 10px; text-align: center; }.modal-switch .text-button { color: var(--mint-2); font-size: 10px; }
/* Contact verification */
.verification-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: -4px 0 17px; }
.verification-steps span { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted-2); background: rgba(8,13,23,.3); font-size: 8px; font-weight: 850; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.verification-steps span.active { border-color: rgba(76,222,181,.38); color: var(--mint-2); background: rgba(76,222,181,.08); }
.demo-code-box { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; padding: 10px 11px; border: 1px solid rgba(245,201,107,.3); border-radius: 9px; color: var(--gold); background: rgba(245,201,107,.07); font-size: 10px; }
.demo-code-box strong { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.demo-code-box span { font-family: "SFMono-Regular", Consolas, monospace; font-size: 14px; font-weight: 850; letter-spacing: .12em; }
.demo-code-box small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.verification-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Offer modal */
.offer-parties { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 9px; margin: 5px 0 20px; }.party-label { display: block; margin-bottom: 7px; color: var(--muted-2); font-size: 9px; font-weight: 850; letter-spacing: .1em; }.offer-party-card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8,13,23,.42); }.party-thumb { width: 29px; height: 41px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 5px; color: #fff; font-size: 12px; }.offer-party-card strong, .offer-party-card span { display: block; }.offer-party-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.offer-party-card div span { margin-top: 3px; color: var(--muted); font-size: 8px; }.offer-arrow { color: var(--coral); font-size: 21px; text-align: center; }.offer-note-label span { color: var(--muted-2); font-size: 9px; font-weight: 500; }.offer-note-label textarea { margin-top: 2px; }.offer-policy { display: flex; gap: 8px; margin-top: 13px; padding: 10px; border: 1px solid rgba(76,222,181,.18); border-radius: 9px; color: var(--mint); background: rgba(76,222,181,.05); }.offer-policy p { margin: 0; color: var(--muted); font-size: 9px; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 19px; }
/* Upload modal */
.photo-upload { position: relative; display: flex !important; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px !important; min-height: 76px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted) !important; background: rgba(8,13,23,.35); cursor: pointer; }.photo-upload:hover { border-color: var(--mint); background: rgba(76,222,181,.05); }.photo-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }.upload-drop-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--mint); background: rgba(76,222,181,.1); font-size: 20px; }.photo-upload strong, .photo-upload small { display: block; }.photo-upload strong { color: var(--text); font-size: 10px; }.photo-upload small { margin-top: 3px; color: var(--muted-2); font-size: 9px; }.upload-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; color: var(--muted-2); font-size: 9px; }.upload-foot .modal-actions { margin-top: 0; }

/* Chat drawer */
.chat-drawer { position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; border-left: 1px solid var(--line); background: #0c1626; box-shadow: -20px 0 70px rgba(0,0,0,.35); transform: translateX(100%); transition: transform .25s ease; }.chat-drawer.open { transform: translateX(0); }.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 23px 21px 17px; border-bottom: 1px solid var(--line); }.chat-head h2 { margin: 0; font-size: 19px; }.chat-head .modal-close { position: static; flex: 0 0 auto; }.chat-safety { display: flex; gap: 8px; margin: 14px 17px 0; padding: 10px; border: 1px solid rgba(76,222,181,.22); border-radius: 9px; color: var(--mint); background: rgba(76,222,181,.05); }.chat-safety p { margin: 0; color: var(--muted); font-size: 9px; }.chat-safety strong { color: var(--mint-2); }.chat-messages { flex: 1; padding: 20px 17px; overflow-y: auto; }.chat-date { margin-bottom: 16px; color: var(--muted-2); font-size: 8px; font-weight: 850; letter-spacing: .13em; text-align: center; }.message { display: flex; gap: 8px; margin-bottom: 16px; }.message.outgoing { flex-direction: row-reverse; }.message-avatar { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #637ac5; font-size: 8px; font-weight: 850; }.outgoing .message-avatar { background: #3a9e91; }.message > div { max-width: 77%; }.message p { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; color: var(--text); background: var(--surface); font-size: 11px; line-height: 1.45; }.outgoing p { border-color: rgba(76,222,181,.18); border-radius: 12px 4px 12px 12px; background: rgba(76,222,181,.08); }.message time { display: block; margin-top: 4px; color: var(--muted-2); font-size: 8px; }.outgoing time { text-align: right; }.chat-composer { display: flex; gap: 7px; padding: 12px 17px; border-top: 1px solid var(--line); }.chat-composer input { min-width: 0; }.chat-composer button { width: 43px; flex: 0 0 auto; border: 0; border-radius: 9px; color: #071a18; background: var(--mint); font-size: 18px; font-weight: 850; }.chat-suggestions { display: flex; gap: 6px; padding: 0 17px 17px; overflow-x: auto; }.chat-suggestions button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; font-size: 9px; }.chat-suggestions button:hover { border-color: var(--mint); color: var(--mint-2); }

.empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.binder-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 34px 18px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); text-align: center; }
.binder-empty strong { color: var(--text); font-size: 14px; }
.binder-empty p { max-width: 300px; margin: 0 0 6px; font-size: 11px; }
.trade-empty-copy { display: grid; justify-items: center; gap: 9px; padding: 42px 20px; text-align: center; }
.trade-empty-copy h3 { margin: 0; }
.trade-empty-copy p { max-width: 320px; margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.trade-placeholder { display: grid; justify-items: center; gap: 9px; padding: 42px 20px; color: var(--muted); text-align: center; }
.trade-placeholder p { max-width: 220px; margin: 0 0 6px; font-size: 11px; }
.chat-empty { display: grid; justify-items: center; gap: 7px; padding: 34px 12px; color: var(--muted); text-align: center; }
.chat-empty strong { color: var(--text); font-size: 13px; }
.chat-empty p { max-width: 230px; margin: 0; font-size: 10px; }
.empty-icon { line-height: 1; }

@media (max-width: 1080px) {
  .topbar { padding: 0 20px; }.main-nav { display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 10px 20px 16px; border-bottom: 1px solid var(--line); background: rgba(8,13,23,.98); }.main-nav.open { display: flex; }.main-nav a { padding: 11px; }.menu-button { display: block; }.header-actions #accountButton { display: none; }
/* The sign in / sign out control stays. It used to be hidden with the other
   text buttons, which left a signed-in member on a phone with no way to end
   their session at all, and no way to sign in either. "My account" is still
   hidden because the account panel is reachable from the page itself and the
   topbar has no room for it. */
.header-actions #loginButton { display: inline-flex; min-height: 35px; align-items: center; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 11px; }
  .hero { gap: 38px; }.market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.process-grid { grid-template-columns: repeat(2, 1fr); }.trade-dashboard { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .section-shell { padding-left: 16px; padding-right: 16px; }.topbar { min-height: 64px; padding: 0 15px; gap: 10px; }.brand-copy small { display: none; }.header-actions { gap: 5px; }.header-actions .button-upload { display: none; }.header-actions .button-primary { min-height: 35px; padding: 0 10px; font-size: 10px; }.menu-button { width: 35px; height: 35px; }.main-nav { top: 64px; }
  .hero { display: block; min-height: 0; padding-top: 55px; padding-bottom: 57px; }.hero-copy h1 { font-size: clamp(45px, 13vw, 66px); }.hero-lede { font-size: 15px; }.hero-actions { flex-direction: column; align-items: stretch; }.hero-actions .button { width: 100%; }.hero-proof { align-items: flex-start; }.hero-visual { min-height: 370px; margin-top: 40px; padding: 15px; }.collector-card-stack { height: 250px; margin-bottom: -30px; }.trust-strip { grid-template-columns: 1fr 1fr; margin-bottom: 77px; }.trust-item { min-height: 92px; padding: 13px; }.trust-item span { font-size: 9px; }.section-heading { display: block; }.section-heading > .button, .section-heading > .heading-side-note, .section-heading > .heading-side-stack, .section-heading > .mini-status, .section-heading > .plan-note { margin-top: 17px; }.section-heading p { font-size: 14px; }.market-toolbar { grid-template-columns: 1fr 1fr; }.search-field { grid-column: 1 / -1; }.filter-button { min-height: 42px; }.category-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; margin-right: -16px; }.category-chip { flex: 0 0 auto; }.market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.listing-art { height: 185px; }.listing-name { font-size: 12px; }.listing-info { padding: 11px 10px; }.listing-bottom { display: block; }.owner-mini { margin-bottom: 9px; }.listing-offer { width: 100%; }.dark-panel-section { padding-bottom: 78px; }.binder-dashboard { grid-template-columns: 1fr; }.binder-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }.binder-main { padding: 16px; }.binder-cards { grid-template-columns: 1fr; }.binder-card { display: grid; grid-template-columns: 75px 1fr auto; align-items: center; gap: 8px; }.binder-thumb { height: 90px; }.binder-card > div:not(.binder-thumb) { padding: 0; }.binder-note { align-items: flex-start; flex-wrap: wrap; }.binder-note .text-button { margin-left: 28px; }.process-grid { grid-template-columns: 1fr; }.process-card { min-height: 0; }.process-card p { min-height: 0; margin-bottom: 12px; }.trade-main-card, .trade-timeline { padding: 15px; }.trade-items { grid-template-columns: 1fr 28px 1fr; gap: 6px; }.trade-type { grid-column: 1 / -1; margin-top: 8px; text-align: center; }.trade-type span, .trade-type small { display: inline; margin-right: 5px; }.trade-type strong { margin: 0 7px; }.trade-actions { flex-direction: column; }.trade-actions .button { width: 100%; }.plans-grid { grid-template-columns: 1fr; }.plan-card > p { min-height: 0; }.faq-grid { grid-template-columns: 1fr; }.footer-main { display: block; }.footer-main p { margin: 17px 0; }.footer-links { margin-left: 0; }.footer-bottom { display: block; }.footer-bottom span { display: block; margin-top: 8px; }.modal { padding: 12px; }.modal-card { max-height: calc(100vh - 24px); padding: 21px 17px; border-radius: 16px; }.modal-heading { display: block; }.modal-trust { display: inline-flex; margin-top: 10px; }.two-col-form { grid-template-columns: 1fr; }.full-span { grid-column: auto; }.offer-parties { grid-template-columns: 1fr; gap: 9px; }.offer-arrow { transform: rotate(90deg); }.upload-foot { display: block; }.upload-foot .modal-actions { margin-top: 13px; justify-content: stretch; }.upload-foot .button { flex: 1; }.chat-drawer { width: 100%; }.toast { right: 16px; bottom: 16px; }
}
@media (max-width: 760px) {
  .demo-notice { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 12px; }
  .demo-notice a { align-self: flex-end; }
}
@media (max-width: 760px) {
  .demo-code-box { grid-template-columns: 1fr 1fr; }
  .demo-code-box small { grid-column: 1 / -1; }
  .verification-actions { align-items: stretch; flex-direction: column-reverse; }
  .verification-actions .button { width: 100%; }
  /* Narrow panels cannot carry three cards at the desktop size. Shrink the card
     and tighten the overlap so the fan stays inside the panel instead of being
     clipped by its overflow, which would hide part of a real card photo. */
  .collector-card { width: clamp(94px, 30%, 150px); margin: 0 -13px; }
  .collector-card-stack { height: 210px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .reveal { opacity: 1; transform: none; } /* The card fan keeps its resting tilt, but the hover lift is dropped: a
   transition is not motion, and a member who asked for less of it should not
   get a card jumping under the pointer. */ .card-art-one:hover, .card-art-two:hover, .card-art-three:hover { transform: rotate(0deg); } .card-art-one { transform: rotate(-11deg); } .card-art-two { transform: rotate(6deg); } .card-art-three { transform: rotate(16deg); } }
@media print { .topbar, .hero-actions, .market-toolbar, .category-row, .center-action, .footer, .toast, .modal-backdrop, .chat-drawer { display: none !important; } body { color: #111; background: #fff; } .section-shell { max-width: none; padding: 0; } h1, h2, h3, p, strong { color: #111; } .hero, .content-section, .dark-panel-section { padding-top: 20px; padding-bottom: 25px; } .hero { min-height: 0; display: block; } .hero-visual, .trust-strip, .market-grid, .binder-dashboard, .process-grid, .trade-dashboard, .plans-grid, .faq-grid { display: none; } }

.modal-fineprint { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.nav-count.has-unread { background: var(--coral); color: #fff; box-shadow: 0 0 0 3px rgba(255,92,97,.22); }
.nav-count { transition: background .2s ease, color .2s ease; }
/* Offers list. Each row is the entry point to that trade's private chat. */
.trade-list { display: grid; gap: 12px; }
.offer-row { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,18,32,.55); }
.offer-row.is-active { border-color: var(--mint); box-shadow: 0 0 0 1px rgba(72,221,177,.35); }
.offer-cards { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.offer-cards span:first-child { color: var(--text); font-weight: 600; }
.offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.offer-actions .button { min-height: 38px; padding: 0 14px; font-size: 12px; }
.offer-note { margin: 0; color: var(--muted); font-size: 12px; font-style: italic; }
.status-pill.accepted { color: #8ff0d2; background: rgba(72,221,177,.14); }
/* Accept / decline. The danger variant is for the destructive choice. */
.button-ghost.is-danger { border-color: rgba(255,92,97,.5); color: #ffb3b1; background: rgba(255,92,97,.08); }
.button-ghost.is-danger:hover { border-color: var(--coral); color: #fff; background: rgba(255,92,97,.18); }

/* Public showcase of completed trades on the home page. */
.latest-trades-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.latest-trade-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(17,27,44,.7); }
.latest-trade-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; justify-content: space-between; }
.latest-trade-head strong { font-size: 13px; }
.latest-trade-head span { color: var(--muted); font-size: 11px; }
.latest-trade-pair { display: grid; gap: 10px; }
.latest-trade-side { display: flex; gap: 10px; align-items: center; }
.latest-trade-thumb { width: 46px; height: 62px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #0a1220; }
.latest-trade-thumb img { width: 100%; height: 100%; object-fit: cover; }
.latest-trade-side div { display: grid; gap: 2px; min-width: 0; }
.latest-trade-side span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.latest-trade-side strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest-trade-side small { color: var(--muted); font-size: 11px; }
.empty-state-inline { grid-column: 1 / -1; margin: 0; padding: 22px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; font-size: 13px; }

/* A member sees their own card while it waits for review. */
.listing-art.is-pending::after { content: "In review"; position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(245,201,107,.92); color: #2a1f00; font-size: 10px; font-weight: 800; }


/* Nav entry for reporting. A button, not an anchor, because it opens a dialog
   rather than navigating, but it must sit in the row looking like its siblings. */
.main-nav .nav-link-button { padding: 9px 10px; border: 1px solid rgba(255,92,97,.32); border-radius: 9px; color: #ffb3b1; background: rgba(255,92,97,.08); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.main-nav .nav-link-button:hover { color: #fff; background: rgba(255,92,97,.18); border-color: var(--coral); }

/* Honeypot. Hidden from people, so only a bot filling every field sees it. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.optional { color: var(--muted); font-weight: 400; }

/* Account panel sections. */
.account-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.account-section h3 { margin: 0 0 6px; font-size: 15px; }
.account-current { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.account-current strong { color: var(--text); }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Full-size card photo viewer.
   A thumbnail is too small to judge condition, so the photo area opens this. */
.lightbox { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 24px; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(3,6,12,.9); backdrop-filter: blur(10px); }
.lightbox-frame { position: relative; width: fit-content; max-width: min(100%, 1000px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, #17253a, #0d1728); box-shadow: var(--shadow); overflow: hidden; }
.lightbox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lightbox-head h2 { margin: 0 0 4px; font-size: 20px; }
.lightbox-head p { margin: 0; color: var(--muted); font-size: 12px; }
/* Tall cards need height rather than width, or a 1600px-tall photo overflows. */
.lightbox-stage { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 0 54px; }
.lightbox-stage img { max-width: 100%; max-height: min(66vh, 720px); width: auto; height: auto; object-fit: contain; border-radius: 12px; background: #0a1220; }
/* With one photo the arrows are hidden, so reclaim the space they would use. */
.lightbox-frame.is-single .lightbox-stage { padding: 0; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: rgba(8,13,23,.72); font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox-nav:hover { border-color: var(--mint); color: var(--mint); }
.lightbox-nav.prev { left: 5px; }
.lightbox-nav.next { right: 5px; }
.lightbox-foot { display: grid; gap: 10px; }
.lightbox-count { color: var(--muted); font-size: 12px; font-weight: 700; }
.lightbox-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.lightbox-thumb { width: 54px; height: 72px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #0a1220; cursor: pointer; }
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-thumb.is-active { border-color: var(--mint); box-shadow: 0 0 0 2px rgba(72,221,177,.28); }
.lightbox-description { margin: 0; color: var(--muted); font-size: 13px; white-space: pre-wrap; }
body.lightbox-open { overflow: hidden; }

/* The photo area of a listing becomes the click target for the viewer. */
.listing-art.is-clickable { cursor: zoom-in; }
.listing-zoom { position: absolute; right: 8px; top: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: rgba(8,13,23,.62); font-size: 12px; font-weight: 800; line-height: 1; cursor: zoom-in; backdrop-filter: blur(4px); }
.listing-zoom:hover { border-color: var(--mint); color: var(--mint); }
.listing-zoom-count { padding: 1px 5px; border-radius: 999px; background: var(--mint); color: #07131a; font-size: 10px; }
.latest-trade-thumb.is-clickable { cursor: zoom-in; }
.latest-trade-thumb.is-clickable:hover { border-color: var(--mint); }

@media (max-width:600px) {
  .lightbox { padding: 12px; }
  .lightbox-frame { padding: 14px; }
  .lightbox-stage img { max-height: 54vh; }
  .lightbox-nav { width: 36px; height: 36px; font-size: 20px; }
}

/* The close button is absolutely positioned over the top-right of the dialog,
   while the trust badge is laid out at the right of the same heading row. They
   overlapped in every dialog that has a badge, so the heading reserves the
   button's space and the badge is told not to shrink into it. */
.modal-heading { padding-right: 44px; }
.modal-trust { flex: 0 0 auto; white-space: nowrap; }
/* Read-only note in the account panel explaining the one number the site holds
   and why. Not a form field: the value is masked and the member cannot change
   it, so it reads as information rather than as an input they should edit. */
.account-contact-note { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: rgba(8,13,23,.55); font-size: 12px; line-height: 1.65; }
.account-contact-note strong { color: var(--text); letter-spacing: .02em; }
/* Conduct rules, shown at the top of the trade chat.
   Sits above the messages so it is read before anyone types, not looked for
   after something goes wrong. */
.chat-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid rgba(255,92,97,.24); color: var(--muted); background: rgba(255,92,97,.07); font-size: 12px; line-height: 1.55; }
.chat-notice strong { color: #ffb3b1; }
.chat-notice a { margin-left: auto; padding: 4px 10px; border: 1px solid rgba(255,92,97,.34); border-radius: 999px; color: #ffb3b1; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.chat-notice a:hover { border-color: var(--coral); color: #fff; background: rgba(255,92,97,.14); }
.inline-rules-link { color: var(--mint-2); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.offer-policy a { color: var(--mint-2); font-weight: 700; }
.consent-label a { color: var(--mint-2); text-decoration: underline; text-underline-offset: 2px; }
/* Paused-account bar. Persistent rather than a toast: a toast disappears before
   it has been read, and this is the one message a member must actually take in. */
.suspended-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 16px 20px; border: 1px solid rgba(255,92,97,.42); border-radius: 14px; background: linear-gradient(120deg, rgba(255,92,97,.14), rgba(11,18,31,.92)); }
.suspended-bar-copy { display: grid; gap: 5px; min-width: 0; }
.suspended-bar-copy strong { color: #ffb3b1; font-size: 14px; }
.suspended-bar-copy span { color: var(--text); font-size: 13px; line-height: 1.6; }
.suspended-bar-copy small { color: var(--muted); font-size: 11px; }
.suspended-bar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
@media (max-width: 760px) { .suspended-bar { flex-direction: column; align-items: stretch; } .suspended-bar-actions { justify-content: space-between; } }
/* ---------------------------------------------------------------------
   Owner as a link, and editing your own listing.
   --------------------------------------------------------------------- */
/* The owner is a button rather than an anchor because the binder opens in a
   dialog, and a button is announced correctly for an action. It is styled to be
   indistinguishable from the plain text it replaced. */
.owner-link { display: inline-flex; align-items: center; gap: 7px; padding: 3px 7px 3px 3px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); background: none; font: inherit; font-size: 11px; cursor: pointer; text-align: left; }
.owner-link:hover { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.05); }
.owner-link .owner-avatar { margin: 0; }
.owner-count { color: var(--muted-2); font-size: 13px; line-height: 1; }
.listing-edit { display: block; width: 100%; margin: 0 0 8px; padding: 7px; border: 1px dashed var(--line); border-radius: 9px; color: var(--mint-2); background: rgba(72,221,177,.05); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.listing-edit:hover { border-style: solid; border-color: var(--mint); background: rgba(72,221,177,.12); color: #fff; }

/* ---------------------------------------------------------------------
   Editing a card
   --------------------------------------------------------------------- */
.edit-photos { margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(8,13,23,.5); }
.edit-photos-label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.edit-photo-row { display: flex; flex-wrap: wrap; gap: 9px; }
.edit-photo { position: relative; display: block; cursor: pointer; }
.edit-photo img { display: block; width: 62px; height: 86px; border: 2px solid var(--line); border-radius: 8px; object-fit: cover; transition: border-color .18s ease, opacity .18s ease; }
.edit-photo input { position: absolute; top: 5px; left: 5px; width: 17px; height: 17px; }
.edit-photo input:checked + img { border-color: var(--mint); }
.edit-photo input:not(:checked) ~ img { opacity: .32; filter: grayscale(1); }
.edit-photo input:not(:checked)::after { content: ""; }
.edit-available { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.edit-add-photos input { margin-top: 10px; }

/* ---------------------------------------------------------------------
   A member's binder
   --------------------------------------------------------------------- */
.profile-modal { width: min(860px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.profile-avatar { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; color: #07131a; background: linear-gradient(145deg, var(--mint), var(--mint-2)); font-size: 18px; font-weight: 850; }
.profile-head h2 { margin: 0 0 3px; font-size: 22px; }
.profile-head p { margin: 0; color: var(--muted); font-size: 12px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.profile-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.profile-empty { grid-column: 1 / -1; margin: 0; padding: 30px 18px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); text-align: center; font-size: 13px; }
.profile-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(8,13,23,.5); }
.profile-card-art { position: relative; aspect-ratio: 63 / 88; background: #0a1220; }
.profile-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.profile-pending { position: absolute; left: 7px; bottom: 7px; padding: 3px 8px; border-radius: 999px; color: var(--gold); background: rgba(8,13,23,.88); font-size: 10px; font-weight: 800; }
.profile-card-body { display: grid; gap: 3px; padding: 11px 12px 6px; }
.profile-card-set { color: var(--muted-2); font-size: 10px; }
.profile-card-body strong { font-size: 13px; line-height: 1.25; }
.profile-card-meta { color: var(--muted); font-size: 11px; }
.profile-card-price { margin-top: 3px; color: var(--gold); font-size: 12px; font-weight: 800; }
.profile-card-offer { margin: auto 12px 12px; min-height: 34px; font-size: 12px; }
.profile-card-offer:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   Direct conversations
   --------------------------------------------------------------------- */
/* A drawer rather than a page, because a conversation is somewhere you dip
   into while looking at a card, not somewhere you go to live. */
.conv-drawer { position: fixed; z-index: 72; top: 0; right: 0; bottom: 0; width: min(430px, 100%); display: flex; flex-direction: column; border-left: 1px solid var(--line); background: linear-gradient(180deg, #131f31, #0b1425); box-shadow: -18px 0 46px rgba(0,0,0,.5); transform: translateX(102%); transition: transform .28s cubic-bezier(.2,.8,.25,1); }
.conv-drawer.open { transform: translateX(0); }
.conv-backdrop { position: fixed; z-index: 71; inset: 0; background: rgba(3,6,12,.6); backdrop-filter: blur(3px); }
.conv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.conv-head h2 { margin: 0 0 3px; font-size: 18px; }
.conv-head p { margin: 0; color: var(--muted); font-size: 11px; }
.conv-head .modal-close { position: static; flex: 0 0 auto; }
.conv-body { flex: 1 1 auto; overflow-y: auto; padding: 12px; }
.conv-empty { padding: 26px 14px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.7; }
.conv-thread { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 6px; padding: 11px 12px; border: 1px solid transparent; border-radius: 12px; color: var(--text); background: rgba(255,255,255,.03); font: inherit; text-align: left; cursor: pointer; }
.conv-thread:hover { background: rgba(255,255,255,.07); }
.conv-thread.is-active { border-color: var(--mint); background: rgba(72,221,177,.09); }
.conv-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; color: #07131a; background: linear-gradient(145deg, var(--mint), var(--mint-2)); font-size: 12px; font-weight: 850; }
.conv-thread-copy { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.conv-thread-copy strong { font-size: 13px; }
.conv-thread-last { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.conv-thread-when { flex: 0 0 auto; color: var(--muted-2); font-size: 10px; }
.conv-badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: #07131a; background: var(--mint); font-size: 10px; font-weight: 850; }
.conv-thread-head { margin-bottom: 12px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.conv-message { max-width: 82%; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.045); }
.conv-message.is-mine { margin-left: auto; border-color: rgba(72,221,177,.3); background: rgba(72,221,177,.09); }
.conv-message p { margin: 0 0 5px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.conv-message time { color: var(--muted-2); font-size: 10px; }
.conv-message-card { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; padding: 6px; border-radius: 9px; color: var(--text); background: rgba(8,13,23,.6); text-decoration: none; }
.conv-message-card img { width: 30px; height: 42px; flex: 0 0 auto; border-radius: 4px; object-fit: cover; }
.conv-message-card span { font-size: 11px; font-weight: 700; line-height: 1.35; }
.conv-compose { display: grid; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); }
.conv-compose textarea { min-height: 56px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: #0a1220; font: inherit; font-size: 13px; resize: vertical; }
.conv-card-ref { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid rgba(72,221,177,.3); border-radius: 10px; color: var(--mint-2); background: rgba(72,221,177,.08); font-size: 11px; font-weight: 700; }
.conv-card-ref img { width: 26px; height: 36px; flex: 0 0 auto; border-radius: 4px; object-fit: cover; }
.conv-clear { margin-left: auto; padding: 0 6px; border: 0; color: var(--muted); background: none; font-size: 15px; cursor: pointer; }
.conv-notice { border-top: 1px solid var(--line); border-bottom: 0; }
@media (max-width: 760px) {
  .profile-cards { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .conv-drawer { width: 100%; }
}
/* ---------------------------------------------------------------------
   Recording what was traded in a completed swap
   --------------------------------------------------------------------- */
/* Three mutually exclusive answers. They are radio buttons rather than a
   select because they are three different claims, and "no card was involved" is
   a real answer on a card-for-card site rather than a way of leaving a form
   empty. */
.trade-choice { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
.trade-choice legend { margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.trade-option { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.trade-option:hover { border-color: var(--muted-2); background: rgba(255,255,255,.05); }
.trade-option input { margin: 2px 0 0; flex: 0 0 auto; }
.trade-option span { display: grid; gap: 2px; }
.trade-option strong { font-size: 13px; }
.trade-option small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.trade-option:has(input:checked) { border-color: var(--mint); background: rgba(72,221,177,.09); }
.trade-context { display: grid; gap: 6px; margin-bottom: 16px; }
.trade-context p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.trade-context .trade-waiting { color: var(--gold); }
.trade-context .trade-locked { color: var(--gold); font-weight: 700; }
.trade-typed { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8,13,23,.45); }
.trade-typed .field-hint { display: block; margin: 0 0 11px; }
.trade-picker select { margin-top: 5px; }

/* A side recorded as "no card involved" is stated in words on the public feed.
   Rendering nothing there was the original failure with this list. */
.latest-trade-side strong.is-no-card { color: var(--muted); font-style: italic; font-weight: 600; }
.latest-trade-side small:empty { display: none; }.profile-card-actions { display: flex; gap: 7px; margin: auto 12px 12px; }
.profile-card-actions .button { flex: 1 1 auto; min-height: 34px; padding: 0 8px; font-size: 12px; }
.profile-card-actions button:disabled { opacity: .5; cursor: not-allowed; }
/* ---------------------------------------------------------------------
   Offers that can no longer go ahead
   --------------------------------------------------------------------- */
/* Out of the active list, behind a count, so a trade in progress is never
   confused with one that is already over. */
.lapsed-offers { margin-top: 14px; border-top: 1px solid var(--line); }
.lapsed-offers > summary { padding: 13px 2px 0; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.lapsed-offers > summary::-webkit-details-marker { display: none; }
.lapsed-offers > summary::before { content: "\203A\00a0"; color: var(--muted-2); }
.lapsed-offers[open] > summary::before { content: "\2304\00a0"; }
.lapsed-offers > summary:hover { color: var(--text); }
.lapsed-offers-list { display: grid; gap: 10px; margin-top: 12px; }
.lapsed-offers-list .offer-card { opacity: .78; }
.status-pill.lapsed { color: var(--muted); background: rgba(255,255,255,.05); }
.offer-lapsed-reason { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
/* ---------------------------------------------------------------------
   What TCG Draw is, and is not
   --------------------------------------------------------------------- */
/* Repeated at every point where a member commits to something. Short at the
   point of commitment, in full on conduct.html, which is the version that
   governs. */
.listing-footnote { margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.listing-footnote a { color: var(--mint-2); }
.offer-policy strong { color: var(--text); }
.conduct-fine { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.02); font-size: 13px; line-height: 1.75; }
.conduct-fine em { color: var(--text); font-style: normal; font-weight: 700; }
.conduct-foot { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; line-height: 1.8; }
.conduct-foot a { color: var(--mint-2); }
/* An error shown inside a form, next to the fields it is about.
   Used by the add-a-card form and the record-a-swap dialog. A toast cannot do
   this job: it fades before a member who has just filled in a long form can
   find it, and it cannot point at a field. */
.form-error { margin: 0; padding: 11px 13px; border: 1px solid rgba(255,92,97,.4); border-radius: 11px; color: #ffc2c4; background: rgba(255,92,97,.1); font-size: 12px; font-weight: 700; line-height: 1.6; }
.form-error[hidden] { display: none; }
[aria-invalid="true"] { border-color: var(--coral) !important; box-shadow: 0 0 0 3px rgba(255,92,97,.16) !important; }/* The remove control in the edit dialog, and the note that explains a refusal. */
.edit-delete-note { margin: 0; padding: 0 2px; color: var(--gold); font-size: 12px; font-weight: 700; line-height: 1.6; }
.edit-delete-note[hidden] { display: none; }
.button.is-danger { color: var(--coral); border-color: rgba(255,92,97,.4); }
.button.is-danger:hover { color: #fff; border-color: var(--coral); background: rgba(255,92,97,.14); }
.upload-foot .button.is-danger { margin-right: auto; }
/* ---------------------------------------------------------------------
   My binder: the member's own cards
   --------------------------------------------------------------------- */
/* The binder card reuses the existing .binder-card block, which is a grid of
   three columns on a wide screen: picture, details, and now the controls. The
   controls are a third column rather than a row underneath so a member with a
   full binder can scan, edit and remove without opening each card. */
/* The thumb was a fixed 125px box with overflow:hidden, built for a decorative
   placeholder and a glow behind it. A real photo went in with no sizing at all,
   so it rendered at its natural size, aligned to the bottom-left by the grid, and
   was cropped by the overflow. Sized to the card ratio instead, with the photo
   contained rather than cropped: a card is a portrait object and cutting the top
   off to fill a landscape box hides the part a collector is looking at. */
.binder-thumb { height: auto; aspect-ratio: 63 / 88; padding: 0; place-items: stretch; }
.binder-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; background: #0a1220; cursor: zoom-in; }
/* The glow is a placeholder treatment. Behind a real photo it just shows through
   the letterboxing as a smudge. */
.binder-thumb:has(img)::before { display: none; }
.binder-card-status { position: absolute; z-index: 1; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 3px 7px; border-radius: 999px; color: #fff; background: rgba(9,15,27,.88); font-size: 9px; font-weight: 850; line-height: 1.2; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.binder-card.is-withdrawn .binder-thumb { opacity: .55; }
.binder-card.is-withdrawn .binder-thumb img { filter: grayscale(1); }
.binder-card-actions { display: flex; flex-direction: column; gap: 6px; align-self: center; }
.binder-card-actions .button { min-height: 32px; padding: 0 12px; font-size: 11px; white-space: nowrap; }
.binder-card-actions button:disabled { opacity: .5; cursor: progress; }
@media (max-width: 700px) {
  .binder-card-actions { flex-direction: row; grid-column: 1 / -1; }
  .binder-card-actions .button { flex: 1 1 0; }
}