/* ============================================================
   BGX — Barbusa Global Exchange
   Tokens: ink #0B0E14 · panel #12161F · steel #2A3446
           brass #B08D3E · signal blue #4C8DFF · paper #EDEFF3
   Display: Fraunces · Body/UI: Inter · Data: IBM Plex Mono
   ============================================================ */

:root{
  --ink:#0B0E14;
  --panel:#12161F;
  --panel-2:#171C27;
  --steel:#2A3446;
  --steel-soft:#1D2432;
  --brass:#B08D3E;
  --brass-light:#D8B565;
  --blue:#4C8DFF;
  --paper:#EDEFF3;
  --muted:#8993A6;
  --danger:#E4664B;
  --good:#4CAF7D;

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius:10px;
  --radius-lg:16px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  margin:0 0 .4em;
  letter-spacing:-.01em;
}
p{margin:0 0 1em; color:var(--muted);}
a{color:inherit;}
button{font-family:var(--font-body); cursor:pointer;}
input, select, textarea{font-family:var(--font-body);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}

/* ---------------- Buttons ---------------- */
.btn{
  border:1px solid transparent;
  border-radius:999px;
  padding:.7em 1.4em;
  font-size:.9rem;
  font-weight:600;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  background:transparent;
  color:var(--paper);
}
.btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.btn--brass{background:var(--brass); color:#1a1406; border-color:var(--brass);}
.btn--brass:hover{background:var(--brass-light); transform:translateY(-1px);}
.btn--outline{border-color:var(--steel); color:var(--paper);}
.btn--outline:hover{border-color:var(--brass); color:var(--brass-light);}
.btn--ghost{background:transparent; border:none; color:var(--muted); font-size:.82rem;}
.btn--ghost:hover{color:var(--paper);}
.btn--lg{padding:.9em 1.8em; font-size:1rem;}
.btn--block{width:100%; text-align:center;}
.linklike{background:none;border:none;color:var(--blue);text-decoration:underline;padding:0;font:inherit;cursor:pointer;}

/* ---------------- Account area / owner badge ---------------- */
.account-area{position:relative;}
.account-pill{
  display:flex; align-items:center; gap:.5em;
  background:var(--panel-2); border:1px solid var(--steel); border-radius:999px;
  padding:.4em .5em .4em .9em; font-size:.82rem; cursor:pointer;
}
.account-pill:hover{border-color:var(--brass);}
.account-pill__avatar{
  width:24px; height:24px; border-radius:50%;
  background:var(--steel); display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; color:var(--paper);
}
.account-pill.is-owner .account-pill__avatar{
  background:linear-gradient(155deg, var(--brass-light), var(--brass));
  color:#1a1406;
}
.account-menu{
  position:absolute; right:0; top:calc(100% + .6em);
  background:var(--panel); border:1px solid var(--steel); border-radius:var(--radius);
  min-width:240px; padding:.5em; display:none; z-index:50;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.account-menu.open{display:block;}
.account-menu__email{font-size:.78rem; color:var(--muted); padding:.5em .7em; word-break:break-all;}
.account-menu button{
  width:100%; text-align:left; background:none; border:none; color:var(--paper);
  padding:.6em .7em; border-radius:6px; font-size:.85rem;
}
.account-menu button:hover{background:var(--panel-2); color:var(--brass-light);}
.badge--owner{
  border-color:var(--brass); color:var(--brass-light); background:rgba(176,141,62,.12);
}
.badge--member{
  border-color:var(--blue); color:#9CBBFF; background:rgba(76,141,255,.12);
}

/* ---------------- Notifications ---------------- */
.notif-area{position:relative; display:flex;}
.notif-bell{position:relative; font-size:1.1rem; padding:.5em .6em;}
.notif-dot{
  position:absolute; top:.3em; right:.4em;
  width:8px; height:8px; border-radius:50%; background:var(--danger);
  animation:notifPulse 1.6s ease-in-out infinite;
}
@keyframes notifPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(228,102,75,.5);}
  50%{box-shadow:0 0 0 5px rgba(228,102,75,0);}
}
.notif-menu{
  position:absolute; right:0; top:calc(100% + .6em);
  background:var(--panel); border:1px solid var(--steel); border-radius:var(--radius);
  width:320px; max-height:360px; overflow-y:auto; padding:.5em; display:none; z-index:50;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.notif-menu.open{display:block;}
.notif-item{padding:.7em .8em; border-bottom:1px solid var(--steel-soft); font-size:.82rem;}
.notif-item:last-child{border-bottom:none;}
.notif-item p{color:var(--paper); margin:0 0 .3em;}
.notif-item span{color:var(--muted); font-size:.7rem; font-family:var(--font-mono);}
.notif-item.unread{background:rgba(176,141,62,.06); border-radius:8px;}
.notif-empty{padding:1.2em .8em; color:var(--muted); font-size:.85rem; text-align:center;}

/* ---------------- Ticker (signature element) ---------------- */
.ticker{
  background:var(--panel-2);
  border-bottom:1px solid var(--steel);
  overflow:hidden;
  white-space:nowrap;
  padding:.5em 0;
}
.ticker__track{
  display:inline-flex;
  gap:2.5em;
  animation:scrollTicker 42s linear infinite;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--muted);
}
.ticker__item{color:var(--muted);}
.ticker__item b{color:var(--brass-light); font-weight:600;}
.ticker__item .tick-price{color:var(--paper);}
@keyframes scrollTicker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------------- Nav ---------------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(11,14,20,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--steel);
}
.nav__inner{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9em 1.5em;
  gap:1.5em;
}
.brand{display:flex; align-items:center; gap:.6em; text-decoration:none;}
.brand__mark{
  width:34px; height:34px; border-radius:8px;
  background:linear-gradient(155deg, var(--brass-light), var(--brass) 70%);
  color:#1a1406; font-family:var(--font-display); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  box-shadow:0 0 0 rgba(176,141,62,.4);
  animation:markPulse 4s ease-in-out infinite;
}
@keyframes markPulse{
  0%,100%{box-shadow:0 0 0 rgba(176,141,62,.35);}
  50%{box-shadow:0 0 14px rgba(176,141,62,.55);}
}
.brand__name{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  letter-spacing:.02em; color:var(--paper);
  display:flex; flex-direction:column; line-height:1.1;
}
.brand__sub{font-family:var(--font-body); font-weight:500; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.nav__links{display:flex; align-items:center; gap:1.6em; font-size:.9rem;}
.nav__links a{text-decoration:none; color:var(--muted);}
.nav__links a:hover{color:var(--paper);}
.nav__actions{display:flex; gap:.7em; align-items:center;}

@media (max-width:900px){
  .nav__links a{display:none;}
}

/* ---------------- Hero ---------------- */
.hero{
  max-width:1280px; margin:0 auto;
  padding:4.5em 1.5em 3em;
}
.hero__inner{max-width:760px;}
.eyebrow{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; color:var(--brass-light); margin-bottom:1em;
}
.eyebrow--light{color:var(--blue);}
.hero__title{
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  color:var(--paper);
  margin-bottom:.4em;
  position:relative;
  display:inline-block;
}
.hero__title::after{
  content:'';
  display:block;
  width:120px; height:3px; margin-top:.3em;
  background:linear-gradient(90deg, var(--brass), var(--blue), var(--brass));
  background-size:200% 100%;
  border-radius:2px;
  animation:accentShift 5s linear infinite;
}
@keyframes accentShift{
  0%{background-position:0% 0;}
  100%{background-position:200% 0;}
}
.hero__lede{font-size:1.05rem; max-width:600px;}

.searchbar{
  display:flex; gap:.6em; margin-top:1.6em; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--steel); border-radius:var(--radius-lg);
  padding:.6em; align-items:center;
}
.searchbar select, .searchbar input{
  background:var(--panel-2); border:1px solid var(--steel); color:var(--paper);
  border-radius:var(--radius); padding:.7em .9em; font-size:.9rem;
}
.searchbar input{flex:1; min-width:220px;}
.searchbar select:focus, .searchbar input:focus{outline:2px solid var(--blue);}

