:root{
  --ink:#13241D; --jade:#15593D; --jade-soft:#E3EDE7; --marigold:#E69B19;
  --rose:#B92F60; --rose-soft:#FBEAF0; --paper:#EDF1EC; --card:#FFF;
  --muted:#63756C; --line:#D4DED7;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0}
h1{font-size:clamp(26px,4vw,38px)} h2{font-size:23px} h3{font-size:17px;font-weight:600}
p{margin:0} a{color:var(--jade)}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:4px}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--jade)}

/* nav */
.nav{background:var(--ink);color:#fff}
.nav-in{display:flex;align-items:center;gap:18px;height:60px}
.nav .brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.03em;color:#fff;text-decoration:none;margin-right:auto}
.nav .brand span{font-size:11px;font-family:var(--mono);color:var(--marigold);letter-spacing:.1em;margin-left:7px}
.nav a{color:#B9C9C1;text-decoration:none;font-size:14.5px;font-weight:500}
.nav a:hover,.nav a.on{color:#fff}
.modechip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid #3D5A4E;color:#8FB3A2;padding:3px 8px;border-radius:5px}
.modechip.live{border-color:var(--marigold);color:var(--marigold)}

/* layout blocks */
main{padding:30px 0 70px}
.head{margin-bottom:22px}
.head p{color:var(--muted);margin-top:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:20px}
.grid{display:grid;gap:15px}
@media(min-width:640px){.grid.c2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:22px}
@media(min-width:900px){.split{grid-template-columns:1.5fr 1fr;align-items:start}}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* A grid item defaults to min-width:auto, which means it will not shrink below
 * the widest unbreakable thing inside it. A listing whose handle was a full URL
 * therefore forced its card to 475px inside a 348px column, and every ellipsis
 * rule below was powerless because there was nothing to overflow. Zero lets the
 * children truncate instead of the row growing. */
.stack{display:grid;gap:14px;min-width:0}
.stack > *{min-width:0}

/* buttons */
.btn{font-family:var(--body);font-size:15px;font-weight:600;border-radius:11px;padding:12px 19px;
  text-decoration:none;display:inline-block;cursor:pointer;border:1.5px solid transparent;text-align:center}
.btn-a{background:var(--jade);color:#fff;box-shadow:0 2px 0 var(--ink)}
.btn-b{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-b:hover{border-color:var(--ink)}
.btn-danger{background:var(--card);color:var(--rose);border-color:#F0CFDB}
.btn-wide{display:block;width:100%}
.btn[disabled],.btn.off{opacity:.42;pointer-events:none}
.btn-sm{font-size:13.5px;padding:8px 13px;border-radius:9px}

/* forms */
label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
input,select,textarea{font-family:var(--body);font-size:16px;width:100%;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink)}
input:focus,select,textarea:focus{outline:none;border-color:var(--jade)}
textarea{min-height:90px;resize:vertical}
.field{margin-bottom:15px}
.hint{font-size:13px;color:var(--muted);margin-top:5px}

/* pills */
.pill{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;display:inline-block}
.p-wait{background:#FBF0DC;color:#8A5C05}
.p-hold{background:var(--jade-soft);color:var(--jade)}
.p-check{background:#FBF0DC;color:#8A5C05}
.p-done{background:var(--jade);color:#fff}
.p-frozen{background:var(--rose-soft);color:var(--rose)}
.p-off{background:#E7EBE8;color:var(--muted)}

/* listing card */
.lst{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit}
.lst .plat{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:6px;background:var(--jade-soft);color:var(--jade)}
.lst .f{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.03em}
.lst .f small{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0}
.lst .price{font-family:var(--mono);font-size:16px;font-weight:700;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.lst .price small{display:block;font-family:var(--body);font-size:12px;font-weight:400;color:var(--muted)}

/* deposit / receipt */
.receipt{background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:15px 15px 0 0;padding:22px}
.tear{height:12px;background:var(--card);
  -webkit-mask-image:radial-gradient(circle at 50% 100%,transparent 6.5px,#000 7px);-webkit-mask-size:15px 12px;-webkit-mask-repeat:repeat-x;
  mask-image:radial-gradient(circle at 50% 100%,transparent 6.5px,#000 7px);mask-size:15px 12px;mask-repeat:repeat-x}
.qr{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;place-items:center}
.qr img{width:100%;max-width:220px;height:auto;display:block}
.addr{font-family:var(--mono);font-size:12.5px;word-break:break-all;background:var(--paper);
  border:1px dashed var(--line);border-radius:9px;padding:11px;line-height:1.5}
.bignum{font-family:var(--mono);font-size:31px;font-weight:700;letter-spacing:-.03em}

/* ---------------------------- account handle ----------------------------
   This was wearing `.addr`, the wallet-address style: 12.5px monospace with
   break-all, built for a 42-character hex string. A handle is a name, not a
   hash. It is the most identifying thing on the page and it was the smallest
   text in the card. It gets its own size, and wraps on word boundaries. */
/* The handle is the last band of the hero card, not a slab sitting inside it.
 *
 * It used to be a bordered box with its own radius and margin, dropped in
 * after the fact strip. The strip carries negative margins so it can sit flush
 * at the card's bottom edge, so the box ended up floating below a card that
 * had visually already finished. Flush, with a rule above it, it reads as one
 * more row of the same card.
 *
 * Mono rather than the display face: a handle is data somebody will copy, not
 * a heading, and the display face at 21px made a username the second largest
 * thing on the page. */
/* The last band of the hero card. White like the rest of it, separated by a
   rule rather than a fill: the grey made it read as an input somebody could
   type into, which it is not. */
.handle-box{margin:0 -20px -20px;padding:14px 20px;border-top:1px solid var(--line);
  background:var(--card);border-radius:0 0 15px 15px}
.handle-label{display:block;font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
/* The body face, not mono. A handle is read as a name rather than scanned as a
   code, and mono at this size made an ordinary username look like a hash. It
   still breaks anywhere, because a long link has to. */
.handle{display:block;font-family:var(--body);font-size:17px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}

/* ------------------------------ rails ------------------------------
   Other listings, below the fold on a listing page. */
.rail{margin-top:34px}
.rail-h{font-size:21px;margin:0 0 4px}
.rail-note{color:var(--muted);font-size:14px;margin:0 0 16px;max-width:62ch}
.rail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.rail-card{display:flex;flex-direction:column;gap:7px;padding:15px;border-radius:13px;
  background:var(--card);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s}
.rail-card:hover{border-color:var(--jade);transform:translateY(-2px)}
.rail-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rail-f{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.rail-f small{font-family:var(--body);font-size:12px;font-weight:600;color:var(--muted)}
.rail-meta{font-size:13px;color:var(--muted);line-height:1.4}
.rail-price{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:9px;
  border-top:1px dashed var(--line)}
.rail-price b{font-family:var(--mono);font-size:16px;letter-spacing:-.02em}
.rail-price small{font-size:12px;color:var(--muted)}

/* timeline */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:13px;padding:9px 0;position:relative}
.tl .dot{flex:none;width:21px;height:21px;border-radius:50%;border:2px solid var(--line);background:var(--card);
  display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--muted);margin-top:2px}
.tl li::before{content:"";position:absolute;left:9.5px;top:31px;bottom:-2px;width:2px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl .t{font-size:14.5px;color:var(--muted);line-height:1.45}
.tl li.done .dot{background:var(--jade);border-color:var(--jade);color:#fff}
.tl li.now .dot{background:var(--marigold);border-color:var(--marigold);color:#fff}
.tl li.warn .dot{background:var(--rose);border-color:var(--rose);color:#fff}
.tl li.done .t,.tl li.now .t{color:var(--ink)}
.tl li.now .t{font-weight:600}

/* countdown */
.clock{background:var(--ink);color:#fff;border-radius:14px;padding:18px 20px}
.clock .n{font-family:var(--mono);font-size:33px;font-weight:700;letter-spacing:-.02em}
.clock .l{font-size:13px;color:#9DB0A7;margin-top:2px}

/* safety checklist */
.check{display:grid;gap:0}
.check li{list-style:none;border-bottom:1px solid var(--line)}
.check li:first-child{border-top:1px solid var(--line)}
.check label{display:flex;gap:13px;align-items:flex-start;padding:15px 2px;cursor:pointer;margin:0;font-weight:400}
.check input{width:21px;height:21px;flex:none;margin:1px 0 0;accent-color:var(--jade)}
.check .h{font-family:var(--display);font-size:16px;font-weight:600;display:block;margin-bottom:2px}
.check .d{font-size:14px;color:var(--muted);display:block;line-height:1.45}
.check li.ok .h{color:var(--jade)}

/* chat */
.chat{display:grid;gap:9px;max-height:400px;overflow-y:auto;padding-right:4px}
.msg{background:var(--paper);border-radius:11px;padding:10px 13px;font-size:14.5px;max-width:85%}
.msg.mine{background:var(--jade-soft);margin-left:auto}
.msg.sys{background:transparent;border:1px dashed var(--line);color:var(--muted);font-size:13px;max-width:100%;text-align:center}
.msg .who{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:2px}

/* misc */
.banner{border-radius:12px;padding:14px 16px;font-size:14.5px;margin-bottom:18px}
.banner.warn{background:#FBF0DC;color:#7A5205;border:1px solid #EFD9A6}
.banner.bad{background:var(--rose-soft);color:var(--rose);border:1px solid #F0CFDB}
.banner.good{background:var(--jade-soft);color:var(--jade);border:1px solid #BFD6C9}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty h3{margin-bottom:8px;color:var(--ink)}
.scroll-hint{display:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* transfer speed badges */
.speed{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;white-space:nowrap}
.s-fast{background:var(--jade-soft);color:var(--jade)}
.s-medium{background:#FBF0DC;color:#8A5C05}
.s-slow{background:var(--rose-soft);color:var(--rose)}

/* QR chain label — mirrors the mark drawn into the code itself */
.qrnote{display:flex;align-items:center;gap:8px;justify-content:center;
  margin-top:10px;font-size:12.5px;font-weight:600}
.dotmark{width:15px;height:15px;border-radius:50%;background:#F0B90B;flex:none;
  display:grid;place-items:center;position:relative}
.dotmark::after{content:"";width:11px;height:11px;border-radius:50%;background:#26A17B;
  position:absolute}

/* ============================== auth ============================== */
.auth{display:grid;min-height:calc(100vh - 60px);min-height:calc(100dvh - 60px);margin:-30px -20px -70px}
@media(min-width:940px){.auth{grid-template-columns:1.05fr .95fr}}
.auth-brand{background:var(--ink);color:#fff;padding:44px 32px;display:flex;align-items:center;
  background-image:radial-gradient(circle at 15% 20%,rgba(227,155,24,.16),transparent 45%),
                   radial-gradient(circle at 85% 85%,rgba(15,93,70,.5),transparent 50%)}
@media(min-width:940px){.auth-brand{padding:56px 52px}}
.auth-h1{font-size:clamp(28px,3.6vw,42px);color:#fff;max-width:12em;line-height:1.08}
.auth-h1 em{font-style:normal;color:var(--marigold)}
.auth-lede{color:#B9C9C1;margin-top:16px;max-width:26em;font-size:17px}
.auth-points{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:16px;max-width:30em}
.auth-points li{display:flex;gap:13px;align-items:flex-start}
.auth-points .tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--jade);
  color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:2px}
.auth-points strong{display:block;font-size:15px;color:#fff;font-weight:600}
.auth-points span{display:block;font-size:14px;color:#93A8A0;margin-top:2px}

.auth-form{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 22px}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:30px;
  width:100%;max-width:400px;box-shadow:0 20px 50px -34px rgba(19,36,29,.55)}
.auth-h2{font-size:26px;margin-bottom:6px}
.auth-sub{color:var(--muted);font-size:14.5px;margin-bottom:22px}
.auth-foot{color:var(--muted);font-size:13px;text-align:center;margin-top:16px}
.auth-legal{color:var(--muted);font-size:12.5px;text-align:center;max-width:360px;margin-top:22px;line-height:1.5}
.auth-back{background:none;border:0;color:var(--muted);font-size:13.5px;cursor:pointer;padding:0 0 12px;font-family:var(--body)}
.auth-back:hover{color:var(--ink)}
.btn-lg{padding:15px 22px;font-size:16px}

.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:20px}
.otp-box{text-align:center;font-family:var(--mono);font-size:22px;font-weight:700;padding:14px 0;
  border:1.5px solid var(--line);border-radius:11px;background:var(--card)}
.otp-box:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 3px rgba(15,93,70,.12)}
.otp-box.filled{border-color:var(--jade)}

/* ============================ console ============================ */
.adm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.adm-badges{display:flex;gap:7px;flex-wrap:wrap}
.adm-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto}
.adm-tabs a{padding:11px 15px;text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:600;
  border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:7px}
.adm-tabs a:hover{color:var(--ink)}
.adm-tabs a.on{color:var(--ink);border-bottom-color:var(--jade)}
.adm-tabs .badge{background:var(--marigold);color:#fff;font-family:var(--mono);font-size:10.5px;
  padding:1px 6px;border-radius:999px;font-weight:700}
.adm-tabs .badge.alert{background:var(--rose)}

/* The four figures below the record card. They had a bottom margin and no top
   one, so they sat flush against the card above and read as part of it. */
.kpis{display:grid;gap:13px;margin-top:16px;margin-bottom:24px}
@media(min-width:640px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:17px;display:grid;gap:3px}
.kpi.kpi-alert{border-color:#F0CFDB;background:var(--rose-soft)}
.kpi .k{font-size:12.5px;color:var(--muted);font-weight:600}
.kpi .v{font-family:var(--mono);font-size:25px;font-weight:700;letter-spacing:-.03em}
.kpi .s{font-size:12.5px;color:var(--muted)}
.kpi-alert .v{color:var(--rose)}

.checks{list-style:none;padding:0;margin:0;display:grid;gap:0}
.checks li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.checks li:first-child{border-top:0}
.checks .mark{flex:none;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;margin-top:1px}
.checks li.ok .mark{background:var(--jade)}
.checks li.warn .mark{background:var(--marigold)}
.checks li.bad .mark{background:var(--rose)}
.checks strong{display:block;font-size:14.5px;font-weight:600}
.checks span{display:block;font-size:13.5px;color:var(--muted);margin-top:1px}
.checks a{font-size:13px;font-weight:600;display:inline-block;margin-top:4px}

.spark{display:flex;align-items:flex-end;gap:4px;height:90px}
.spark .bar{flex:1;background:var(--jade-soft);border-radius:3px 3px 0 0;min-height:3px}
.spark .bar:last-child{background:var(--jade)}

.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.filters a{font-size:13.5px;font-weight:600;text-decoration:none;color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.filters a:hover{border-color:var(--ink);color:var(--ink)}
.filters a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.row-card{display:grid;gap:16px}
@media(min-width:760px){.row-card{grid-template-columns:1fr 170px;align-items:start}}
.rc-title{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em}
tr.row-off{opacity:.55}
td.danger,.mono.danger{color:var(--rose);font-weight:700}
.toggle{display:flex;align-items:center;gap:13px}
.toggle-track{width:52px;height:30px;border-radius:999px;background:var(--line);position:relative;
  flex:none;transition:background .18s}
.toggle-track.on{background:var(--jade)}
.toggle-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;
  transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.toggle-track.on .toggle-knob{transform:translateX(22px)}

/* ========================= app shell ========================= */
body.shell{display:block}
.sb{position:fixed;top:0;left:0;bottom:0;width:244px;background:var(--ink);color:#B9C9C1;
  display:flex;flex-direction:column;padding:18px 14px;z-index:60;overflow-y:auto}
.sb-brand{display:flex;align-items:center;gap:11px;text-decoration:none;padding:4px 8px 20px}
.sb-logo{width:34px;height:34px;flex:none;display:block}
.sb-brand b{display:block;color:#fff;font-family:var(--display);font-size:17px;letter-spacing:-.03em}
.sb-brand em{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--marigold)}
.sb-nav{display:grid;gap:2px}
.sb-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  text-decoration:none;color:#9DB0A7;font-size:14.5px;font-weight:500}
.sb-nav a svg{width:18px;height:18px;flex:none}
.sb-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-nav a.on{background:var(--jade);color:#fff;font-weight:600}
.sb-badge{margin-left:auto;background:var(--marigold);color:var(--ink);font-family:var(--mono);
  font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px}
.sb-sep{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#5F7A6E;padding:18px 12px 7px}
.sb-foot{margin-top:auto;padding-top:18px;display:grid;gap:9px}
.sb-lang{text-align:center;font-size:12px;color:#8FA79C;text-decoration:none;border:1px solid #2E4A3E;
  border-radius:999px;padding:6px}
.sb-lang:hover{color:#fff;border-color:var(--marigold)}
.sb-user{display:flex;align-items:center;gap:10px;text-decoration:none;padding:9px;border-radius:10px;
  background:rgba(255,255,255,.05)}
.sb-user:hover{background:rgba(255,255,255,.1)}
.sb-av{width:32px;height:32px;border-radius:50%;background:var(--jade);color:#fff;flex:none;
  display:grid;place-items:center;font-weight:700;font-size:14px}
.sb-who{min-width:0}
.sb-who strong{display:block;color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sb-who em{display:block;font-style:normal;font-size:11.5px;color:#7E938A;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sb-out{text-align:center;font-size:12.5px;color:#7E938A;text-decoration:none;padding:5px}
.sb-out:hover{color:#fff}

.shell-main{padding:0;margin-left:244px;min-height:100vh;min-height:100dvh}
.shell-inner{max-width:1080px;margin:0 auto;padding:30px 26px 70px}
.mtop,.tabbar,.sb-toggle,.sb-scrim{display:none}

/* ===================== phone chrome =====================
   Below 900px the sidebar becomes a drawer, and its job is split in two:
   a top bar that says where you are and opens the drawer, and a bottom bar
   with the four places anyone actually goes. Reaching the top-left corner
   of a 6-inch phone one-handed is the thing people quietly give up on, so
   nothing that matters lives up there alone. */
/* Also any short screen, whatever its width.
 *
 * A Pro Max held sideways is 932px across and 430px tall: past the 900px
 * breakpoint, so the phone bars hid, and the sidebar keys off the same number,
 * so it did not appear either. The page had no navigation at all. Width alone
 * cannot tell a phone from a laptop once the phone is turned over; height can.
 * A real laptop is taller than 500px. */
@media(max-width:900px), (max-height:500px){
  .sb{transform:translateX(-100%);transition:transform .24s ease;width:min(84vw,290px);
    box-shadow:0 0 40px rgba(0,0,0,.4);height:100dvh;
    padding-top:max(18px,env(safe-area-inset-top));
    padding-bottom:max(18px,env(safe-area-inset-bottom));
    padding-left:max(14px,env(safe-area-inset-left))}
  .sb.open{transform:none}
  .sb-nav a{padding:13px 12px;font-size:15.5px}
  .sb-nav a svg{width:20px;height:20px}

  .shell-main{margin-left:0}
  /* top bar + bottom bar + the home indicator all have to be cleared */
  .shell-inner{padding:calc(60px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom))}

  .mtop{display:flex;align-items:center;gap:10px;position:fixed;top:0;left:0;right:0;z-index:58;
    height:calc(56px + env(safe-area-inset-top));padding:0 8px;
    padding-top:env(safe-area-inset-top);
    background:var(--ink);color:#fff}
  .mtop-brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
    font-family:var(--display);font-size:17px;letter-spacing:-.02em;margin-right:auto;min-width:0;
    min-height:44px}
  .mtop-brand img{width:28px;height:28px;border-radius:8px;flex:none}
  .mtop-brand b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mtop-lang{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#8FB3A2;
    border:1px solid #3D5A4E;border-radius:8px;text-decoration:none;
    min-width:44px;min-height:44px;display:grid;place-items:center;flex:none}

  /* Drawer footer: these were 30–33px, which is a miss as often as a hit. */
  .sb-lang{min-height:44px;display:grid;place-items:center;padding:6px 10px}
  .sb-out{min-height:44px;display:grid;place-items:center;padding:6px}
  .sb-user{padding:11px 9px}

  .sb-toggle{display:grid;place-items:center;width:44px;height:44px;flex:none;
    border-radius:11px;background:transparent;color:#fff;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sb-toggle:active{background:rgba(255,255,255,.1)}

  .sb-scrim{display:block;position:fixed;inset:0;background:rgba(19,36,29,.5);z-index:59;
    opacity:0;pointer-events:none;transition:opacity .24s}
  .sb-scrim.on{opacity:1;pointer-events:auto}

  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:57;
    background:var(--card);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:56px;padding:8px 4px;text-decoration:none;color:var(--muted);
    font-size:11px;font-weight:600;-webkit-tap-highlight-color:transparent}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a.on{color:var(--jade)}
  .tabbar a.on svg{stroke-width:2.1}
  .tabbar a:active{background:var(--paper)}
  .tab-dot{position:absolute;top:5px;left:50%;margin-left:5px;font-style:normal;
    font-family:var(--mono);font-size:10px;font-weight:700;line-height:1;
    background:var(--marigold);color:var(--ink);padding:2px 5px;border-radius:999px}

  /* iOS keeps scrolling the page behind an `overflow:hidden` body, so the
     body has to actually leave the flow. app.js puts the scroll offset back. */
  body.drawer-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
}

/* Landscape on a phone: a 56px bar top and bottom eats most of the screen. */
@media (max-width:900px) and (max-height:460px), (max-height:460px){
  .mtop{height:calc(46px + env(safe-area-inset-top))}
  .shell-inner{padding-top:calc(50px + env(safe-area-inset-top))}
  .tabbar a{min-height:44px;font-size:10px}
  .tabbar a svg{width:18px;height:18px}
}

/* marketplace cards get a hover lift now they are the front door */
.lst{transition:transform .12s ease,border-color .12s ease}


/* password fields */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:64px}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--paper);
  border:1px solid var(--line);border-radius:7px;padding:5px 9px;font-size:11.5px;font-weight:600;
  color:var(--muted);cursor:pointer;font-family:var(--body)}
.pw-eye:hover{color:var(--ink);border-color:var(--ink)}
.btn-link{background:none;border:0;padding:0;color:var(--jade);font-family:var(--body);font-size:13.5px;
  font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.btn-link:hover{color:var(--ink)}

/* ============================ brand mark ============================
   The mark is a self-contained tile: a rounded deep-green square with the
   figures knocked out in white. It already carries its own background, so
   painting another one behind it just leaves a pale halo around the rounded
   corners. It goes straight onto light and dark surfaces alike. */
.sb-logo{padding:0;overflow:hidden;border-radius:9px}
.sb-logo img{width:100%;height:100%;display:block}
.brand-mark{width:26px;height:26px;border-radius:7px;margin-right:8px;
  vertical-align:-7px;display:inline-block}

/* ===================== media library ===================== */
.media-grid{display:grid;gap:15px}
@media(min-width:620px){.media-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.media-grid{grid-template-columns:repeat(3,1fr)}}
.media-item{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column}
.media-item img{width:100%;height:150px;object-fit:contain;background:var(--paper);display:block;padding:8px}
.mi-body{padding:14px;display:flex;flex-direction:column;gap:0}
.use-tag{display:inline-block;font-size:11.5px;background:var(--jade-soft);color:var(--jade);
  padding:3px 8px;border-radius:6px;margin:0 5px 5px 0;text-decoration:none}
.use-tag:hover{background:var(--jade);color:#fff}
input.needs-alt{border-color:#F0CFDB;background:var(--rose-soft)}

/* ===================== editor ===================== */
.editor-wrap{display:grid;gap:20px;align-items:start}
@media(min-width:1000px){.editor-wrap{grid-template-columns:1fr 320px}}
.title-input{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:20px 22px;
  font-family:var(--display);font-size:27px;font-weight:800;letter-spacing:-.03em}
.title-input:focus{border-color:var(--jade)}
.toolbar{display:flex;flex-wrap:wrap;gap:3px;padding:9px 12px;border-bottom:1px solid var(--line);
  background:var(--paper);position:sticky;top:0;z-index:5}
.toolbar button{font-family:var(--body);font-size:13px;font-weight:600;background:transparent;border:1px solid transparent;
  border-radius:7px;padding:6px 9px;cursor:pointer;color:var(--ink);min-width:32px}
.toolbar button:hover{background:var(--card);border-color:var(--line)}
.toolbar .tb-table{color:var(--muted)}
.tb-sep{width:1px;background:var(--line);margin:3px 5px}
.editor{min-height:460px;padding:26px 22px;outline:none;font-size:17px}
.editor:empty:before{content:attr(data-placeholder);color:var(--muted)}
.editor table{width:100%;border-collapse:collapse;margin:0 0 20px}
.editor th,.editor td{border:1px solid var(--line);padding:9px 12px;min-width:60px}
.editor th{background:var(--jade-soft);font-weight:600}
.editor-status{display:flex;justify-content:space-between;padding:11px 22px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);background:var(--paper)}
.editor-side{display:grid;gap:15px}

/* search result preview */
.serp{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.serp-url{font-size:12.5px;color:#5f6368;margin-bottom:3px;word-break:break-all}
.serp-title{font-size:18px;color:#1a0dab;line-height:1.3;margin-bottom:3px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.serp-desc{font-size:13.5px;color:#4d5156;line-height:1.5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.score{font-family:var(--mono);font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px}
.score.sgood{background:var(--jade);color:#fff}
.score.sok{background:#FBF0DC;color:#8A5C05}
.score.sbad{background:var(--rose-soft);color:var(--rose)}

/* modal */
/* `display:grid` beats the hidden attribute, which is a boolean the browser
   implements as `display:none` at the lowest possible priority. Without this
   the image picker was open the moment the blog editor loaded, sitting over
   the post the writer came to write. */
.modal{position:fixed;inset:0;background:rgba(19,36,29,.5);z-index:90;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-box{background:var(--card);border-radius:16px;padding:22px;max-width:760px;width:100%;
  max-height:82vh;overflow-y:auto}
.media-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
.mp-item{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:8px;cursor:pointer;
  display:grid;gap:6px;font-family:var(--body)}
.mp-item:hover{border-color:var(--jade)}
.mp-item img{width:100%;height:82px;object-fit:contain}
.mp-item span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* sign in / sign up tabs */
.auth-tabs{display:flex;gap:4px;background:var(--paper);border:1px solid var(--line);
  border-radius:11px;padding:4px;margin-bottom:22px}
.auth-tabs a{flex:1;text-align:center;padding:10px;border-radius:8px;text-decoration:none;
  font-size:14.5px;font-weight:600;color:var(--muted)}
.auth-tabs a:hover{color:var(--ink)}
.auth-tabs a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(19,36,29,.1)}

/* The QR carries only the address, so the amount has to be unmissable here. */
.qramount{margin-top:8px;text-align:center;font-size:13px;color:var(--muted)}
.qramount b{font-family:var(--mono);color:var(--ink);font-size:14px}

/* Paying happens with two apps open on one phone: this one and Binance.
   Every value the buyer has to carry across gets its own copy button, so
   nobody is retyping a decimal amount or 42 hex characters from memory. */
.pay-amount{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.pay-amount .copy-amt{flex:none;margin-top:4px}
.copy-addr{margin-top:9px}

/* ================== things that were never desktop-only ==================
   These hold at every width. A long wallet address or an unbroken handle
   will push a page sideways on a phone and there is no width at which that
   is correct, so they are not inside a media query. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; overscroll-behavior-y: none; }
img, svg, video, canvas { max-width: 100%; height: auto; }
.addr, .mono, td, .msg, .rc-title, .sb-who strong, .sb-who em { overflow-wrap: anywhere; }
a, button, label, summary, input[type=checkbox] { -webkit-tap-highlight-color: rgba(21,89,61,.15); }

/* A table wide enough to need scrolling gets its own scroller, so it can
   never be clipped by whatever it happens to sit inside. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap > table { margin: 0; }

/* ============================ small screens ============================
   Most of this app is used on a phone: a buyer paying from Binance, a seller
   checking whether the money landed. These are the places the desktop layout
   stopped working, found by walking every page at 360px wide. */
@media (max-width: 720px) {

  /* Tap targets. Anything a thumb has to hit gets 44px of height, which is
     the size a finger actually is. */
  .btn { padding: 14px 20px; min-height: 48px; display: inline-flex;
         align-items: center; justify-content: center; }
  .btn-wide { display: flex; width: 100%; }
  .btn-sm { padding: 11px 15px; font-size: 14px; min-height: 44px; }
  .btn-link { min-height: 44px; display: inline-flex; align-items: center; }
  .pw-eye { min-height: 36px; padding: 8px 11px; }
  /* The language switch on the signed-out nav was a 31px chip. */
  .nav .modechip { min-height: 40px; display: inline-flex; align-items: center; padding: 3px 12px; }
  .nav .brand { min-height: 44px; }
  .nav-in { gap: 12px; }
  input, select, textarea { font-size: 16px; }   /* under 16px iOS zooms on focus */
  input, select { min-height: 48px; }
  select { appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363756C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
    background-size: 17px; padding-right: 40px; }

  /* Checkboxes on the safety list are the one control a buyer must not
     miss, and the label is the whole row. */
  .check label { padding: 16px 2px; gap: 14px; }
  .check input { width: 24px; height: 24px; }

  /* Two-column layouts stack, and the sidebar column goes underneath rather
     than squeezing the main content. */
  .split { grid-template-columns: 1fr; }
  .editor-wrap { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi { padding: 14px; }
  .kpi .v { font-size: 21px; }

  h1 { font-size: 26px; }
  h2 { font-size: 20px; }
  .card { padding: 16px; border-radius: 13px; }
  main { padding: 24px 0 60px; }

  /* Tables: scroll sideways rather than crushing every column, with a hint
     that there is more to the right. */
  .card table, table { display: block; overflow-x: auto; white-space: nowrap;
                       -webkit-overflow-scrolling: touch; }
  .tbl-wrap > table { display: table; white-space: nowrap; overflow: visible; }
  table th, table td { white-space: nowrap; }
  .scroll-hint { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }

  /* Console tabs scroll instead of wrapping into three rows. */
  .adm-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch;
              scroll-snap-type: x proximity; margin-bottom: 18px; }
  .adm-tabs::-webkit-scrollbar { display: none; }
  .adm-tabs a { scroll-snap-align: start; padding: 13px 14px; }
  .filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px;
             -webkit-overflow-scrolling: touch; }
  .filters::-webkit-scrollbar { display: none; }
  .filters a { flex: none; padding: 10px 15px; }
  .adm-head { margin-bottom: 12px; }

  /* The deal page: QR and address stack, and the code stays big enough to
     scan off the screen with another phone. Copy sits directly under the
     address because typing 42 hex characters by hand is not a plan. */
  .receipt { padding: 18px 16px; }
  .receipt .grid.c2 { grid-template-columns: 1fr; }
  .qr { padding: 12px; }
  .qr img { max-width: 260px; }
  .addr { font-size: 13.5px; line-height: 1.6; padding: 13px; }
  .bignum { font-size: 27px; }
  .clock .n { font-size: 29px; }
  .pay-amount { flex-direction: column; align-items: stretch; gap: 10px; }
  .pay-amount .copy-amt { width: 100%; margin-top: 0; }
  .copy-addr { width: 100%; margin-top: 10px; }

  /* Chat: the input and Send must stay on one line, and the log should not
     take the whole screen. The child selector outranks the generic
     `.row > .btn` stretch rule further down, which would otherwise make Send
     wider than the field you type into. */
  .chat { max-height: 46vh; }
  .msg { max-width: 92%; }
  .row.chat-send { flex-wrap: nowrap; gap: 8px; }
  .row.chat-send > input { min-width: 0; flex: 1 1 auto; width: auto; }
  .row.chat-send > .btn { flex: 0 0 auto; padding: 12px 16px; }

  /* Editor toolbar wraps to two rows instead of scrolling off. */
  .toolbar { position: static; padding: 8px; }
  .toolbar button { padding: 10px 11px; min-height: 40px; }
  .title-input { font-size: 21px; padding: 16px; }
  .editor { padding: 18px 14px; min-height: 320px; }
  .editor-status { padding: 11px 14px; flex-wrap: wrap; gap: 6px; }

  /* Six OTP boxes across a 360px screen. */
  .otp { gap: 6px; }
  .otp-box { font-size: 19px; padding: 12px 0; }
  .auth { min-height: auto; margin: -24px -20px -60px; }
  .auth-card { padding: 22px 18px; }
  .auth-form { padding: 26px 18px 40px; }
  .auth-brand { padding: 30px 20px; }
  .auth-h1 { font-size: 27px; }
  .auth-lede { font-size: 16px; margin-top: 12px; }
  .auth-points { margin-top: 22px; gap: 13px; }
  .auth-tabs a { padding: 13px 10px; }

  /* Media library and listing grids go single column so the images stay big
     enough to tell apart. */
  .media-grid { grid-template-columns: 1fr; }
  .row-card { grid-template-columns: 1fr; }
  .media-item img { height: 180px; }
  .media-pick { grid-template-columns: repeat(2, 1fr); }

  /* Rows that were side by side now stack, or the values fall off the edge. */
  .between { gap: 8px; }
  .row { gap: 8px; }
  .row > form, .row > .btn { flex: 1 1 auto; }
  /* The switch itself is 30px tall; the button around it carries the rest. */
  .toggle { min-height: 44px; }
  .modal { padding: 12px; align-items: end; }
  .modal-box { max-height: 88vh; padding: 18px; }
}

/* Very narrow, and older small Androids. */
@media (max-width: 380px) {
  .kpis { grid-template-columns: 1fr; }
  .otp { gap: 5px; }
  .otp-box { font-size: 17px; padding: 10px 0; }
  .adm-head h1 { font-size: 22px; }
  .bignum { font-size: 24px; }
  .lst .f { font-size: 23px; }
  .pill { font-size: 11.5px; padding: 4px 8px; }
}

/* ============ marketplace (shared with the public site) ============
   partials/market.ejs and partials/card.ejs render in both shells, so the
   classes they use have to exist in both stylesheets. Kept identical to the
   site.css block on purpose: when one changes, change both.
   The `.crumbs` and card rules below come from the same partial. */
/* ================= homepage marketplace =================
   Each filter option is both a link and a hidden checkbox. The link works
   with JavaScript off and gives crawlers a real URL for every narrowed view;
   the checkbox carries the state when the form submits. `.box` is the square
   you actually see. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mkt-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
@media(min-width:940px){.mkt-grid{grid-template-columns:258px minmax(0,1fr)}}
.mkt-results{min-width:0}
/* The page-wide `.grid` goes to four columns at 980px, but the results sit in
   a column narrowed by the filter rail, and four across there squeezes a card
   until "45.2k followers" breaks over two lines. Size to the space instead. */
.mkt-results .grid{grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}

.mkt-filters{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:4px 18px 18px}
@media(min-width:940px){
  .mkt-filters{position:sticky;top:86px;max-height:calc(100vh - 106px);overflow-y:auto}
}
.fgroup{border-bottom:1px solid var(--line);padding:16px 0}
.fgroup:last-of-type{border-bottom:0}
.fgroup > h3{font-size:12px;font-family:var(--mono);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:11px}

.opt{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:15px;min-height:40px;
  text-decoration:none;color:var(--ink)}
.opt .count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.opt.off,.speedopt.off{opacity:.42;pointer-events:none}
.opt:hover .box,.speedopt:hover .box{border-color:var(--jade)}
.box{width:19px;height:19px;border:1.8px solid var(--line);border-radius:5px;flex:none;
  background:var(--card);display:block;position:relative}
.box.on{background:var(--jade);border-color:var(--jade)}
.box.on::after{content:"";position:absolute;left:5.5px;top:2px;width:4px;height:9px;
  border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(42deg)}

.speedopt{display:grid;grid-template-columns:auto 1fr;gap:0 10px;padding:9px 0;min-height:46px;
  text-decoration:none;color:var(--ink)}
.speedopt .box{grid-row:span 2;align-self:center}
.speedopt b{font-size:15px;font-weight:600}
.speedopt small{grid-column:2;color:var(--muted);font-size:12.5px;line-height:1.4}

.range{display:flex;align-items:center;gap:8px}
.range input{width:100%;min-width:0;font-family:var(--mono);font-size:14px;padding:10px 11px;
  border:1.5px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink)}
.range input:focus{border-color:var(--jade);outline:none;background:var(--card)}
.range span{color:var(--muted);font-size:13px}
.bands{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.band{font-size:12.5px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);color:var(--muted);text-decoration:none;min-height:36px;
  display:inline-flex;align-items:center}
.band:hover{border-color:var(--jade);color:var(--jade)}
.band.on{background:var(--jade);border-color:var(--jade);color:#fff}

.mkt-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mkt-count{font-family:var(--mono);font-size:14px;color:var(--muted)}
.mkt-count b{color:var(--ink);font-size:16px}
.mkt-sortwide{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.mkt-sort{font-family:var(--body);font-size:14.5px;padding:10px 34px 10px 12px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);min-height:44px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363756C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px}

.mkt-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.mkt-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:8px 9px 8px 13px;
  border-radius:999px;background:var(--jade-soft);color:var(--jade);font-weight:600;
  text-decoration:none;min-height:36px}
.mkt-chip:hover{background:#D3E5DA}
.mkt-chip.clear{background:transparent;color:var(--muted);text-decoration:underline;padding:8px 6px}

.mkt-empty{background:var(--card);border:1px dashed var(--line);border-radius:15px;
  padding:44px 26px;text-align:center}
.mkt-empty h3{font-size:19px;margin-bottom:8px}
.mkt-empty p{color:var(--muted);font-size:15px;max-width:44ch;margin:0 auto 18px}

.mkt-cats{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.mkt-cats h3{font-size:15px;margin-bottom:4px}
.mkt-cats p{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.mkt-catlinks{display:flex;flex-wrap:wrap;gap:8px}
.mkt-catlinks a{font-size:13.5px;padding:9px 13px;border-radius:9px;background:var(--card);
  border:1px solid var(--line);text-decoration:none;color:var(--muted);min-height:40px;
  display:inline-flex;align-items:center}
.mkt-catlinks a:hover{border-color:var(--jade);color:var(--jade)}

.mkt-bar,.mkt-sheet-head,.mkt-sheet-foot{display:none}

/* Below the two-column breakpoint the rail becomes a sheet from the bottom,
   because a 258px sidebar on a phone leaves a 100px page. */
@media(max-width:939px){
  .mkt-bar{display:flex;gap:10px;position:sticky;top:0;z-index:30;padding:12px 0;
    background:var(--paper);border-bottom:1px solid var(--line);margin-bottom:16px}
  .mkt-bar .btn,.mkt-bar .mkt-sortbar{flex:1}
  .mkt-bar .mkt-sort{width:100%}
  .mkt-badge{background:var(--marigold);color:var(--ink);font-family:var(--mono);
    font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;margin-left:7px}
  .mkt-head .mkt-sortwide{display:none}

  .mkt-filters{position:fixed;inset:auto 0 0 0;z-index:60;border-radius:18px 18px 0 0;
    max-height:86vh;overflow-y:auto;transform:translateY(101%);
    transition:transform .24s ease;box-shadow:0 -12px 40px -18px rgba(19,36,29,.5);
    padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .mkt-filters.open{transform:none}
  .mkt-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;top:0;z-index:2;background:var(--card);padding:16px 0 10px;
    border-bottom:1px solid var(--line);margin-bottom:4px}
  .mkt-sheet-head h3{font-size:18px}
  .mkt-close{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
    background:var(--paper);cursor:pointer;display:grid;place-items:center}
  .mkt-sheet-foot{display:flex;gap:9px;position:sticky;bottom:0;z-index:2;background:var(--card);
    padding:12px 0 4px;border-top:1px solid var(--line);margin-top:8px}
  .mkt-sheet-foot .btn{flex:1}
  .mkt-scrim{position:fixed;inset:0;background:rgba(19,36,29,.5);z-index:55;opacity:0;
    pointer-events:none;transition:opacity .24s}
  .mkt-scrim.on{opacity:1;pointer-events:auto}
  body.mkt-open{overflow:hidden}
}

.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--jade)}
.lst .top{display:flex;justify-content:space-between;align-items:center}
.lst .followers{font-family:var(--display);font-size:27px;font-weight:800;letter-spacing:-.03em}
.lst .followers small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.lst .meta{font-size:14px;color:var(--muted)}
.lst .price{font-family:var(--mono);font-size:17px;font-weight:700;margin-top:auto;padding-top:11px;border-top:1px dashed var(--line)}
.lst .price small{display:block;font-family:var(--body);font-size:12.5px;font-weight:400;color:var(--muted)}

/* ===================== featured slots =====================
   The seller-facing side of the homepage shelf. */
.meter{display:flex;gap:7px;margin:16px 0 10px}
.slot{flex:1;min-height:42px;border-radius:9px;border:1.5px dashed var(--line);
  background:var(--paper);display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;color:var(--muted)}
.slot.taken{background:var(--jade);border:1.5px solid var(--jade);color:#fff}
.slot.free{border-color:var(--jade);color:var(--jade);background:var(--jade-soft)}

.pkgs{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));margin-top:18px}
.pkg{position:relative;border:1.5px solid var(--line);border-radius:14px;padding:15px;
  background:var(--card);cursor:pointer;display:grid;gap:4px}
.pkg:hover{border-color:var(--jade)}
.pkg input{position:absolute;opacity:0;width:0;height:0}
.pkg:has(input:checked){border-color:var(--jade);box-shadow:0 0 0 3px var(--jade-soft)}
.pkg:has(input:focus-visible){outline:3px solid var(--marigold);outline-offset:2px}
.pkg-days{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.02em}
.pkg-cost{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--jade)}
.pkg-rate{font-size:12px;color:var(--muted)}
.pkg-tag{position:absolute;top:-9px;right:11px;background:var(--marigold);color:var(--ink);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px}

.queue-pos{display:flex;align-items:center;gap:14px;background:var(--paper);
  border-radius:12px;padding:15px 17px;margin-top:16px}
.queue-pos .n{font-family:var(--mono);font-size:31px;font-weight:700;color:var(--jade);line-height:1}
.queue-pos .t{font-size:14px;color:var(--muted)}

@media(max-width:620px){
  .meter{flex-wrap:wrap}
  .slot{flex:1 1 28%}
  .pkgs{grid-template-columns:repeat(2,1fr)}
}

/* ---- the seller's own listings ---- */
/* On /sell these sat inside a white card. Standing alone on the paper
   background they need their own, or they read as unfinished next to every
   other card on the site. */
.mylst{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px}
.mylst .plat{margin-bottom:8px;display:inline-block}
.mylst-figures{margin-top:3px;font-size:14px}
.mylst-figures b{font-family:var(--mono);font-weight:700;letter-spacing:-.02em}
/* The row holding the handle and the status pill.
 *
 * A flex item will not shrink below the width of its content by default, so a
 * handle that is a full URL pushed the whole card wider than the column: the
 * card measured 475px inside a 348px parent, and the ellipsis never fired
 * because there was nothing to overflow. min-width:0 lets the left side shrink
 * so the handle truncates instead of the card growing. */
.mylst-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-width:0}
.mylst-top > *:first-child{min-width:0;flex:1 1 auto}
.mylst-top > *:last-child{flex:0 0 auto}
.mylst-name{font-weight:700;font-size:17px;color:var(--ink);text-decoration:none;
  display:block;overflow-wrap:anywhere;letter-spacing:-.01em}
.mylst-name:hover{color:var(--jade)}
.mylst-feat{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line);
  font-size:13.5px;color:var(--muted)}
/* With the slot count gone this row holds only a button, and space-between on
   a single child pins it to the left edge. The featured state still has two
   children, so the rule stays and only the offer case is realigned. */
.mylst-feat.off{justify-content:flex-start}
.mylst-feat.on{color:var(--jade)}
.mylst-feat.on b{color:var(--jade)}
.mylst-feat.pending{color:#8A5A10}

/* A seller browsing should spot their own account without reading handles. */
.mine-tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 8px;border-radius:7px;
  background:var(--ink);color:#fff;white-space:nowrap}
.lst.is-mine{border-color:var(--ink)}

.verify-box{margin-top:20px;padding:16px;border-radius:13px;background:var(--paper);
  border:1px solid var(--line)}
.verify-box h3{font-size:15px;margin-bottom:6px}
.verify-row{margin-top:12px;flex-wrap:nowrap;gap:8px}
.verify-row input{font-family:var(--mono);font-size:13.5px;min-width:0;flex:1 1 auto}
.verify-row .btn{flex:0 0 auto}
@media(max-width:620px){
  .verify-row{flex-wrap:wrap}
  .verify-row input,.verify-row .btn{flex:1 1 100%}
}

.verify-box{margin-top:20px;padding:15px;border-radius:12px;background:var(--paper);
  border:1px solid var(--line)}
.verify-box input{font-family:var(--mono);font-size:13px;min-width:0;flex:1 1 auto}
.verify-box .btn{flex:0 0 auto}

/* ---- signed-in marketplace: header, your status, saved searches ---- */
.mhead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.mhead h1{font-size:27px}
.mhead .sub{color:var(--muted);font-size:14.5px;margin-top:4px}

.you{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:18px 0 22px}
.you a{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 16px;
  text-decoration:none;color:inherit;display:flex;gap:12px;align-items:center}
.you a:hover{border-color:var(--jade)}
.you .ic{width:36px;height:36px;border-radius:10px;background:var(--jade-soft);color:var(--jade);
  display:grid;place-items:center;flex:none}
.you .t{font-weight:600;font-size:14.5px;display:block}
.you .d{font-size:12.5px;color:var(--muted);display:block;line-height:1.35}
.you a.act{border-color:var(--marigold);background:#FEF8EE}
.you a.act .ic{background:#FBEEDA;color:#8A5A10}





.mkt-empty-what{font-family:var(--mono);font-size:13px;color:var(--jade);background:var(--jade-soft);
  display:inline-block;padding:7px 13px;border-radius:9px;margin:0 auto 12px}






@media(max-width:620px){
  .mhead{gap:12px}
  .mhead .btn{width:100%}
  .you{grid-template-columns:1fr}
}

.mylst-locked{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:11px;padding-top:11px;border-top:1px dashed var(--line);
  font-size:13px;color:#8A5A10}

/* ---- filters laid flat, for signed-in members ---- */
.mkt-flat{grid-template-columns:1fr}
.mkt-flat .mkt-filters{position:static;max-height:none;overflow:visible;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 22px;padding:14px 18px}
/* The options are direct children of the group, not wrapped in anything, so
   the group itself has to be the flex container. */
.mkt-flat .fgroup{border-bottom:0;padding:8px 0;min-width:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mkt-flat .fgroup > h3{flex:1 1 100%;margin-bottom:2px}

/* Eight platforms stacked vertically is a column; laid flat they wrap as chips. */
.mkt-flat .fgroup > div,
.mkt-flat .bands{display:flex;flex-wrap:wrap;gap:6px;margin-top:0}
.mkt-flat .opt{border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  min-height:36px;gap:7px;background:var(--card)}
.mkt-flat .opt:hover{border-color:var(--jade)}
.mkt-flat .opt .box{width:15px;height:15px;border-radius:4px}
.mkt-flat .opt .box.on::after{left:4.3px;top:1.4px;width:3px;height:7px;border-width:0 2px 2px 0}
.mkt-flat .opt .count{margin-left:2px;font-size:11px}

.mkt-flat .speedopt{border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  min-height:36px;grid-template-columns:auto auto;gap:0 7px;align-items:center;background:var(--card)}
.mkt-flat .speedopt:hover{border-color:var(--jade)}
.mkt-flat .speedopt b{font-size:13.5px;font-weight:600}
.mkt-flat .speedopt small{display:none}   /* the blurb needs a column it no longer has */
.mkt-flat .speedopt .box{grid-row:auto;width:15px;height:15px;border-radius:4px}
.mkt-flat .speedopt .box.on::after{left:4.3px;top:1.4px;width:3px;height:7px;border-width:0 2px 2px 0}

.mkt-flat .range{gap:6px}
.mkt-flat .range input{width:92px;padding:7px 9px;min-height:36px;font-size:13px}
.mkt-flat .band{padding:6px 11px;min-height:36px;font-size:12px}
.mkt-flat .mkt-sheet-head,.mkt-flat .mkt-sheet-foot{display:none}

@media(max-width:939px){
  /* On a phone the sheet is already the right answer, so the flat layout has
     to get out of its way completely. `position:static` above was winning over
     the drawer's `position:fixed`, which left the whole filter panel sitting
     open in the page above the listings: every option always visible, and the
     first account pushed most of a screen down. */
  .mkt-flat .mkt-filters{display:block;padding:4px 18px 18px;
    position:fixed;inset:auto 0 0 0;z-index:60;border-radius:18px 18px 0 0;
    max-height:86vh;overflow-y:auto;transform:translateY(101%);
    background:var(--card);border:1px solid var(--line);
    padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .mkt-flat .mkt-filters.open{transform:none}
  .mkt-flat .fgroup{border-bottom:1px solid var(--line);padding:16px 0}
  .mkt-flat .opt,.mkt-flat .speedopt{border:0;border-radius:0;background:none;padding:7px 0}
  .mkt-flat .speedopt small{display:block;grid-column:2}
  .mkt-flat .speedopt{grid-template-columns:auto 1fr}
  .mkt-flat .range input{width:100%}
  .mkt-flat .mkt-sheet-head,.mkt-flat .mkt-sheet-foot{display:flex}
}

/* Platform and location carry eight or more options each, so they take a full
   row and let their chips flow. The short groups share the row above. */
.mkt-flat .fgroup-wide{flex:1 1 100%}
.mkt-flat .fgroup-wide > div{gap:6px}

/* ---- filters folded into menus, for signed-in members ----
   Only inside .mkt-flat, so the public sidebar and the phone sheet are
   untouched. Open, a menu is the same list of options it always was; closed,
   the listings start about 300px higher. app.js wraps each group's options in
   a .menu-wrap so there is something to position. */
@media(min-width:940px){
  .mkt-flat .mkt-filters{background:none;border:0;padding:0;gap:8px;align-items:center}
  .mkt-flat .fgroup[data-menu]{position:relative;padding:0;border:0;gap:0;display:block}
  /* Platform and location took a full row each in the flat bar, because they
     carry eight options. Folded into menus they are just buttons, so that rule
     has to stop applying or it breaks the toolbar onto three lines. */
  .mkt-flat .fgroup-wide[data-menu]{flex:0 0 auto}

  .mkt-flat .fgroup[data-menu] > h3{margin:0;cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;
    background:var(--card);border:1.5px solid var(--line);border-radius:999px;
    font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:0;
    text-transform:none;color:var(--ink);white-space:nowrap}
  .mkt-flat .fgroup[data-menu] > h3::after{content:"\25BE";font-size:10px;opacity:.5}
  .mkt-flat .fgroup[data-menu] > h3:hover{border-color:var(--jade)}
  .mkt-flat .fgroup[data-menu].set > h3{border-color:var(--jade);background:var(--jade-soft);
    color:var(--jade);font-weight:600}

  /* `.mkt-flat .fgroup > div` from the flat layout outranks a plain
     `.menu-wrap`, which left every menu permanently open. Matching the
     attribute and the child gives this the higher specificity it needs. */
  .mkt-flat .fgroup[data-menu] > .menu-wrap{position:absolute;top:calc(100% + 6px);left:0;min-width:238px;
    background:var(--card);border:1px solid var(--line);border-radius:13px;padding:8px;
    box-shadow:0 18px 40px -22px rgba(19,36,29,.55);
    display:none;flex-direction:column;gap:2px;z-index:31}
  .mkt-flat .fgroup[data-menu].open{z-index:32}
  .mkt-flat .fgroup[data-menu].open > .menu-wrap{display:flex}
  .mkt-flat .menu-wrap .opt{border:0;border-radius:9px;background:none;padding:8px 9px;min-height:40px}
  .mkt-flat .menu-wrap .opt:hover{background:var(--paper)}
  .mkt-flat .menu-wrap .speedopt{border:0;border-radius:9px;background:none;padding:8px 9px;
    grid-template-columns:auto 1fr;min-height:44px}
  .mkt-flat .menu-wrap .speedopt:hover{background:var(--paper)}
  .mkt-flat .menu-wrap .speedopt small{display:block;grid-column:2}
  .mkt-flat .menu-wrap .range{padding:4px;gap:7px}
  .mkt-flat .menu-wrap .range input{width:100%}
  .mkt-flat .menu-wrap .bands{padding:6px 4px 2px;margin-top:0}
  /* a menu near the right edge should open inwards */
  .mkt-flat .fgroup[data-menu]:nth-last-child(-n+2) > .menu-wrap{left:auto;right:0}
}

/* ===================== phone pass =====================
   Found by walking every page at 360 and 390. */
@media(max-width:420px){
  /* The receipt's own padding plus the page gutter pushed the deal page four
     pixels wider than a 360px screen. Nothing else on the site is that tight,
     so the fix belongs here rather than in the shared padding. */
  .receipt{padding:14px 12px}
  .shell-inner{padding-left:12px;padding-right:12px}
  .addr{font-size:12.5px;padding:11px}
  .qr img{max-width:100%}
}

@media(max-width:939px){
  /* Anything a thumb has to hit gets 40px. These sat at 36, which is the size
     of a fingertip minus the part that actually lands where you aimed. */
  .band,.mkt-chip,.opt,.speedopt{min-height:42px}
  .range input,.mkt-sort,
  .chip{min-height:40px;display:inline-flex;align-items:center}
  .mylst-name{display:inline-flex;align-items:center;min-height:40px}
  .crumbs a{display:inline-flex;align-items:center;min-height:40px}
  .fgrid a,.catlinks a,.mkt-catlinks a{min-height:44px}
}

/* ---- seller screenshots ---- */
.shot-row{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}
.shot-row input[type=file]{font-size:13.5px;padding:9px;border:1.5px dashed var(--line);
  border-radius:10px;background:var(--paper);width:100%}
.shots{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.shots h3{font-size:16px;margin-bottom:12px}
.shot{margin:0 0 14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font-size:13.5px;color:var(--muted);padding:10px 13px;border-top:1px solid var(--line)}
@media(min-width:620px){
  .shot-row{grid-template-columns:1fr 1fr;align-items:center}
  .shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
  .shots h3,.shots .hint{grid-column:1/-1}
  .shot{margin:0}
}

/* ---- ratings and seller badges ---- */
.stars{display:inline-flex;gap:2px;vertical-align:middle}
.stars svg{width:14px;height:14px}
.stars .f,.stars-lg .f{fill:var(--marigold)}
.stars .e,.stars-lg .e{fill:#DFE6E0}
.stars-lg{display:inline-flex;gap:3px}
.stars-lg svg{width:26px;height:26px}
.srating{display:inline-flex;align-items:center;gap:6px;font-size:13.5px}
.srating b{font-family:var(--mono);font-size:14.5px}

.sbadge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.sb-ver{background:var(--jade-soft);color:var(--jade)}
/* Marigold, not jade.
 *
 * Pro sat in the same green family as Verified, so the two read as variations
 * of one badge rather than a step up. Pro is the harder of the two to get:
 * verification is paperwork, Pro is ten completed sales and a rating held
 * above 4.6. Marigold is already the site's colour for something earned, and
 * it separates the two at a glance without adding a third hue. */
.sb-pro{background:linear-gradient(135deg,#E9A62B,#C87F0B);color:#3A2704;
  box-shadow:0 2px 8px -3px rgba(138,90,16,.55)}
.sbadge svg{width:11px;height:11px;flex:none}

.seller-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;
  color:var(--muted);padding-top:9px;border-top:1px dashed var(--line);margin-top:2px}

.spanel{border:1px solid var(--line);border-radius:15px;padding:18px;background:var(--card);margin-top:22px}
.spanel .shead{display:flex;align-items:center;gap:13px}
.spanel .avatar{width:46px;height:46px;border-radius:14px;background:var(--jade);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:19px;flex:none}
.spanel .sname{font-weight:700;font-size:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sstats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:15px;
  border-top:1px solid var(--line);padding-top:13px}
.sstats b{display:block;font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:-.02em}
.sstats span{font-size:12px;color:var(--muted)}
.measured{margin-top:13px;background:var(--jade-soft);border-radius:11px;padding:11px 13px;
  font-size:13px;color:#14503A}
.srev{border-top:1px solid var(--line);padding-top:12px;margin-top:13px}
.srev-row{padding:10px 0;border-bottom:1px dashed var(--line)}
.srev-row:last-of-type{border-bottom:0}
.srev-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.srev-tags span{font-size:11.5px;background:var(--paper);color:var(--muted);padding:3px 8px;border-radius:999px}

.ratebox{margin-top:16px}
.rate-row{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-top:14px}
.rate-star{background:none;border:0;cursor:pointer;padding:3px;line-height:0;min-height:44px}
.rate-star svg{width:34px;height:34px;fill:#DFE6E0;transition:.1s}
.rate-star.on svg{fill:var(--marigold)}
.rate-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.choice{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--card);
  border-radius:999px;padding:9px 14px;min-height:44px;font-size:14px;cursor:pointer;color:var(--muted)}
.choice:has(input:checked){border-color:var(--jade);background:var(--jade-soft);color:var(--jade);font-weight:600}
.choice input{width:16px;height:16px;accent-color:var(--jade);margin:0}

/* ---- verification capture ---- */
.cap{border:1px solid var(--line);border-radius:13px;padding:14px;margin-bottom:14px;background:var(--card)}
.cap-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:14.5px}
.cap-state{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cap-stage{background:var(--ink);border-radius:11px;overflow:hidden;min-height:150px;
  display:grid;place-items:center}
.cap-stage video,.cap-stage img{width:100%;display:block;max-height:320px;object-fit:cover}
.cap-stage .hint{color:#B9C9C1;margin:0}

/* ---- seller avatar: the ring is Pro ----
   The corner tick has gone. Verification is stated once, on the name, and a
   second tick three centimetres away was the same claim twice. */
.av{position:relative;width:46px;height:46px;flex:none}
.av .disc{width:100%;height:100%;border-radius:14px;background:var(--jade);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:19px}
.av.pro .disc{box-shadow:0 0 0 2.5px var(--card),0 0 0 5px var(--marigold)}

.av.lg{width:74px;height:74px}
.av.lg .disc{border-radius:22px;font-size:29px}


.locked{background:var(--paper);border:1px dashed var(--line);border-radius:12px;
  padding:14px;text-align:center;margin-top:12px}
.blur{filter:blur(5px);user-select:none;margin-bottom:8px}

/* ---- the seller's own record, on their profile ---- */
.myrec .who{display:flex;gap:15px;align-items:center}
.myrec .who h3{font-size:20px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.prow{padding:10px 0;border-top:1px dashed var(--line);font-size:14px}
.prow:first-of-type{border-top:0}
.prog{height:7px;border-radius:999px;background:var(--paper);overflow:hidden;margin-top:6px}
.prog i{display:block;height:100%;background:var(--marigold)}

.phrase-box{background:var(--jade-soft);border-radius:11px;padding:12px 14px;margin-bottom:11px;
  display:flex;flex-direction:column;gap:3px}
.phrase-box .phrase{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.02em;
  color:var(--jade);text-transform:lowercase}
.cap-stage .playback{width:100%;max-height:320px;display:block}
.rec-count{font-family:var(--mono);font-size:12px}

.vcheck{display:grid;gap:12px;grid-template-columns:1fr;margin-top:14px;align-items:center;
  background:var(--jade-soft);border-radius:13px;padding:14px}
.vcheck .phrase{font-family:var(--display);font-size:27px;font-weight:800;letter-spacing:-.02em;
  color:var(--jade);text-transform:lowercase;line-height:1.15}
.vcheck video{width:100%;border-radius:11px;background:#000;display:block;max-height:300px}
@media(min-width:700px){.vcheck{grid-template-columns:1fr 1.2fr}}

/* ---- the description, and what a visitor cannot see yet ---- */
.desc{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.desc h3{font-size:15px;margin-bottom:8px}
.desc p{color:var(--muted);font-size:15px;white-space:pre-line;overflow-wrap:anywhere}
.counter{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;margin-top:5px}
.counter.ok{color:var(--jade)}

/* Blurred, not replaced. A visitor can see something real is behind it. */
.handle.blurred{filter:blur(7px);user-select:none;pointer-events:none;display:block}
.handle-gate{margin-top:11px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shot.blurred img{filter:blur(9px);pointer-events:none}
.shot.blurred{position:relative}

/* The disc holds either an SVG or an uploaded image; both fill it. */
.av .disc svg,.av .disc img{width:100%;height:100%;display:block;object-fit:cover}
.av .disc{overflow:hidden;padding:0}

.desc-card{margin-top:16px}
.desc-card h3{font-size:16px;margin-bottom:9px}
.desc-card p{color:var(--muted);font-size:15px;white-space:pre-line;overflow-wrap:anywhere}

.spanel{margin-top:0}

/* ---- upload progress ---- */
.up-bar{margin-top:11px}
.up-track{height:8px;border-radius:999px;background:var(--paper);overflow:hidden}
.up-fill{height:100%;width:0;background:var(--jade);transition:width .2s linear}
.up-fill.working{background:linear-gradient(90deg,var(--jade),var(--marigold),var(--jade));
  background-size:200% 100%;animation:upwork 1.1s linear infinite}
@keyframes upwork{to{background-position:-200% 0}}
.up-label{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:6px;display:block}
@media(prefers-reduced-motion:reduce){.up-fill.working{animation:none}}

/* ---- staff listing review ---- */
.rc-desc{margin-top:9px;padding:11px 13px;background:var(--paper);border-radius:10px;
  font-size:14px;white-space:pre-line;overflow-wrap:anywhere;max-height:180px;overflow-y:auto}
.rc-shots{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-top:11px}
.rc-shots figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.rc-shots img{display:block;width:100%;height:auto}
.rc-shots figcaption{font-size:12px;color:var(--muted);padding:7px 9px;border-top:1px solid var(--line)}
.rc-seller{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:11px;padding-top:10px;
  border-top:1px dashed var(--line);font-size:13.5px}

.rc-size{display:block;font-family:var(--mono);font-size:11px;margin-top:3px}

/* ---- rejection ---- */
.rej summary{list-style:none;cursor:pointer}
.rej summary::-webkit-details-marker{display:none}
.rej-body{margin-top:9px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--paper)}
.rej-opt{display:flex;gap:9px;align-items:flex-start;padding:9px;border:1.5px solid var(--line);
  border-radius:10px;margin-bottom:7px;cursor:pointer;background:var(--card);min-height:44px}
.rej-opt:hover{border-color:var(--jade)}
.rej-opt input{margin-top:3px;width:17px;height:17px;accent-color:var(--jade);flex:none}
.rej-opt b{display:block;font-size:13.5px}
.rej-opt .muted{display:block;font-size:12px}
.rej-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 6px;border-radius:6px;margin-left:auto;flex:none;align-self:flex-start}
.t-fix{background:var(--jade-soft);color:var(--jade)}
.t-final{background:#FBE4EA;color:#94254B}
.btn-r{background:var(--rose);color:#fff;border-color:var(--rose)}
.rc-rej{margin-top:10px;padding:11px 13px;background:#FBE4EA;border-radius:10px;font-size:13.5px;color:#7A1E3E}
.rc-rej b{display:block;margin-bottom:2px}
.rej-strike{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;font-weight:700}
.mylst-rej{margin-top:11px;padding:12px 14px;background:#FBE4EA;border-radius:11px;font-size:14px;color:#7A1E3E}
.mylst-rej b{display:block;margin-bottom:3px}

.file-err{font-size:13px;color:#94254B;margin:6px 0 0;font-weight:600}
input[type=file].bad{border-color:var(--rose)}

.file-err.ok{color:var(--jade)}
/* Anchored to the card, not to the header row inside it: .who is a flex
   container sized to its content, so positioning against it would put the
   button wherever that content happened to end. */
.myrec { position: relative; }
.myrec .who { padding-right: 130px; }
.myrec-verify { position: absolute; top: 20px; right: 20px; }

@media (max-width: 560px) {
  /* The verify button is the first child of this flex row, so dropping it back
     into the flow put it before the avatar: a button floating on the left, the
     name shoved right, and a column of empty space between them. Wrapping the
     row and ordering the button last puts it under everything, full width. */
  .myrec .who { padding-right: 0; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
  /* Fixed size. Once the row wraps, a flex item with no basis stretches to
     fill it, and the avatar became a 330px wide green bar. */
  .myrec .who > .av { order: 1; flex: 0 0 auto; width: 56px; height: 56px; }
  .myrec .who > div { order: 2; flex: 1 1 180px; min-width: 0; }
  .myrec-verify { position: static; order: 3; display: flex; margin: 4px 0 0; width: 100%; }

  /* The upload row sat beside the name in a narrow column and wrapped badly. */
  .myrec .who .row { width: 100%; }
  .myrec .who input[type=file] { max-width: 100%; }
}

/* ---- live payout on the sell form ---- */
.payout{margin-top:12px;background:var(--jade-soft);border-radius:12px;padding:13px 15px}
.payout-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:13.5px;color:#14503A;padding:5px 0}
.payout-row b{font-family:var(--mono);font-weight:700;white-space:nowrap}
.payout-row.big{border-top:1px solid rgba(20,80,58,.22);margin-top:4px;padding-top:9px;font-weight:600}
.payout-row.big b{font-size:15px}
@media(max-width:420px){
  .payout-row{flex-direction:column;gap:1px;padding:6px 0}
  .payout-row b{align-self:flex-start}
}


/* Collapsed from the first paint, not after app.js runs.
 *
 * The fold-into-menus happens in JavaScript, so until it ran the browser drew
 * the full 582px stack of filter options and then snapped it to 40px — the
 * listings jumped up six hundred pixels on every refresh. Hiding the options
 * in CSS means the collapsed bar is what gets painted first, and app.js only
 * adds the opening and closing.
 *
 * Keyed on .js so a browser without JavaScript still shows every filter, which
 * is the only usable state there. */
@media(min-width:940px){
  .js .mkt-flat .fgroup[data-menu] > *:not(h3){display:none}
  .js .mkt-flat .fgroup[data-menu] > .menu-wrap{display:none}
  .js .mkt-flat .fgroup[data-menu].open > .menu-wrap{display:flex}
  /* The heading looks like a button before the script touches it. */
  .js .mkt-flat .fgroup[data-menu] > h3{cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;
    background:var(--card);border:1.5px solid var(--line);border-radius:999px;
    font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:0;
    text-transform:none;color:var(--ink);white-space:nowrap;margin:0}
}

/* ---- reviewing listings on a phone ----
 *
 * The review card is dense by design: platform, price, note, description,
 * screenshots, seller record and two decisions, all in one place so a reviewer
 * never has to go and look something up. On a phone that density turned into
 * seventy tap targets under forty pixels and text at eleven, on the one page
 * where pressing the wrong button rejects somebody's listing.
 *
 * So this does not shrink things to fit. It gives the two decisions room,
 * raises the text to a readable size, and folds the description away behind a
 * tap — a reviewer who wants to read it opens it, and one who is clearing a
 * queue of approvals is not scrolling past it forty times.
 */
@media (max-width: 560px) {
  .row-card { gap: 14px; padding: 16px 14px; }

  .rc-title { font-size: 17px; }

  /* Nothing on this card goes below 13px. The old floor was 11. */
  .row-card .small,
  .rc-seller,
  .rc-shots figcaption { font-size: 13px; }
  .rc-size { font-size: 11.5px; }

  /* The description is the longest thing here and the least often needed at a
     glance, so it collapses. Tapping the summary opens it. */
  .rc-desc {
    max-height: 4.6em;
    overflow: hidden;
    position: relative;
    font-size: 13.5px;
  }
  .rc-desc::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 2em;
    background: linear-gradient(transparent, var(--paper));
  }
  .rc-desc.open { max-height: none; }
  .rc-desc.open::after { display: none; }
  .rc-more {
    display: block; width: 100%; min-height: 44px;
    margin-top: 6px; padding: 0 12px;
    background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--jade); text-align: left;
  }

  /* The decisions. Full width, full height, and separated — Approve and Reject
     sitting flush against each other at 32px tall is how a queue gets a wrong
     answer at the end of a long session. */
  .rc-side { margin-top: 4px; }
  .rc-side .btn,
  .rc-side .rej > summary {
    min-height: 48px;
    font-size: 15px;
    width: 100%;
  }
  /* Fourteen pixels between Approve and Reject. They are the same size and
     the same shape, so the space between them is the only thing stopping a
     thumb landing on the wrong one at the end of a long queue. */
  .rc-side form.stack { gap: 14px !important; }

  /* Screenshots two across rather than four, so a caption is readable and a
     thumbnail is big enough to judge. */
  .rc-shots { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Every option in the reject picker is a target that must not be missed. */
  .rej-opt { min-height: 52px; padding: 11px; }
  .rej-opt b { font-size: 14px; }
  .rej-opt .muted { font-size: 12.5px; }
}

@media(min-width:561px){.rc-more{display:none}}

/* ---- freezing a deal ---- */
.freeze-box{border-color:#F0C9D6}
.freeze-box textarea{width:100%;font:inherit;font-size:15px;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:11px;background:var(--paper);resize:vertical}
.freeze-box .counter{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;margin:6px 0 10px}
.freeze-box .counter.ok{color:var(--jade)}
.freeze-box .btn[disabled]{opacity:.45;cursor:not-allowed}


/* ---- the marketplace on a phone ----
 *
 * The heading and its blurb ran to 209 pixels, which pushed the first account
 * most of a screen down. Somebody who opened a marketplace wants to see what is
 * in it; the sales copy can be smaller than the goods.
 */
@media (max-width: 620px) {
  /* Marked important because the heading carries an inline margin and the h1
     size comes from a clamp() with higher specificity. Losing that fight costs
     nearly two hundred pixels before a visitor sees a single account. */
  .head{margin-bottom:14px !important}
  .head h1{font-size:26px !important;line-height:1.15}
  .head p,.head .lede{font-size:14.5px !important}
  .head .eyebrow{margin-bottom:6px}

  /* Filter options are tapped one after another, so 38px is where a thumb
     starts catching the wrong one. */
  .mkt-filters .opt,
  .mkt-filters .speedopt,
  .mkt-filters .band{min-height:44px}

  /* Nothing on a listing card below 12.5px. Follower counts and prices are the
     reason the page exists. */
  .lst .meta,.lst .price small,.lst .ver,.lst .mine-tag{font-size:12.5px}
}


/* The reject picker on a phone. 9.5px on a label that tells a reviewer whether
   a rejection can be undone is too small to read at arm's length. */
@media (max-width: 560px) {
  .rej-tag{font-size:11px;padding:4px 8px}
  .rc-title{font-size:17px}
  .plat.pill,.pill{font-size:12.5px}
}


/* Anything marked hidden stays hidden.
 *
 * The attribute is implemented as `display:none` at the lowest priority, so a
 * single `display:` in a component rule silently defeats it. That is how the
 * blog editor's image picker came to be open on page load. This is one line
 * against a whole class of that mistake. */
[hidden]{display:none !important}


/* ---- a decided listing folds ----
 *
 * Live, sold and rejected listings carry the same review payload as a pending
 * one: description, screenshots, seller record. That is right for something
 * waiting on a decision and wasteful for something already decided, because
 * the pending listing that needs a person ends up buried under fifty finished
 * ones. Nothing is removed here, only folded. */
.rc-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rc-line-t{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.02em}
.rc-line .rc-when{margin-left:auto;font-family:var(--mono);font-size:11.5px}
/* The card is a two column grid, so the fold and the buttons landed side by
   side with the detail squeezed into a narrow right hand column. A decided
   card is a single column: head, actions, then the fold underneath. */
.rc-done{display:block}
.rc-done .rc-side{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.rc-done .rc-side form{display:contents}
.rc-done .rc-side .btn,.rc-done .rc-side .rej{flex:0 1 auto;width:auto}
/* An open reject picker is a form, not a button. Left as a flex item beside the
   other buttons it took a narrow column and stretched to the height of the
   whole picker, leaving "Feature on homepage" floating in a tall empty box
   next to it. Open, it takes the row to itself. */
.rc-done .rc-side .rej[open]{flex:1 1 100%;width:100%}
.rc-done .rc-side .rej[open] > *{width:100%}
.rc-done .rc-side .btn-wide{width:auto}
.rc-fold{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.rc-fold summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:var(--jade);
  min-height:40px;display:flex;align-items:center;gap:8px}
.rc-fold summary::-webkit-details-marker{display:none}
.rc-fold summary::before{content:"+";font-family:var(--mono);font-size:17px}
.rc-fold[open] summary::before{content:"–"}
/* The head already names the platform, price, seller and age, so the folded
   copy of all that would just be said twice. */
.rc-done .rc-fold .rc-title,.rc-done .rc-fold .between{display:none}
@media(max-width:620px){
  .rc-line .rc-when{margin-left:0;width:100%}
}


/* ---- ruling a dispute from a wallet ---- */
.rule-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px;
  padding:12px 14px;background:var(--paper);border-radius:11px}
.rule-msg{margin-top:7px;font-family:var(--mono);font-size:11.5px}
.rule .btn[disabled]{opacity:.5;cursor:not-allowed}


/* ---- which emails go out ---- */
.mailgrp{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);padding:14px 0 8px;border-bottom:1px solid var(--line);margin-bottom:2px}
.mailrow{display:flex;gap:13px;align-items:flex-start;padding:13px 2px;
  border-bottom:1px solid var(--line);min-height:56px;cursor:pointer}
.mailrow:last-of-type{border-bottom:0}
.mailrow .t{flex:1;min-width:0}
.mailrow .t b{display:block;font-size:15px;margin-bottom:2px}
.mailrow .t span{color:var(--muted);font-size:13.5px;display:block;line-height:1.5}
.mailrow .who{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap;padding-top:3px}
.mailrow input[type=checkbox]{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--jade)}
/* A locked switch looks like a switch that is on and cannot be moved, rather
   than an empty space where a control should be. */
.mailsw.locked{width:20px;height:20px;margin-top:2px;flex:none;border-radius:6px;
  background:var(--jade);opacity:.4;position:relative}
.mailsw.locked::after{content:"";position:absolute;left:6px;top:3px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
@media(max-width:620px){
  .mailrow{flex-wrap:wrap}
  .mailrow .who{width:100%;padding-top:0;padding-left:33px}
}


/* ---- finding a deal by its id ---- */
.findbar{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;padding:16px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:18px}
.findbar .f{flex:1 1 240px;min-width:0}
.findbar label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.findbar input{width:100%;font-family:var(--mono);font-size:15px;padding:12px 14px;min-height:48px;
  border:1.5px solid var(--line);border-radius:11px;background:var(--paper)}
.findmiss{border-color:#F0DCBB;background:#FDF3E4;color:#6B4A12;font-size:14.5px;margin-bottom:18px}
.findmiss b{display:block;margin-bottom:4px}
.deal-id{font-size:11px;color:var(--muted);margin-top:9px;padding-top:8px;
  border-top:1px dashed var(--line);word-break:break-all}
.deal-ref{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.deal-ref .mono{text-transform:none;letter-spacing:0}
.copy-id{background:none;border:0;cursor:pointer;font:inherit;font-size:10.5px;
  color:var(--jade);text-decoration:underline;padding:4px;min-height:32px}

/* The seller avatar on a listing card. Small enough not to compete with the
   follower count, which is what people are actually scanning for. */
.av-card{width:26px;height:26px;border-radius:8px;overflow:hidden;flex:none;display:block}
.av-card svg,.av-card img{display:block;width:100%;height:100%;object-fit:cover}

/* The seller, in two fixed rows. Neither wraps: the first truncates a long
   name, the second is short enough never to need to. */
.seller-who{flex-wrap:nowrap;min-width:0}
.seller-record{border-top:0;padding-top:4px;margin-top:2px;flex-wrap:nowrap}
.snm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* A field the seller left empty. Dimmed rather than hidden: a blank line reads
   as something that failed to load, while a stated gap reads as a seller who
   did not fill it in, which is the truth and mildly useful. Lighter than the
   real value, so a complete card still looks better than an incomplete one. */
.unset{opacity:.55;font-style:normal}
/* Age holds its own line. Mono, because it is a fact rather than a phrase, and
   min-height so a card without one is exactly as tall as a card with one. */
.agerow{font-family:var(--mono);font-size:10.5px;color:var(--muted);
  margin-top:6px;min-height:17px;letter-spacing:.02em}
.meta{min-height:19px}


/* ---- the listing card, in three bands ----
 *
 * What the account is, what it costs, who is selling it. Seven rows of similar
 * weight meant a buyer read every line; this lets the eye land on the size and
 * the price, which are the two things that decide anything.
 */
.lst{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0;
  overflow:hidden;display:block;text-decoration:none;color:inherit;
  transition:border-color .15s}
/* Border only. Twenty cards that lift on hover is a grid that feels nervous. */
/* The original: a small lift and the jade line. The ink version came in with
   the three band card rebuild and was never what this site did. */
a.card.lst:hover{transform:translateY(-2px);border-color:var(--jade)}

.lst .n-head{padding:13px 15px 0;display:flex;justify-content:space-between;
  align-items:flex-start;gap:9px}
.lst .n-plat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.lst .n-dot{width:7px;height:7px;border-radius:2px;flex:none}
.lst .n-speed{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;padding-top:3px;text-align:right}

.lst .n-body{padding:9px 15px 13px}
.lst .n-num{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.lst .n-num b{font-family:var(--display);font-size:27px;font-weight:800;letter-spacing:-.04em;line-height:1}
.lst .n-num span{font-size:12.5px;color:var(--muted);font-weight:600}
/* Two fixed rows: category and city on the first, age on the second. Left to
   wrap freely the chips took two rows or three depending on how long the words
   were, so a grid of cards came out at different heights. */
/* Equal columns, so the second chip starts at the same point on every card.
   With `1fr auto` the city chip landed wherever the category happened to end,
   which was a different place on each card: scanning a row of them, nothing
   lined up. A long category now truncates instead of pushing its neighbour. */
.lst .n-facts{display:grid;grid-template-columns:1fr 1fr;gap:5px 6px;margin-top:9px;
  align-items:start}
/* Jade on pale jade, the pairing the platform chip wore before the brand
   colours took that over, and the same pair the Verified badge uses.
   Grey text on the page's own background made these read as disabled controls
   rather than as facts. Semibold is enough weight to say "this is content"
   without competing with the follower count above. */
.lst .fchip{font-family:var(--body);font-size:11.5px;font-weight:600;
  color:var(--jade);background:var(--jade-soft);border-radius:7px;
  padding:4px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  /* Fills its column rather than hugging its text, so the chips form two even
     shapes on every card instead of a ragged set of different widths. */
  justify-self:stretch;text-align:center}
/* Both chips share one row now, so the last one no longer spans. The rule
   stayed behind when the city chip came off and would have stretched the age
   chip across the full width on its own line. */
/* A field the seller left empty. Dimmed rather than absent: a gap reads as
   something that failed to load, a stated one reads as a seller who did not
   fill it in. */
/* A missing field keeps the old grey. In jade it would dress an absence up as
   a fact, and the colour is now what separates something the seller told you
   from something they did not. */
.lst .fchip.un{background:var(--paper);color:var(--muted);font-weight:400;opacity:.65}

/* White, with a rule above it. The edge does the separating rather than a
   tint, so the card stays one flat surface. */
.lst .n-price{padding:12px 15px;background:var(--card);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lst .n-price .u{font-family:var(--mono);font-weight:700;font-size:16.5px;white-space:nowrap}
.lst .n-price .r{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}

.lst .n-seller{padding:10px 15px;display:flex;gap:8px;align-items:center;
  border-top:1px solid var(--line);min-width:0}
.lst .n-who{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.lst .n-nm{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lst .n-rec{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.lst .n-rec .stars{display:inline-flex;gap:1px;flex:none}
.lst .n-rec .stars svg{width:9px;height:9px}
.lst .mine-tag{white-space:nowrap}


/* ---- related listings ----
 * The same three bands as a marketplace card, so one account does not look
 * like two different things depending on which page it appears on. */
.rail-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  text-decoration:none;color:inherit;display:block;padding:0;transition:border-color .15s}
.rail-card:hover{border-color:var(--ink)}
.rail-card .rc-h{padding:11px 13px 0;display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.rail-card .rc-p{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.rail-card .n-dot{width:7px;height:7px;border-radius:2px;flex:none}
.rail-card .n-speed{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;padding-top:3px;text-align:right}
.rail-card .rc-b{padding:7px 13px 11px;display:flex;align-items:baseline;gap:6px}
.rail-card .rc-b b{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.03em}
.rail-card .rc-b span{font-size:11.5px;color:var(--muted);font-weight:600}
.rail-card .rc-pr{padding:10px 13px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:baseline;gap:9px}
.rail-card .rc-pr .u{font-family:var(--mono);font-weight:700;font-size:14px;white-space:nowrap}
.rail-card .rc-pr .r{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap}


/* ---- listing page ---- */
/* Full bleed, but only rounded at the bottom when it is actually last. The
   handle band follows it on a listing with a handle, and two elements both
   claiming the card's bottom corner is how the slab appeared. */
.lp-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);
  margin:16px -20px 0;overflow:hidden}
.lp-facts:last-child{margin-bottom:-20px;border-radius:0 0 15px 15px}
.lp-fact{padding:13px 16px;border-right:1px solid var(--line)}
.lp-fact:last-child{border-right:0}
.lp-fact .k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:3px}
.lp-fact .v{font-size:14px;font-weight:600}
.lp-fact .v.un{opacity:.5;font-weight:400}
@media(max-width:620px){
  /* Three columns at 390px would be three cramped cells, so they stack and
     each keeps its label. */
  .lp-facts{grid-template-columns:1fr}
  .lp-fact{border-right:0;border-bottom:1px solid var(--line)}
  .lp-fact:last-child{border-bottom:0}
}
/* The buy panel follows the reader. The page runs past 1900px and the button
   used to be reachable only at the top, so somebody convinced by the handover
   steps had to scroll back up to act on it. */
@media(min-width:900px){
  .split > .stack:last-child{position:sticky;top:16px}
}

.buy-rows{border-top:1px solid var(--line);margin:16px -20px -20px;padding:12px 20px 14px}
.brow{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0}
.brow span:first-child{color:var(--muted)}
.brow span:last-child{font-family:var(--mono);font-weight:600;white-space:nowrap}


/* ---- listing page hero ---- */
/* Padded normally. The bands inside pull themselves out to the card edges with
   negative margins, so zeroing the padding here left them a margin with
   nothing to cancel and they overshot the card. */
.lp-hero{overflow:hidden}
.lp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.lp-plat{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.lp-plat .n-dot{width:8px;height:8px;border-radius:2px;flex:none}
.lp-speed{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;padding-top:4px;text-align:right}
/* The headline of the page. It was 30px and sharing weight with the pill. */
.lp-h1{font-family:var(--display);font-size:clamp(34px,5vw,46px);font-weight:800;
  letter-spacing:-.045em;line-height:1;margin:0}
.lp-h1 span{font-size:.33em;font-weight:600;color:var(--muted);letter-spacing:-.01em;margin-left:8px}
.lp-listed{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:9px}


/* ---- a deal in the list ---- */
.dealcard{display:block;text-decoration:none;color:inherit;padding:16px;
  border-radius:15px;transition:border-color .15s}
.dealcard:hover{border-color:var(--ink)}
.dealcard .between{margin-bottom:9px;gap:10px}
.dealcard .price{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);
  font-family:var(--mono);font-weight:700;font-size:16px}
.dealcard .deal-id{font-family:var(--mono);font-size:11px;color:var(--muted);
  margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);word-break:break-all}


/* On a phone the columns stack, and moving the handover cards into the left
   column pushed the price and the buy button below them. Somebody on a small
   screen should reach the price immediately, so the buy column comes second
   there and the rest of the detail follows it. */
@media (max-width: 899px) {
  /* Natural order: the account, then what the seller says, then the price and
     the seller. I had the buy column jump to the top on the reasoning that a
     phone user wants the price immediately, but they arrived from a card that
     already showed it. What they came here for is the detail, and asking for
     money before showing it is the wrong way round. */
  .split{display:flex;flex-direction:column}
}

/* A second heading inside the description card needs air above it, or the two
   blocks of the seller's writing run together as one. */
/* Only divides when there is something above it: a listing with notes but no
   description shows one heading and needs no rule. */
.desc-card h3.desc-more:not(:first-child){margin-top:20px;padding-top:16px;
  border-top:1px dashed var(--line);margin-bottom:9px}


/* ---- the platform, in its own colour ----
 *
 * Two cues at two distances: a full-strength stripe you see scanning a grid,
 * and a pale chip you read when you stop. Pale rather than solid, because a
 * screen of eight saturated blocks would be louder than the follower counts,
 * which are the thing being compared. */
.pchip{display:inline-block;font-size:12.5px;font-weight:700;padding:5px 11px;
  border-radius:8px;white-space:nowrap;letter-spacing:-.005em;line-height:1.25}
.pchip-lg{font-size:14px;padding:6px 13px;border-radius:9px}

/* The stripe sits flush at the top, so the card clips it to its own corners. */
.lst{overflow:hidden}
.lst .n-head{padding-top:12px}
.rail-card{overflow:hidden}
.rail-card .rc-h{padding-top:11px}

/* The two actions on a live listing, side by side: the one that changes this
   listing on the left, the one that promotes it pushed to the right. */
.mylst-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:10px}


/* ---- the mobile buy bar ----
 *
 * Phones only. Desktop already keeps a sticky panel in the right column, and a
 * bottom bar on a wide screen is a phone pattern out of place. */

/* Legendary: deep navy and old gold.
   Pro is already the loudest thing on a card, so a brighter badge above it
   would make every Pro seller look diminished. Darker reads as older rather
   than shinier, which is what two hundred clean handovers actually are. */
.sb-leg{background:linear-gradient(135deg,#1B3B6F,#0C1E3D);color:#EAD9A8;
  box-shadow:0 0 0 1px rgba(234,217,168,.35) inset}

/* The Legendary progress bars, in the badge's own navy. */
.prog.leg i{background:linear-gradient(90deg,#1B3B6F,#2F5FA8)}


/* ---- a seller's own page ---- */
.sp{padding-top:26px;padding-bottom:40px}
.sp-head{padding:0;overflow:hidden}
.sp-top{padding:20px;display:flex;gap:15px;align-items:flex-start;flex-wrap:wrap}
.sp-av{width:62px;height:62px;border-radius:16px;flex:none;overflow:hidden;display:block}
.sp-av svg,.sp-av img{display:block;width:100%;height:100%;object-fit:cover}
.sp-who{flex:1;min-width:0}
.sp-who h1{font-family:var(--display);font-size:clamp(21px,3vw,25px);font-weight:800;
  letter-spacing:-.03em;margin:0 0 3px}
.sp-since{font-size:13px;color:var(--muted)}
.sp-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.sp-stat{padding:14px 18px;border-right:1px solid var(--line)}
.sp-stat:last-child{border-right:0}
.sp-stat .v{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.03em;display:block}
.sp-stat .k{font-size:11.5px;color:var(--muted)}
.sp-measured{margin:0;padding:14px 18px;background:var(--jade-soft);font-size:13.5px;
  color:var(--jade);border-top:1px solid var(--line);line-height:1.55}
.sp-h2{font-family:var(--display);font-size:19px;font-weight:800;margin:24px 0 13px}
@media(max-width:620px){
  .sp-stats{grid-template-columns:1fr}
  .sp-stat{border-right:0;border-bottom:1px solid var(--line)}
  .sp-stat:last-child{border-bottom:0}
}
/* the address field on the profile */
.linkrow{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:11px;overflow:hidden}
.linkrow .pre{background:var(--paper);padding:11px 12px;font-family:var(--mono);font-size:13px;
  color:var(--muted);display:flex;align-items:center;white-space:nowrap}
.linkrow input{flex:1;border:0;padding:11px 12px;font-family:var(--mono);font-size:14px;min-width:0}
.linkrow input:focus{outline:2px solid var(--jade);outline-offset:-2px}
@media(max-width:480px){
  .linkrow{flex-direction:column}
  .linkrow .pre{border-bottom:1px solid var(--line)}
}


/* ---- who can do what ---- */
.permcard{margin-bottom:13px}
.permwho{padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.permname{display:flex;align-items:center;gap:9px;font-size:15.5px}
.rolechip{font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;background:var(--ink);color:#fff}
.rolechip.is-super{background:linear-gradient(135deg,#1B3B6F,#0C1E3D);color:#EAD9A8}
.permsuper{margin-top:12px}
.permrow{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--line);cursor:pointer;min-height:52px}
.permrow:last-of-type{border-bottom:0}
.permrow input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--jade)}
.permrow .t{flex:1;min-width:0}
.permrow .t b{display:block;font-size:14.5px}
.permrow .t span{font-size:12.5px;color:var(--muted);display:block;line-height:1.5}
/* Shown rather than hidden: somebody looking for a power should find out it is
   Super only, not wonder whether it exists. */
.permrow.locked{opacity:.5;cursor:default}

/* Fast handover. A cool blue rather than another warm tone, because it sits
   next to a tier badge and should read as a different kind of fact rather than
   a lesser version of the same one. */
.sb-fast{background:#E4F3FB;color:#12607F}

/* The verified tick.
 *
 * Blue and scalloped, the shape people already read as verification. It
 * carries its own label rather than a title attribute, because a title shows
 * nothing on a touch screen and a symbol only the initiated understand is a
 * symbol doing half its job. */
.vt{position:relative;display:inline-block;width:16px;height:16px;vertical-align:-3px;
  margin-left:5px;border:0;padding:0;background:none;cursor:pointer;line-height:0}
.vt svg{width:100%;height:100%;display:block}
.vt.lg{width:22px;height:22px;margin-left:7px}
.vt:focus-visible{outline:2px solid #2BA1F2;outline-offset:3px;border-radius:50%}
/* The label escapes the card.
 *
 * position:absolute is contained by the nearest positioned ancestor, and a
 * card with overflow set clips it: on a seller page the label sat 39px above
 * the tick, which put it outside the card that owns it, and half of "Identity
 * verified" was cut off.
 *
 * position:fixed is measured against the viewport instead, so no ancestor can
 * clip it. The coordinates come from JS on hover, because fixed elements do
 * not follow their parent. */
.vt-lbl{position:fixed;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-family:var(--body);font-size:12px;font-weight:600;
  line-height:1.45;letter-spacing:0;text-transform:none;padding:7px 11px;border-radius:9px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s;z-index:600}
.vt-lbl::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink)}
.vt:hover .vt-lbl,.vt:focus-visible .vt-lbl,.vt.open .vt-lbl{opacity:1}

/* ---- sign in and security ---- */
.secrow{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.secrow:last-of-type{border-bottom:0}
.secico{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--jade-soft);color:var(--jade)}
.secico svg{width:17px;height:17px}
.sect{flex:1;min-width:0}
.sect b{display:block;font-size:14.5px}
.sect span{font-size:12.5px;color:var(--muted);display:block;line-height:1.5}
.secoff{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.secoff input{flex:1;min-width:150px}
.totp-steps{margin:0 0 16px;padding-left:20px;color:var(--muted);display:grid;gap:7px;font-size:14px}
.totp-key{background:var(--paper);border-radius:11px;padding:13px 15px;margin-bottom:14px}
.totp-key .k{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.totp-key code{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.06em;
  word-break:break-all}
.totp-qr{display:grid;place-items:center;min-height:190px;background:#fff;border-radius:12px;
  border:1px solid var(--line);padding:12px}
.totp-qr canvas,.totp-qr img{display:block;max-width:100%;height:auto}
/* Ten codes in two columns, monospace so a transcription error is visible. */
.rcodes{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;font-family:var(--mono);
  font-size:14px;letter-spacing:.02em}
@media(max-width:480px){.rcodes{grid-template-columns:1fr}}

/* passkeys on the profile and the login page */
.pklist{margin:10px 0 4px}
.pkrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px dashed var(--line);font-size:13.5px}
.pkrow:last-child{border-bottom:0}
.pkrow .muted{font-size:12px;margin-left:6px}
.pk-bad{color:var(--rose)}
.pk-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--muted);font-size:13px}
.pk-or::before,.pk-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* the remember box on the code screen */
.td-remember{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;font-size:13.5px;
  cursor:pointer;line-height:1.5}
.td-remember input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--jade)}
/* trusted devices on the profile */
.tdrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px dashed var(--line);font-size:13.5px}
.tdrow:last-child{border-bottom:0}
.tdrow .muted{font-size:12px;margin-left:6px}

/* profile tabs */
/* The tab strip scrolls sideways on a narrow phone, and has to say so.
   On an SE the last tab sits 12px past the edge with nothing to suggest more
   exists: somebody would conclude the site has four tabs, not five. The
   negative margins let it bleed to the screen edge, which is the cue itself,
   and the padding keeps the first and last tab off the glass. */
.ptabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:18px 0 4px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
@media (max-width: 620px) {
  /* Bleeding to the screen edge is what says "this scrolls", but the negative
     margins have to be contained or the strip itself widens the page and every
     element inside it reads as overflowing. The clip on the wrapper keeps the
     effect and the page its own width. */
  .ptabs{margin-left:-16px;margin-right:-16px;
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
    max-width:100vw}
  .shell-inner{overflow-x:clip}
}
.ptabs a{padding:10px 15px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap}
.ptabs a:hover{color:var(--ink)}
.ptabs a.on{color:var(--ink);border-bottom-color:var(--jade)}

/* the ledger and bought list */
.tx{display:flex;gap:11px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit}
.tx:last-of-type{border-bottom:0}
.dir{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-size:13px;font-weight:700}
.d-in{background:var(--jade-soft);color:var(--jade)}
.d-out{background:#FDF0F4;color:var(--rose)}
.d-wait{background:#FBF0DC;color:#8A5C05}
.txt{flex:1;min-width:0}
.txt b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txt span{font-size:11.5px;color:var(--muted)}
.amt{font-family:var(--mono);font-size:13.5px;font-weight:700;white-space:nowrap;text-align:right}
.amt small{display:block;font-size:10.5px;font-weight:400;color:var(--muted)}
.wal{background:var(--paper);border-radius:11px;padding:13px 15px;margin-bottom:12px}
.wal .k{font-size:11.5px;color:var(--muted);display:block;margin-bottom:4px}
.wal code{font-family:var(--mono);font-size:12.5px;word-break:break-all}

/* A deal that ended without a handover, and one nobody can move right now. */
.d-off{background:var(--paper);color:var(--muted)}
.d-cold{background:#EAF2F8;color:#2C5C86}

/* The role chip. Only ever rendered on somebody's own profile and on the
   permissions page, both of which need staff access to reach. */
h1 .rolechip{font-size:11px;vertical-align:7px;margin-left:10px}

/* The permission fold, matching the listings queue. */
.permnow{font-size:13.5px;color:var(--muted);padding:12px 0 2px;line-height:1.5}
.permfold{border-top:1px dashed var(--line);padding-top:10px;margin-top:8px}
.permfold summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;
  color:var(--jade);display:inline-flex;align-items:center;gap:6px}
.permfold summary::-webkit-details-marker{display:none}
.permfold summary::before{content:"+";font-family:var(--mono);font-weight:700}
.permfold[open] summary::before{content:"−"}
.permfold[open] summary{margin-bottom:6px}

/* Monetisation, stated as a claim rather than a verified fact. */
/* Aligned with everything else in the card.
 *
 * The card has 20px of padding and the fact strip above uses a negative margin
 * to span the full width, so this box sat 20px inside both of them and read as
 * a panel nested in something rather than a section of the card. Matching the
 * negative margin puts its edges where every other row's are. */
.monbox{border-top:1px solid #CFE6D8;border-bottom:1px solid #CFE6D8;background:#F2FAF5;
  padding:14px 20px;margin:0 -20px}
.mon{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:6px;
  background:#DCF0E4;color:#12603A;font-weight:700}
.mon::before{content:"\2713";font-size:11px}

/* The earning chip on a card. */
.mon-chip{color:#12603A;background:#DCF0E4;font-weight:600}

/* The monetisation question on the sell form.
 *
 * I referenced this class and never wrote it, so the checkbox stacked above
 * the text and the two sentences ran together as one line. It reads like the
 * other opt-in rows on the site now: box on the left, question in bold, the
 * explanation under it. */
.monrow{display:flex;gap:12px;align-items:flex-start;padding:14px;margin-bottom:15px;
  border:1.5px solid var(--line);border-radius:12px;cursor:pointer;background:var(--card)}
.monrow:hover{border-color:var(--jade)}
.monrow:has(input:checked){border-color:var(--jade);background:var(--jade-soft)}
.monrow input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--jade)}
.monrow .t{flex:1;min-width:0}
.monrow .t b{display:block;font-size:14.5px;margin-bottom:2px}
.monrow .t span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5}

/* The monetisation figures, inside the box rather than bleeding out of it.
 *
 * These reused .lp-facts, which carries margin:16px -20px 0 so it can span the
 * full width of the listing card. Nested inside a bordered box that negative
 * margin pulled it out through the sides: the green box overlapped the fact
 * strip above it and left a stray divider hanging. Same look, no bleed. */
.mon-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#CFE6D8;
  border:1px solid #CFE6D8;border-radius:9px;overflow:hidden;margin-top:11px}
.mon-fact{background:#F2FAF5;padding:10px 13px}
.mon-fact .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.mon-fact .v{font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-.02em}
@media(max-width:620px){.mon-facts{grid-template-columns:1fr}}

/* Earning, in the corner the handover speed used to hold. Same size and
   position so the card keeps its shape, jade so it reads as a fact about the
   account rather than a timing note. */
.lst .n-earning,.rail-card .n-earning{font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;color:#12603A;background:#DCF0E4;
  padding:3px 8px;border-radius:5px;margin-left:auto}

/* The people table mixes a person's name with their badges, so they need to
   sit on the baseline rather than stacking. */
.tbl-wrap .rolechip,.tbl-wrap .sbadge{margin-left:6px;vertical-align:2px}
.tbl-wrap .vt{vertical-align:-2px}

/* Update price, folded into the listing row. */
.pricefold{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.pricefold summary{cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--jade);
  display:inline-flex;align-items:center;gap:6px}
.pricefold summary::-webkit-details-marker{display:none}
.pricefold summary::before{content:"+";font-family:var(--mono);font-weight:700}
.pricefold[open] summary::before{content:"\2212"}
.pricerow{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.pricerow .pre{font-family:var(--mono);font-size:13px;color:var(--muted)}
.pricerow input{flex:1;min-width:110px;font-family:var(--mono)}

/* Update price, in the actions row. The summary is styled as a button so it
   reads as a third action rather than a link floating beside two buttons, and
   the form drops below the row on its own line: a price box squeezed between
   Take down and Feature has nowhere to put its explanation. */
/* Update price sits beside Take down, not on its own line.
 *
 * A details element is block level, so inside the flex row it still claimed a
 * full line of its own. Making it a flex item puts the summary button in line
 * with the others; when it opens, order:9 and a full-width basis drop the form
 * onto the row below, where a price box and its explanation have room. */
.mylst-acts .pricefold{border:0;padding:0;margin:0;flex:0 0 auto}
.mylst-acts .pricefold summary::before{content:""}
/* Opening it must not move the button.
 *
 * It used to become full width and reorder to the end, so clicking Update
 * price made the button jump below Take down and the seller lost the thing
 * they had just pressed. The summary now stays put and only the form grows
 * beneath it, inside the details box. */
/* The price form is a dialog too, sharing the removal dialog's chrome.
 * Inline it pushed the rest of the page down and sat half below the fold on a
 * phone; the button no longer needs to hold its position because the panel is
 * no longer part of the row. */
.mylst-acts .pricefold[open]{flex:0 0 auto}
.pricefold[open]::before{content:'';position:fixed;inset:0;background:rgba(19,36,29,.55);
  z-index:900;animation:rf-fade .12s ease-out}
.pricebox{position:fixed;z-index:901;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(440px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:22px;box-shadow:0 24px 60px rgba(19,36,29,.28);
  animation:rf-pop .14s ease-out}
.pricebox h4{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em;
  margin-bottom:8px}
.pricebox p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.pricebox .pricerow{margin:0}
.pricebox .hint{margin-top:9px;margin-bottom:0}
body:has(.pricefold[open]){overflow:hidden}
/* The two that change this listing stay together on the left; Feature keeps
   its own side. Grouping them means "space-between" separates the pair from
   Feature rather than separating them from each other. */
.mylst-acts .acts-left{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.mylst-acts .pricefold[open] summary{margin-bottom:9px}

/* Removing a listing: a second, deliberate click.
 *
 * The action is now permanent, so a browser confirm() is the wrong control:
 * everybody dismisses those without reading. Opening a small red panel in
 * place makes the warning part of the page. */
/* Removing a listing opens a proper dialog, not a panel in the row.
 *
 * Inline, the warning pushed everything below it down the page and read as one
 * more thing in a list rather than a decision to stop and make. A destructive
 * action should take over the screen until it is answered.
 *
 * Built on details/summary rather than <dialog> so it still works with no
 * JavaScript: the same element that expanded before now renders as a centred
 * overlay. Escape and the backdrop close it, both handled in app.js. */
.removefold{flex:0 0 auto}
.removefold summary{list-style:none;cursor:pointer}
.removefold summary::-webkit-details-marker{display:none}

/* The dim behind. A sibling of the panel so a click on it can close the
   dialog without swallowing clicks meant for the buttons. */
.removefold[open]::before{content:'';position:fixed;inset:0;background:rgba(19,36,29,.55);
  z-index:900;animation:rf-fade .12s ease-out}
.removebox{position:fixed;z-index:901;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(440px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:22px;box-shadow:0 24px 60px rgba(19,36,29,.28);
  animation:rf-pop .14s ease-out}
.removebox h4{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em;
  margin-bottom:8px}
.removebox p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px}
/* The button row in any dialog.
 *
 * This was scoped to .removebox, so the shared confirm partial and the price
 * dialog got no flex at all and their buttons stacked vertically: the form
 * wrapping the confirm button is block level, so without this it takes a full
 * line and pushes Cancel underneath.
 *
 * Unscoped, because the class means the same thing wherever it appears. Three
 * dialogs sharing a look should not need three copies of the rule that gives
 * it to them. */
.rf-acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
@keyframes rf-fade{from{opacity:0}to{opacity:1}}
@keyframes rf-pop{from{opacity:0;transform:translate(-50%,-46%)}
                  to{opacity:1;transform:translate(-50%,-50%)}}
/* The page must not scroll behind an open dialog. */
body:has(.removefold[open]){overflow:hidden}

/* The seller block on a review card: who they are, then what they have done. */
.rc-seller{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.rc-who{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:600;font-size:14.5px}
.rc-record{display:flex;gap:16px;flex-wrap:wrap;margin-top:5px;font-size:13px;color:var(--muted)}
.rc-record b{color:var(--ink);font-family:var(--mono)}
.rc-record .bad{color:var(--rose)}
.rc-record .bad b{color:var(--rose)}
.sb-bad{background:#FBE4EC;color:#8E1E44}

/* Your listings on a phone.
 *
 * Each figure is a nowrap unit, so a wrap falls between them and never inside
 * a number: the price used to break as "12.00 USDT Rs" / "3,360". */
.mylst-figures{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-top:4px}
.mylst-figures .fig{white-space:nowrap;font-size:13.5px;color:var(--muted)}
.mylst-figures .fig b{color:var(--ink);font-family:var(--mono)}

/* A handle can be a full URL, which on a phone took two lines and pushed the
   status pill sideways. One line, cut with an ellipsis; the whole row links to
   the listing if somebody needs to see it in full. */
/* A handle can be a full URL, which on a phone took two lines and pushed the
 * status pill sideways. One line, cut with an ellipsis.
 *
 * The mobile rule above sets inline-flex for a 40px tap target, and ellipsis
 * does not apply to a flex container: it truncated by overflowing instead of
 * showing the dots, so the text just ran off the edge. Block, with min-height
 * keeping the tap target. */
.mylst-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:100%;min-width:0}
@media(max-width:620px){
  .mylst-name{display:block;line-height:40px}
}

@media(max-width:620px){
  /* The status pill was wrapping to two lines and stealing width from the
     handle beside it. */
  .mylst .pill{white-space:nowrap;font-size:11px;padding:4px 9px}
  .mylst-figures{gap:3px 9px}
  .mylst-figures .fig{font-size:12.5px}
}

/* A setting that is configured once and then forgotten. Collapsed it states
   whether it is done; open it holds the one field. */
.setfold summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.setfold summary::-webkit-details-marker{display:none}
.setfold summary::after{content:"+";font-family:var(--mono);font-weight:700;color:var(--jade);
  margin-left:auto}
.setfold[open] summary::after{content:"\2212"}
.setfold-t{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em}
.setfold-body{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.setfold-body input{width:100%}

/* The arrow points down normally, up when the label had to sit below. */
.vt-lbl.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--ink)}

/* The shared confirmation dialog. Same chrome as the listing ones. */
.cfold{flex:0 0 auto;display:inline-block}
.cfold summary{list-style:none;cursor:pointer}
.cfold summary::-webkit-details-marker{display:none}
.cfold[open]::before{content:"";position:fixed;inset:0;background:rgba(19,36,29,.55);
  z-index:900;animation:rf-fade .12s ease-out}
.cbox{position:fixed;z-index:901;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(440px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:22px;box-shadow:0 24px 60px rgba(19,36,29,.28);
  animation:rf-pop .14s ease-out;text-align:left}
.cbox h4{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em;
  margin-bottom:8px}
.cbox p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px}
body:has(.cfold[open]){overflow:hidden}

/* Reviews and recent sales on a seller page. */
.sp-revs{padding:0}
.sp-rev{padding:15px 18px;border-top:1px solid var(--line)}
.sp-rev:first-child{border-top:0}
.sp-rev .stars{color:var(--marigold);font-size:12px;letter-spacing:1px}
.sp-rev .stars .off{color:var(--line)}
.sp-rev-t{font-size:14.5px;margin:5px 0 4px;line-height:1.55}
.sp-rev-w{font-size:12px;color:var(--muted)}
.sp-sold{padding:0}
.sp-sold-row{display:flex;align-items:center;gap:11px;padding:12px 18px;border-top:1px solid var(--line);
  flex-wrap:wrap}
.sp-sold-row:first-child{border-top:0}
.sp-sold-row b{font-family:var(--mono)}
.sp-sold-row .small{margin-left:auto}