.access-note{font-size:.78rem; color:var(--muted); margin-top:.9em; max-width:520px;}

.hero__stats{
  display:flex; gap:2.5em; margin-top:1.4em; flex-wrap:wrap;
}
.stat{font-family:var(--font-mono);}
.stat__value{display:block; font-size:1.5rem; color:var(--brass-light); font-weight:600;}
.stat__label{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em;}

/* ---------------- Promo banner ---------------- */
.promo{
  background:linear-gradient(120deg, var(--panel-2), var(--panel));
  border-top:1px solid var(--steel);
  border-bottom:1px solid var(--steel);
}
.promo__inner{
  max-width:1280px; margin:0 auto;
  padding:3em 1.5em;
  display:flex; align-items:center; justify-content:space-between;
  gap:2em; flex-wrap:wrap;
}
.promo__text{max-width:620px;}
.brass-text{color:var(--brass-light);}

/* ---------------- Listings layout ---------------- */
.listings{
  max-width:1280px; margin:0 auto;
  padding:3.5em 1.5em;
  display:grid; grid-template-columns:240px 1fr; gap:2.5em;
}
@media (max-width:860px){
  .listings{grid-template-columns:1fr;}
}
.filters{
  background:var(--panel); border:1px solid var(--steel); border-radius:var(--radius-lg);
  padding:1.4em; height:fit-content; position:sticky; top:80px;
}
.filters h3{font-size:1rem; margin-bottom:1em;}
.filter-group{margin-bottom:1.4em;}
.filter-group h4{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:.7em; font-family:var(--font-body); font-weight:600;}
.filter-group select{
  width:100%; background:var(--panel-2); border:1px solid var(--steel); color:var(--paper);
  border-radius:var(--radius); padding:.6em; font-size:.85rem;
}

.check{
  display:flex; align-items:flex-start; gap:.6em; font-size:.85rem; color:var(--paper);
  margin-bottom:.6em; cursor:pointer;
}
.check input{accent-color:var(--brass); margin-top:.2em;}

.listings__head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.2em;}
.listings__count{font-family:var(--font-mono); font-size:.8rem; color:var(--muted);}

/* ---------------- Featured row ---------------- */
.featured-wrap{margin-bottom:2.4em;}
.featured-wrap__head{margin-bottom:.9em;}
.featured-row{display:flex; gap:1.1em; overflow-x:auto; padding-bottom:.4em; scroll-snap-type:x proximity;}
.featured-card{
  flex:0 0 260px; scroll-snap-align:start;
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--brass); border-radius:var(--radius-lg);
  padding:1.1em; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.featured-card::before{
  content:'⭐ Featured'; position:absolute; top:.8em; right:.8em;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brass-light);
}
.featured-card:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(176,141,62,.22);}
.featured-card__thumb{
  width:100%; aspect-ratio:16/9; border-radius:var(--radius); margin-bottom:.8em;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:rgba(255,255,255,.5);
}
.featured-card__code{font-family:var(--font-mono); font-size:.68rem; color:var(--muted);}
.featured-card__title{font-size:1rem; margin:.3em 0; color:var(--paper); font-family:var(--font-display);}
.featured-card__price{font-family:var(--font-mono); color:var(--brass-light); font-weight:600;}

/* ---------------- Ledger / listing cards ---------------- */
.ledger{display:flex; flex-direction:column; gap:1em;}
.card{
  display:grid; grid-template-columns:180px 1fr auto; gap:1.4em;
  background:var(--panel); border:1px solid var(--steel); border-radius:var(--radius-lg);
  padding:1.1em; align-items:center;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
  opacity:0; transform:translateY(14px);
}
.card.in-view{animation:cardReveal .5s ease forwards;}
@keyframes cardReveal{ to{opacity:1; transform:translateY(0);} }
.card:hover{border-color:var(--brass); transform:translateY(-2px); box-shadow:0 14px 34px rgba(176,141,62,.14);}
@media (max-width:700px){
  .card{grid-template-columns:1fr; }
}
.card.just-posted{
  animation:justPosted 2.2s ease;
}
@keyframes justPosted{
  0%{box-shadow:0 0 0 0 rgba(176,141,62,.7); border-color:var(--brass-light);}
  60%{box-shadow:0 0 0 10px rgba(176,141,62,0); border-color:var(--brass-light);}
  100%{box-shadow:0 0 0 0 rgba(176,141,62,0); border-color:var(--steel);}
}
.card__thumb{
  width:100%; aspect-ratio:4/3; border-radius:var(--radius);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:2rem; color:rgba(255,255,255,.5);
}
.card__thumb.locked::after{
  content:'🔒 Priority only';
  position:absolute; inset:0;
  background:rgba(11,14,20,.72);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.68rem; color:var(--brass-light);
  text-transform:uppercase; letter-spacing:.08em;
}
.card__body{min-width:0;}
.card__code{font-family:var(--font-mono); font-size:.72rem; color:var(--muted); letter-spacing:.05em;}
.card__title{font-size:1.15rem; margin:.2em 0 .3em; color:var(--paper);}
.card__meta{font-size:.82rem; color:var(--muted); margin-bottom:.5em;}
.card__badges{display:flex; gap:.5em; flex-wrap:wrap;}
.badge{
  font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.06em;
  padding:.3em .6em; border-radius:5px; border:1px solid var(--steel); color:var(--muted);
}
.badge--verified{border-color:var(--good); color:var(--good);}
.badge--priority{border-color:var(--brass); color:var(--brass-light);}
.badge--sold{border-color:var(--danger); color:var(--danger);}
.badge--fee-paid{border-color:var(--good); color:var(--good);}
.card__price{text-align:right;}
.card__price .amount{display:block; font-family:var(--font-mono); font-size:1.3rem; color:var(--brass-light); font-weight:600;}
.card__price .fee{font-size:.7rem; color:var(--muted);}
.card__price .lock-price{font-family:var(--font-mono); font-size:.78rem; color:var(--muted);}

/* ---------------- How it works ---------------- */
.how{max-width:1280px; margin:0 auto; padding:2em 1.5em 5em;}
.how h2{text-align:center; font-size:2rem; margin-bottom:1.4em;}
.how__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6em;}
@media (max-width:800px){.how__grid{grid-template-columns:1fr;}}
.how__step{background:var(--panel); border:1px solid var(--steel); border-radius:var(--radius-lg); padding:1.8em;}
.how__num{font-family:var(--font-mono); color:var(--brass); font-size:.85rem;}
.how__step h3{margin-top:.4em;}

/* ---------------- Footer ---------------- */
.footer{border-top:1px solid var(--steel); background:var(--panel-2);}
.footer__inner{max-width:900px; margin:0 auto; padding:3em 1.5em; text-align:center;}
.footer__brand{display:flex; align-items:center; justify-content:center; gap:.5em; margin-bottom:1.2em;}
.footer__fee{color:var(--paper); font-size:.9rem;}
.footer__legal{font-size:.75rem; color:var(--muted); max-width:640px; margin:1em auto 0;}

/* ---------------- Modals ---------------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,8,12,.75);
  display:none; align-items:flex-start; justify-content:center;
  padding:4vh 1.2em; overflow-y:auto; z-index:100;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--panel); border:1px solid var(--steel); border-radius:var(--radius-lg);
  padding:2em; max-width:520px; width:100%; position:relative;
  animation:modalIn .18s ease;
}
.modal--wide{max-width:820px;}
@keyframes modalIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
.modal__close{
  position:absolute; top:1em; right:1em; background:none; border:none;
  color:var(--muted); font-size:1.4rem; line-height:1;
}
.modal__close:hover{color:var(--paper);}
.modal__sub{margin-top:-.5em;}

/* ---------------- Auth tabs ---------------- */
.auth-tabs{display:flex; gap:.4em; margin-bottom:1.2em; background:var(--panel-2); border-radius:999px; padding:.3em;}
.auth-tab{
  flex:1; background:none; border:none; border-radius:999px; padding:.6em; font-size:.85rem;
  color:var(--muted); font-weight:600;
}
.auth-tab.active{background:var(--brass); color:#1a1406;}
.auth-gate-note{
  background:var(--panel-2); border:1px dashed var(--brass); border-radius:var(--radius);
  padding:.7em .9em; font-size:.82rem; color:var(--brass-light); margin-bottom:1em;
}
.auth-error{color:var(--danger); font-size:.82rem; margin:-.6em 0 1em;}

/* ---------------- Forms ---------------- */
.field{display:flex; flex-direction:column; gap:.4em; margin-bottom:1.1em; font-size:.85rem; color:var(--paper);}
.field input, .field select, .field textarea{
  background:var(--panel-2); border:1px solid var(--steel); color:var(--paper);
  border-radius:var(--radius); padding:.75em .9em; font-size:.9rem; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--blue);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 1.2em;}
@media (max-width:600px){.form-grid{grid-template-columns:1fr;}}
.checkbox-grid{display:grid; grid-template-columns:1fr 1fr; gap:.3em .8em; margin-top:.5em;}
@media (max-width:600px){.checkbox-grid{grid-template-columns:1fr;}}

.image-preview{display:flex; gap:.6em; flex-wrap:wrap; margin-top:.7em;}
.image-preview img{width:76px; height:76px; object-fit:cover; border-radius:8px; border:1px solid var(--steel);}

/* ---------------- Styled file upload button ---------------- */
.file-input-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.file-btn{
  display:inline-flex; align-items:center; gap:.5em;
  background:linear-gradient(135deg, var(--brass-light), var(--brass));
  color:#1a1406; font-weight:700; font-size:.88rem;
  border-radius:999px; padding:.7em 1.3em; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease; width:fit-content;
}
.file-btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(176,141,62,.35);}
.file-hint{font-size:.75rem; color:var(--muted); margin:.5em 0 0;}

/* ---------------- Reorderable image thumbnails ---------------- */
.image-preview{gap:.8em;}
.thumb-wrap{
  position:relative; width:84px; height:84px; border-radius:8px; overflow:hidden;
  border:2px solid var(--steel); cursor:grab; transition:border-color .15s ease, transform .1s ease;
}
.thumb-wrap:active{cursor:grabbing;}
.thumb-wrap.drag-over{border-color:var(--blue); transform:scale(1.04);}
.thumb-wrap img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
.thumb-wrap.is-main{border-color:var(--brass);}
.thumb-main-badge{
  position:absolute; top:2px; left:2px;
  background:var(--brass); color:#1a1406; font-family:var(--font-mono);
  font-size:.55rem; font-weight:700; padding:.15em .4em; border-radius:4px; letter-spacing:.04em;
}
.thumb-btn-row{position:absolute; bottom:2px; right:2px; display:flex; gap:.25em;}
.thumb-btn{
  width:20px; height:20px; border-radius:50%; border:none; font-size:.68rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(11,14,20,.75); color:var(--paper);
}
.thumb-btn:hover{background:var(--brass); color:#1a1406;}
.thumb-btn.remove:hover{background:var(--danger); color:#fff;}

/* ---------------- Deal stage tracker ---------------- */
.deal-stages{ display:flex; margin:1.6em 0 1.2em; }
.deal-stage{ flex:1; text-align:center; position:relative; }
.deal-stage__dot{
  width:26px; height:26px; border-radius:50%; margin:0 auto .5em;
  background:var(--panel-2); border:2px solid var(--steel); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.72rem;
  position:relative; z-index:2;
}
.deal-stage__label{font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.deal-stage::after{
  content:''; position:absolute; top:13px; left:50%; width:100%; height:2px; background:var(--steel); z-index:1;
}
.deal-stage:last-child::after{display:none;}
.deal-stage.done .deal-stage__dot{background:var(--brass); border-color:var(--brass); color:#1a1406;}
.deal-stage.done .deal-stage__label{color:var(--brass-light);}
.deal-stage.done::after{background:var(--brass);}
.deal-stage.current .deal-stage__dot{border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 4px rgba(76,141,255,.15);}
.deal-stage.current .deal-stage__label{color:var(--paper);}
.terms-check{
  background:var(--panel-2); border:1px solid var(--brass); border-radius:var(--radius);
  padding:.9em 1em; margin:1em 0;
}
.fee-accept-note{font-size:.78rem; color:var(--muted); margin:.8em 0;}

.fee-note{
  background:var(--panel-2); border:1px dashed var(--steel); border-radius:var(--radius);
  padding:.9em 1.1em; font-size:.82rem; color:var(--muted); margin:1.2em 0;
}

.benefits{margin:1.2em 0; padding:0; list-style:none;}
.benefits li{
  padding:.6em 0 .6em 1.6em; border-bottom:1px solid var(--steel-soft);
  font-size:.9rem; position:relative;
}
.benefits li::before{content:'✓'; position:absolute; left:0; color:var(--brass-light);}
.price-line{display:flex; align-items:baseline; gap:.5em; margin:1.4em 0;}
.price-line__amount{font-family:var(--font-mono); font-size:2rem; color:var(--brass-light); font-weight:600;}
.paypal-slot{min-height:45px;}
.paypal-fallback{font-size:.82rem; text-align:center;}
.settings-note{font-size:.75rem; color:var(--muted); margin-top:1em;}

/* ---------------- Listing detail modal content ---------------- */
.detail__gallery{display:flex; gap:.6em; overflow-x:auto; margin-bottom:1.2em;}
.detail__gallery img, .detail__gallery .ph{
  width:180px; height:130px; object-fit:cover; border-radius:var(--radius); flex-shrink:0;
  border:1px solid var(--steel);
}
.detail__grid{display:grid; grid-template-columns:1.4fr 1fr; gap:2em;}
@media (max-width:700px){.detail__grid{grid-template-columns:1fr;}}
.detail__features{list-style:none; padding:0; margin:1em 0;}
.detail__features li{padding:.4em 0; font-size:.88rem; position:relative; padding-left:1.4em;}
.detail__features li::before{content:'●'; color:var(--brass); position:absolute; left:0; font-size:.6rem; top:.7em;}
.detail__side{background:var(--panel-2); border:1px solid var(--steel); border-radius:var(--radius-lg); padding:1.4em; height:fit-content;}
.detail__price{font-family:var(--font-mono); font-size:1.8rem; color:var(--brass-light); font-weight:600;}
.detail__code{font-family:var(--font-mono); color:var(--muted); font-size:.78rem; margin-bottom:.5em; display:block;}

/* ---------------- Chat ---------------- */
.chat-thread{
  background:var(--panel-2); border:1px solid var(--steel); border-radius:var(--radius);
  padding:1em; height:280px; overflow-y:auto; margin:1em 0 .8em; display:flex; flex-direction:column; gap:.6em;
}
.chat-empty{color:var(--muted); font-size:.85rem; text-align:center; margin:auto;}
.chat-bubble{max-width:80%; padding:.6em .9em; border-radius:12px; font-size:.85rem;}
.chat-bubble p{margin:0 0 .2em; color:var(--paper);}
.chat-bubble span{font-family:var(--font-mono); font-size:.65rem; color:var(--muted);}
.chat-bubble--buyer{align-self:flex-end; background:var(--brass); border-bottom-right-radius:2px;}
.chat-bubble--buyer p{color:#1a1406;}
.chat-bubble--buyer span{color:rgba(26,20,6,.6);}
.chat-bubble--owner{align-self:flex-start; background:var(--steel-soft); border-bottom-left-radius:2px;}
.chat-quick{display:flex; gap:.5em; flex-wrap:wrap; margin-bottom:.9em;}
.chat-chip{
  background:var(--panel-2); border:1px solid var(--steel); color:var(--paper);
  border-radius:999px; padding:.5em .9em; font-size:.78rem;
}
.chat-chip:hover{border-color:var(--brass); color:var(--brass-light);}
.chat-input-row{display:flex; gap:.6em;}
.chat-input-row input{
  flex:1; background:var(--panel-2); border:1px solid var(--steel); color:var(--paper);
  border-radius:999px; padding:.75em 1.1em; font-size:.88rem;
}
.chat-input-row input:focus{outline:2px solid var(--blue);}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed; bottom:1.5em; left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--panel); border:1px solid var(--brass); color:var(--paper);
  padding:.9em 1.4em; border-radius:999px; font-size:.85rem;
  transition:transform .25s ease; z-index:200; max-width:90vw; text-align:center;
}
.toast.show{transform:translateX(-50%) translateY(0);}