/* styles.css
   Save to: C:\MarvelApps\usemart\web\styles.css
   UseMart look (redesign 2026-10-18): the approved homepage mockup's clean, visual-first layout, in the logo's
   light-ray colours (green -> teal -> cyan -> blue). Responsive: desktop / tablet / phone. */
:root {
  --green: #5cc98a; --teal: #2fb5a8; --cyan: #1fa9d1; --violet: #6f7ce8;
  --blue: #0e7c74;          /* BRAND TEAL (Scott 10/18 "our teal branding") - buttons, links, active states; white text passes contrast */
  --blue-dark: #0a5f59; --tint: #e3f4f1; --tint2: #f0faf8;
  --ink: #0f1b2d; --soft: #5b6b7c; --line: #e4ebf1; --bg: #f7fafc; --card: #fff;
  --rays: linear-gradient(115deg, var(--green), var(--teal) 32%, var(--cyan) 58%, #4a8fe0 82%, var(--violet));
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.06);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* "hidden" always wins over a display rule (partner-only controls stay hidden while OFF) */
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
.fine { color: var(--soft); font-size: 14px; margin: 4px 0; }
.status { color: var(--soft); min-height: 1.2em; margin: 6px 0 0; }
.status.err { color: #b42318; } .status.ok { color: #067647; }

/* ---------- header */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 10px 28px; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; }
.brand img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
/* SITE DOWN = RED LOGO (Scott 10/27): visitors can't get in (lock ON / server not answering) */
@keyframes sitedown { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,57,53,.95); filter: none; } 50% { box-shadow: 0 0 0 7px rgba(229,57,53,.35); filter: sepia(1) saturate(6) hue-rotate(-50deg); } }
body.sitedown .brand img { animation: sitedown 1s ease-in-out infinite; outline: 3px solid #e53935; outline-offset: 1px; }
.vtopm { display: block; margin-top: 2px; } /* members on the line below the eyeballs (Scott 10/27) */ 
.word { font-size: 28px; font-weight: 800; letter-spacing: -.8px; }
.word b { background: var(--rays); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { color: var(--soft); font-size: 13px; padding-left: 14px; border-left: 1px solid var(--line); white-space: nowrap; }
.topsearch { flex: 1; max-width: 440px; display: flex; align-items: center; gap: 8px; border: 1px solid #d5dde6; border-radius: 8px; padding: 0 12px; }
.topsearch input { flex: 1; border: 0; outline: 0; padding: 10px 0; background: transparent; }
.ic { color: var(--soft); font-size: 20px; }
.loc { display: flex; align-items: center; gap: 8px; border: 1px solid #d5dde6; border-radius: 8px; padding: 9px 12px; background: #fff; cursor: pointer; white-space: nowrap; }
.pin { color: var(--teal); } .chev { color: var(--soft); }
.links { display: flex; gap: 20px; margin-left: auto; }
.links a { font-weight: 500; position: relative; }
.links i { position: absolute; top: -8px; right: -14px; background: var(--blue); color: #fff; font: 700 11px/18px system-ui; min-width: 18px; padding: 0 5px; border-radius: 9px; text-align: center; font-style: normal; }
.signin { border: 1.5px solid var(--blue); color: var(--blue); background: #fff; border-radius: 6px; padding: 8px 20px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.post { background: var(--blue); color: #fff; border-radius: 6px; padding: 9px 22px; font-weight: 700; white-space: nowrap; }
.locpop { position: fixed; z-index: 30; top: 64px; right: 290px; background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 16px; width: 260px; }
.devbar { text-align: center; font-size: 13px; padding: 4px; background: #fff7d6; color: #6b5a00; }

/* ---------- hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding: 36px 64px 30px; overflow: hidden;
  background: linear-gradient(90deg, #f3f8fb 0%, rgba(243,248,251,.92) 42%, rgba(243,248,251,.25) 70%), var(--rays); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(from -20deg at 78% 115%, rgba(255,255,255,.18) 0 5deg, transparent 5deg 12deg); }
.heroText, .trust, .script { position: relative; z-index: 1; }
.hero h1 { margin: 0; font-size: clamp(34px, 5vw, 60px); line-height: 1.05; letter-spacing: -1.6px; font-weight: 900; }
.hero h1 span { color: var(--blue); }
.lead { margin: 10px 0 0; font-size: 22px; font-weight: 700; }
.sub { margin: 2px 0 18px; color: #3d4b5c; font-size: 18px; }
.bigsearch { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 10px 10px 10px 18px; box-shadow: var(--shadow); max-width: 880px; }
.bigsearch input { flex: 1; border: 0; outline: 0; font-size: 18px; padding: 8px 0; }
.spark { color: var(--blue); font-size: 22px; }
.mic { border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 46px; height: 46px; cursor: pointer; font-size: 18px; }
.mic.small { width: auto; height: auto; padding: 2px 10px; font-size: 13px; margin-left: 6px; }
.mic.on { background: #ffe9e9; border-color: #f5b5b5; }
.go { border: 0; background: var(--blue); color: #fff; width: 62px; height: 52px; border-radius: 10px; font-size: 26px; cursor: pointer; }
.try { margin-top: 14px; font-size: 13px; color: #3d4b5c; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.try button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.script { position: absolute; right: 400px; top: 34px; margin: 0; font: italic 28px/1.1 "Segoe Script", "Brush Script MT", cursive; color: #1d2b3a; transform: rotate(-8deg); }
.trust { align-self: start; background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow); }
.trust h3 { margin: 0 0 8px; font-size: 17px; display: flex; gap: 10px; }
.trust h3 span { background: var(--tint); border-radius: 10px; padding: 4px 8px; height: fit-content; }
.trust ul { list-style: none; padding: 0; margin: 0; }
.trust li { padding: 6px 0 6px 30px; position: relative; }
.trust li::before { content: "✓"; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: #1f9d55; color: #fff; font-size: 12px; text-align: center; line-height: 20px; }

/* ---------- home columns */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 20px; padding: 18px 40px 30px; background: var(--bg); }
/* slim tiles so featured items sit high on the page */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { position: relative; display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: center; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; transition: box-shadow .12s, transform .12s; }
.tile:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.tile .ti { grid-row: span 2; display: inline-flex; width: 42px; height: 42px; border-radius: 10px; align-items: center; justify-content: center; font-size: 21px; }
.tile b { display: block; font-size: 17px; }
.tile small { color: var(--soft); display: block; padding-right: 18px; }
.tile em { position: absolute; right: 14px; bottom: 18px; font-style: normal; color: var(--soft); font-size: 22px; }
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; }
.sechead h2, .sechead h3 { margin: 0; }
.sechead a { color: var(--blue); font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: box-shadow .12s, transform .12s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card .ph { position: relative; aspect-ratio: 4 / 3; background: #eef3f5 center / cover no-repeat; }
.card .tag { position: absolute; left: 8px; bottom: 8px; background: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.card .tx { padding: 10px 12px 12px; }
.card .ti { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .pr { color: #127a3d; font-weight: 800; font-size: 20px; margin: 2px 0; }
.card .mi { color: var(--soft); font-size: 13px; display: flex; justify-content: space-between; }
.empty { grid-column: 1 / -1; text-align: center; padding: 40px 10px; color: var(--soft); background: #fff; border-radius: 10px; border: 1px dashed var(--line); }
.planwrap { padding: 0 40px 30px; background: var(--bg); }
.plans { margin-top: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.plans h2 { margin: 0 0 10px; }
.planrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.plan { border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.plan.hi { border: 2px solid var(--blue); }
.plan .price { font-size: 30px; font-weight: 900; margin: 4px 0; } .plan .price span { font-size: 15px; color: var(--soft); font-weight: 600; }
.plan small { color: var(--soft); }

.side { display: flex; flex-direction: column; gap: 14px; }
.box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.box h3 { margin: 0; font-size: 18px; }
.box .sechead { margin-top: 0; }
.box.groups { padding: 12px 16px; }
.box.groups h3 { font-size: 16px; }
.gcards { display: flex; flex-direction: column; margin-top: 6px; }
.gcard { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; }
.gcard:hover { background: var(--tint2); }
.gcard .gp { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.gcard b { font-size: 14px; font-weight: 600; }
.gcard small { color: var(--soft); font-size: 12px; }
.want h3 .ring { color: var(--violet); }
.want input, .want select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 8px; background: #fff; }
.wrow { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.btn { margin-top: 10px; width: 100%; border: 0; border-radius: 8px; padding: 11px; background: var(--blue); color: #fff; font-weight: 700; cursor: pointer; }
.tools .trow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.tools .trow div { display: grid; grid-template-columns: 38px 1fr; column-gap: 8px; }
.tools .trow span { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); display: flex; align-items: center; justify-content: center; }
.tools b { font-size: 14px; } .tools small { color: var(--soft); font-size: 12px; }
.tools i { display: inline-block; font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 6px; background: #f1f3f5; color: var(--soft); }
.tools i.now { background: #e6f6ec; color: #067647; }

/* ---------- inner pages */
.wrap { max-width: 1180px; margin: 0 auto; padding: 4px 28px 50px; }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 14px; cursor: pointer; }
.chips button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.filters select { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: #fff; }
.panel { max-width: 640px; margin: 20px auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.panel h2 { margin: 0; }
label { display: block; margin: 12px 0 0; font-weight: 600; font-size: 14px; }
label input, label select, label textarea { display: block; width: 100%; margin-top: 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 400; background: #fff; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
fieldset { border: 1px solid var(--line); border-radius: 12px; margin: 14px 0 0; }
legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
.boxes label { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 6px 0; }
.boxes input { width: auto; margin: 0; }
.drop { display: block; border: 2px dashed #b7e3dc; border-radius: 14px; padding: 18px; text-align: center; cursor: pointer; background: var(--tint2); margin-top: 16px; }
.drop input { display: none; } .drop span { font-size: 17px; color: var(--blue); font-weight: 700; }
.thumbs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.primary { margin-top: 16px; width: 100%; border: 0; border-radius: 10px; padding: 13px; font-weight: 800; color: #fff; background: var(--blue); cursor: pointer; font-size: 17px; }
.ghost { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 12px 16px; cursor: pointer; }
.small-btn { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
.small-btn.blue { background: var(--blue); color: #fff; border-color: var(--blue); }

.item { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; margin-top: 14px; }
.gallery .big { border-radius: 14px; aspect-ratio: 1 / 1; background: #eef3f5 center / contain no-repeat; border: 1px solid var(--line); }
.gallery .row { display: flex; gap: 8px; margin-top: 8px; }
.gallery .row img { width: 70px; height: 70px; object-fit: cover; border-radius: 10px; cursor: pointer; }
.facts h1 { margin: 0 0 4px; font-size: 28px; }
.facts .pr { font-size: 30px; font-weight: 800; color: #127a3d; }
.facts .tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.facts .tags span { background: var(--tint); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.facts textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.back { display: inline-block; margin-top: 16px; color: var(--soft); }

.wantcard, .minecard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 12px; }
.wantcard header, .minecard { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.minecard img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.minecard .mt { flex: 1; min-width: 160px; }
.pill { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #eef1f4; }
.pill.active { background: #e6f6ec; color: #067647; } .pill.expired { background: #fff4e5; color: #9a5b00; } .pill.draft { background: #fdecec; color: #b42318; }

.inbox { display: grid; grid-template-columns: 320px 1fr; gap: 16px; margin-top: 20px; min-height: 60vh; }
.threads, .thread { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.threads a { display: block; padding: 10px 12px; border-radius: 10px; }
.threads a.on, .threads a:hover { background: var(--tint); }
.threads b { display: block; } .threads small { color: var(--soft); }
.threads .dot { float: right; background: var(--blue); color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 8px; }
.msgs { display: flex; flex-direction: column; gap: 6px; padding: 10px; max-height: 55vh; overflow: auto; }
.msg { max-width: 75%; padding: 9px 13px; border-radius: 16px; background: #eef3f5; align-self: flex-start; }
.msg.mine { align-self: flex-end; background: var(--blue); color: #fff; }
.msg small { display: block; font-size: 11px; opacity: .7; }
.msgwarn { align-self: flex-start; max-width: 85%; padding: 8px 12px; border-radius: 10px; background: #fff4d6; border: 1px solid #e8b931; color: #4a3600; font-size: 13px; }
.msgwarn a { color: #4a3600; font-weight: 600; }
.reply { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.reply input { flex: 1; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; }
.reply button { border: 0; border-radius: 10px; padding: 0 18px; background: var(--ink); color: #fff; font-weight: 700; cursor: pointer; }

.foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 18px 40px; border-top: 1px solid var(--line); }
.foot .word { font-size: 22px; } .foot .brand img { width: 48px; height: 48px; }
.foot nav { display: flex; gap: 22px; margin: 0 auto; font-size: 14px; }
dialog { border: 0; border-radius: 18px; padding: 24px; width: min(420px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(10,20,30,.45); }
.dlogo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto 6px; }
dialog h2 { text-align: center; margin: 4px 0; } dialog .row { display: flex; gap: 8px; } dialog .row .primary { margin-top: 0; }

/* ---------- laptop: keep the header on one line, nothing overlaps */
@media (max-width: 1500px) {
  .top { gap: 12px; padding: 10px 18px; }
  .tagline, .script { display: none; }
  .topsearch { min-width: 0; }
  .links { gap: 14px; }
  .loc #locLabel { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
}
/* ---------- narrow laptop / tablet: search drops to its own row so the header never overflows */
@media (max-width: 1020px) {
  .top { flex-wrap: wrap; }
  .topsearch { order: 5; flex-basis: 100%; max-width: none; }
}
/* ---------- tablet */
@media (max-width: 1180px) {
  .planwrap { padding: 0 24px 24px; }
  .cols { grid-template-columns: 1fr; padding: 16px 24px; }
  .side { display: grid; grid-template-columns: 1fr 1fr; }
  .side .tools { grid-column: 1 / -1; }
  .hero { padding: 30px 28px; }
  .locpop { right: 20px; }
}
/* ---------- phone */
@media (max-width: 760px) {
  /* phone header: not sticky (it would cover the page), two short rows */
  .top { position: static; flex-wrap: wrap; gap: 8px 10px; padding: 8px 16px; }
  .word { font-size: 24px; } .brand img { width: 48px; height: 48px; }
  .loc { margin-left: auto; padding: 6px 10px; font-size: 14px; }
  .links { order: 6; flex: 1; justify-content: flex-start; gap: 14px; margin: 0; font-size: 15px; }
  .signin { order: 7; padding: 5px 10px; font-size: 14px; } .post { order: 8; padding: 6px 10px; font-size: 14px; }
  .topsearch { order: 9; }
  body[data-view="home"] .topsearch { display: none; }         /* the hero has the big search */
  .tile { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; padding: 10px 12px; }
  .tile .ti { grid-row: span 2; width: 44px; height: 44px; margin: 0; font-size: 22px; }
  .tile b { font-size: 17px; }
  .planwrap { padding: 0 16px 20px; }
  .hero { grid-template-columns: 1fr; padding: 22px 16px; }
  .lead { font-size: 18px; } .sub { font-size: 15px; }
  .bigsearch input { font-size: 16px; } .go { width: 50px; height: 46px; }
  .trust { display: none; }
  .cols { padding: 12px 16px; }
  .tiles { grid-template-columns: 1fr; }
  .side { display: flex; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .planrow, .tools .trow, .two { grid-template-columns: 1fr; }
  .wrap { padding: 4px 16px 40px; }
  .item, .inbox { grid-template-columns: 1fr; }
  .foot { padding: 16px; } .foot nav { margin: 0; }
  .locpop { top: 110px; right: 16px; }
}

/* ---------- DealKeeper part 2: stages, offers, pickup, handshake */
.deal { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 6px 0 8px; background: var(--tint2); }
.stages { display: flex; gap: 4px; margin-bottom: 8px; }
.stages span { flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 5px 4px; border-radius: 999px; background: #eef1f4; color: var(--soft); }
.stages span.done { background: #dff3e7; color: #067647; }
.stages span.now { background: var(--blue); color: #fff; }
.offerin { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.mini { display: flex; gap: 6px; margin: 6px 0; }
.mini input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
.mini2 { margin-top: 6px; } .mini2 summary { cursor: pointer; color: var(--blue); font-size: 14px; }
.mini2 form { display: grid; gap: 6px; margin-top: 6px; }
.mini2 input, .mini2 select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pickup { background: #fff; border: 1px solid #b7e3dc; border-radius: 10px; padding: 10px; margin: 6px 0; }
.code { margin-top: 8px; } .code span { display: inline-block; margin-left: 8px; font: 800 26px/1 ui-monospace, Consolas, monospace; letter-spacing: 6px; color: var(--blue); }
.code small { display: block; color: var(--soft); font-size: 12px; margin-top: 4px; }
.row2 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.small-btn.warn { border-color: #f3b4b4; color: #b42318; }
.okline { color: #067647; font-weight: 600; margin: 4px 0; }
.waiting { display: inline-block; margin: 2px 0; font-size: 12px; font-weight: 600; color: #9a5b00; background: #fff4e5; border-radius: 6px; padding: 1px 6px; }
.waiting.blue { color: var(--blue-dark); background: var(--tint); } .waiting.green { color: #067647; background: #e6f6ec; }

/* ---------- second menu row (Items for Sale mockup 2026-10-18) */
.links .ico { display: flex; flex-direction: column; align-items: center; font-size: 13px; line-height: 1.1; }
.links .ico span { font-size: 20px; }
.menu { display: flex; align-items: center; gap: 6px; padding: 8px 28px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 65px; z-index: 19; }
.menu a { padding: 8px 16px; border-radius: 8px; font-weight: 500; white-space: nowrap; }
.menu a.on { background: var(--tint); color: var(--blue); }
.menu .post { margin-left: auto; padding: 9px 20px; }

/* ---------- Items for Sale */
.banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 28px 0; padding: 26px 36px; border-radius: 14px;
  background: linear-gradient(90deg, #f3f8fb 0%, rgba(243,248,251,.9) 45%, rgba(243,248,251,.2) 80%), var(--rays); }
.banner h1 { margin: 0; font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -1px; }
.banner p { margin: 4px 0 0; color: #3d4b5c; font-size: 17px; }
.areacard { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.92); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow); max-width: 300px; }
.areacard .pinbig { color: var(--teal); font-size: 26px; line-height: 1; }
.areacard small { display: block; color: var(--soft); margin: 4px 0 2px; } .areacard a { color: var(--blue); text-decoration: underline; font-size: 14px; }
.browse { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; padding: 18px 28px 40px; }
.fside { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; align-self: start; position: sticky; top: 130px; max-height: calc(100vh - 140px); overflow: auto; }
.fside h3 { margin: 14px 0 6px; font-size: 16px; } .fside h3:first-child { margin-top: 0; }
.catlist { display: flex; flex-direction: column; }
.catlist button { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.catlist button span { width: 20px; text-align: center; }
.catlist button:hover { background: var(--tint2); } .catlist button.on { background: var(--tint); color: var(--blue); font-weight: 600; }
.price2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.price2 input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.conds label { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 5px 0; font-size: 14px; }
.conds input { width: auto; margin: 0; }
details.more { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
details.more summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.more select { width: 100%; margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ghost.wide { width: 100%; margin-top: 14px; padding: 8px; }
.bbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bbar b { font-size: 18px; }
.bctl { display: flex; gap: 10px; align-items: center; }
.sortl { margin: 0; font-weight: 400; display: flex; align-items: center; gap: 6px; color: var(--soft); }
.sortl select { width: auto; margin: 0; padding: 8px 10px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 8px 14px; cursor: pointer; }
.seg button.on { background: var(--blue); color: #fff; }
.browse .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid.list { grid-template-columns: 1fr !important; }
.grid.list .card { display: grid; grid-template-columns: 180px 1fr; }
.grid.list .card .ph { aspect-ratio: auto; min-height: 130px; }
.heart { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92);
  font-size: 18px; line-height: 34px; cursor: pointer; color: #344054; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.heart.on { color: #e11d48; }
.heart.big { position: static; flex: none; width: 42px; height: 42px; font-size: 22px; line-height: 42px; border: 1px solid var(--line); box-shadow: none; }
.moreRow { text-align: center; margin-top: 18px; }
.loadmore { border: 0; background: var(--tint); color: var(--ink); border-radius: 999px; padding: 12px 70px; font-weight: 600; cursor: pointer; }

/* ---------- item page */
.titlerow { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.gallery .big { position: relative; }
.gallery .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-size: 24px; cursor: pointer; box-shadow: var(--shadow); }
.gallery .prev { left: 10px; } .gallery .next { right: 10px; }
.gallery .count { position: absolute; bottom: 10px; right: 10px; background: rgba(15,27,45,.7); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.gallery .row img.on { outline: 3px solid var(--blue); }
.contact { font-size: 18px; padding: 15px; }
.pg { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 14px 0; background: #fbfcfd; }
.pg.ok { border-color: #b7e4c7; background: #f2fbf5; }
.pg small { display: block; color: var(--soft); font-size: 13px; margin-top: 4px; }
.seller { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.seller .av { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--rays); color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.seller small { display: block; margin-top: 4px; }
.facts h3 { margin: 18px 0 4px; }

@media (max-width: 1180px) { .menu { top: 112px; } .fside { top: 180px; } }
@media (max-width: 1020px) { .menu { position: static; } .fside { position: static; max-height: none; } }
@media (max-width: 760px) {
  .menu { overflow-x: auto; padding: 6px 12px; gap: 2px; }
  .menu a { padding: 6px 10px; font-size: 14px; } .menu .post { margin-left: 6px; }
  .links .ico { flex-direction: row; gap: 4px; font-size: 14px; } .links .ico span { font-size: 16px; }
  .banner { margin: 10px 16px 0; padding: 18px; flex-direction: column; align-items: flex-start; }
  .areacard { max-width: none; width: 100%; }
  .browse { grid-template-columns: 1fr; padding: 12px 16px 30px; }
  .catlist { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .catlist button { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; }
  .browse .grid { grid-template-columns: repeat(2, 1fr); }
  .grid.list .card { grid-template-columns: 110px 1fr; }
  .loadmore { padding: 12px 30px; }
}
@media (max-width: 1020px) { .menu { gap: 2px; padding: 6px 16px; overflow-x: auto; } .menu a { padding: 7px 10px; } }

/* ---------- sponsored (affiliate) strip + Marvel Corp admin */
.sponsored { margin-top: 22px; border-top: 1px dashed var(--line); padding-top: 12px; }
.sponhead { font-size: 12px; color: var(--soft); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.sponrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.spon { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fffdf5; }
.spon img, .spon .noimg { width: 100%; height: 90px; object-fit: contain; display: flex; align-items: center; justify-content: center; font-size: 30px; background: #fff; border-radius: 6px; }
.spon b { display: block; font-size: 14px; margin-top: 6px; } .spon small { color: var(--soft); font-size: 12px; }
.admgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0; }
#admin .box { margin-top: 12px; }
.admrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }
.admrow select { margin-left: auto; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.admrow button { margin-left: auto; }
.admform { display: grid; gap: 6px; margin-top: 10px; }
.admform.wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.admform input, .admform select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
@media (max-width: 760px) { .admgrid { grid-template-columns: 1fr; } }

/* ---------- SmartFill + Everyday Deals (partner products: always labelled, never look like local listings) */
.smartfill { margin-top: 26px; padding: 14px; border: 1px dashed #c9d6e3; border-radius: 12px; background: #fbfcfe; }
.smartfill .sechead { margin-top: 0; }
.pcard { background: #fff; }
.pcard .noimg { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 34px; }
.newtag { background: #1f2937 !important; color: #fff; }
.shopret { display: inline-block; margin-top: 8px; }
.hidep { display: flex; gap: 8px; align-items: center; font-weight: 400; font-size: 14px; margin-top: 12px; }
.hidep input { width: auto; margin: 0; }
#admin h4 { margin: 12px 0 6px; font-size: 14px; }

/* ---------- demo items (test data only) */
.demotag { left: auto !important; right: 8px; bottom: 8px; background: #fff4e5 !important; color: #9a5b00; }
.demoline { background: #fff4e5; color: #9a5b00; border-radius: 8px; padding: 6px 10px; font-size: 14px; }

/* ---------- vehicles */
.vbox .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.vinrow { display: flex; gap: 8px; align-items: flex-end; } .vinrow label { flex: 1; } .vinrow button { margin-bottom: 2px; padding: 11px 14px; }
.vmeta { color: var(--soft); font-size: 13px; }
.vtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.vtable th { text-align: left; color: var(--soft); font-weight: 500; padding: 5px 8px 5px 0; width: 42%; border-bottom: 1px solid var(--line); }
.vtable td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.vsafe { margin-top: 12px; border: 1px solid #f3d9a4; background: #fffaf0; border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.vsafe ul { margin: 6px 0 0; padding-left: 18px; } .vsafe a { color: var(--blue); text-decoration: underline; }
#vfilters select { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; background: #fff; }
@media (max-width: 760px) { .vbox .three { grid-template-columns: 1fr 1fr; } }

/* ---------- feed control panel */
.feedrow { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 8px 0; }
.fhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fgrid { display: grid; grid-template-columns: 1.3fr 2fr .5fr .6fr 1.4fr auto auto; gap: 6px; margin-top: 8px; align-items: center; }
.fgrid input, .fgrid select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-width: 0; }
.feedlog { max-height: 260px; overflow: auto; }
@media (max-width: 1020px) { .fgrid { grid-template-columns: 1fr 1fr; } }

/* ---------- Mail2List */
.mailit { background: var(--tint2); border: 1px solid #b7e3dc; border-radius: 12px; padding: 10px 14px; margin: 12px 0 0; font-size: 14px; }
.flags { background: #fff8eb; border: 1px solid #f3d9a4; border-radius: 10px; padding: 8px 12px 8px 28px; font-size: 14px; color: #7a4b00; }
.box.intake { margin-top: 12px; }
/* About Us (Scott 10/27): short version on Home, full page at #about */
.aboutshort { margin-top: 18px; } .aboutshort p { margin: 8px 0; line-height: 1.5; }
.aboutpage { max-width: 780px; margin: 24px auto; padding: 24px; } .aboutpage h2 { margin: 0 0 12px; font-size: clamp(22px, 4vw, 30px); }
.aboutpage p { line-height: 1.65; margin: 0 0 14px; }
.aboutline b { color: var(--blue); } .aboutline a { margin-left: 8px; }

/* ---------- two ways to place an item + SmartShare */
.where { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.wcol { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--tint2); }
.wcol h4 { margin: 0 0 4px; font-size: 16px; }
.rulelist { margin: 8px 0; padding-left: 18px; font-size: 14px; } .rulelist small { display: block; }
.rulesbox { margin-top: 10px; } .mini2form { display: grid; gap: 6px; margin-top: 8px; }
.mini2form textarea, .sharetext { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: inherit; font-size: 14px; }
@media (max-width: 760px) { .where { grid-template-columns: 1fr; } }

/* ---------- real sign-in code box */
.codebox { font-size: 22px; letter-spacing: 6px; text-align: center; }

/* ---------- account: username top right + Account button, plans */
.whoname { font-weight: 700; color: var(--ink, #10202a); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.acctgrid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }
.plancards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.plancard { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 6px; justify-items: start; background: #fff; }
.plancard.on { border-color: var(--blue); background: var(--tint2); }
.plancard span { font-size: 18px; font-weight: 700; color: var(--blue); } .plancard em { font-style: normal; font-weight: 600; color: var(--blue); }
.sellgate { margin: 12px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .acctgrid, .plancards { grid-template-columns: 1fr; } .whoname { order: 6; max-width: 110px; font-size: 14px; } }

.acname { margin-bottom: 4px; } .actype { margin: 0 0 10px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- My Stuff (seller dashboard, Scott's mockup 10/18) */
.wrap.wide { max-width: 1320px; }
.stuff { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
.stuffside { border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px; background: #fff; position: sticky; top: 140px; }
.sfme { display: flex; gap: 10px; align-items: center; padding: 0 6px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.sfme div { display: grid; } .sfme small { color: var(--muted, #5b6b73); } .sfme a { font-size: 14px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 800; flex: none; }
.sfnav { display: grid; gap: 2px; }
.sfnav a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.sfnav a:hover, .sfnav a.on { background: var(--tint); }
.sfnav i { margin-left: auto; font-style: normal; font-size: 13px; min-width: 24px; text-align: center; background: var(--tint2); border-radius: 12px; padding: 1px 7px; }
.sfnav .pill { margin-left: auto; }
.stuffhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.stuffhead h2 { margin: 0; font-size: 34px; } .stuffhead p { margin: 2px 0 0; color: var(--blue); font-weight: 600; }
.stuffbtns { display: flex; gap: 8px; flex-wrap: wrap; } .stuffbtns .small-btn, .addcard .small-btn { display: grid; text-align: center; }
.stuffbtns small, .addcard small { font-size: 11px; font-weight: 400; }
.stiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 16px 0; }
.stile { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; background: #fff; cursor: pointer; }
.stile span { grid-row: span 2; font-size: 22px; align-self: center; } .stile b { font-size: 24px; } .stile small { color: var(--muted, #5b6b73); }
.stile.on { border-color: var(--blue); background: var(--tint2); }
.tabsrow { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.stufftabs { display: flex; gap: 6px; flex-wrap: wrap; }
.stufftabs button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.stufftabs button.on { background: var(--tint); border-color: var(--blue); color: var(--blue-dark, #0a5f59); }
#stuffSort { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; }
.stuffgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.scard { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.sphoto { position: relative; aspect-ratio: 16 / 10; background: var(--tint2); } .sphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbadge { position: absolute; top: 10px; left: 10px; background: #e6f7ec; color: #11743b; border-radius: 12px; padding: 3px 10px; font-size: 13px; font-weight: 700; }
.sbadge.draft, .sbadge.paused { background: #fff4d6; color: #8a5a00; } .sbadge.expired { background: #fde8e8; color: #9b1c1c; } .sbadge.sold { background: #e7eefc; color: #1d4ed8; }
.sbody { padding: 12px 14px; display: grid; gap: 3px; } .stitle { font-size: 17px; } .sprice { font-size: 22px; font-weight: 800; color: var(--blue); }
.sbody small { color: var(--muted, #5b6b73); } .sbody small.err { color: #b42318; }
.sfoot { display: flex; gap: 12px; align-items: center; margin-top: 8px; color: var(--muted, #5b6b73); }
.sfoot .split, .sfoot > a { margin-left: auto; } .split { display: flex; } .split button:first-child { border-radius: 8px 0 0 8px; } .split button:last-child { border-radius: 0 8px 8px 0; border-left: 1px solid rgba(255,255,255,.35); padding: 0 8px; }
.smenu { display: grid; gap: 4px; margin-top: 6px; } .smenu a, .smenu button { text-align: left; background: var(--tint2); border: 0; border-radius: 8px; padding: 8px 10px; font: inherit; cursor: pointer; color: inherit; text-decoration: none; }
.editbox { display: grid; gap: 6px; margin-top: 8px; } .editbox input, .editbox textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; }
.fbcheck { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-weight: 600; color: var(--blue-dark, #0a5f59); cursor: pointer; }
.fbpanel { border: 1px solid var(--line); background: var(--tint2); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; }
.fbrow { display: flex; gap: 8px; align-items: flex-start; } .fbrow span { display: grid; } .fbrow small { color: var(--muted, #5b6b73); } .fbrow.off { opacity: .75; }
.addcard { border-style: dashed; padding: 24px 18px; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.addcard .plus { width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 30px; display: grid; place-items: center; }
.stuffbanner { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--tint2); display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.stuffbanner div { display: grid; gap: 2px; }
@media (max-width: 1100px) { .stuffgrid { grid-template-columns: repeat(2, 1fr); } .stiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .stuff { grid-template-columns: 1fr; } .stuffside { position: static; } .sfnav { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stuffgrid { grid-template-columns: 1fr; } .stiles { grid-template-columns: repeat(2, 1fr); } .stuffhead h2 { font-size: 28px; } }
/* My Stuff checkboxes: not the full-width form inputs */
.fbcheck, .fbrow { margin: 6px 0 0; font-size: 14px; }
.fbcheck input, .fbrow input { display: inline-block; width: auto; margin: 2px 0 0; padding: 0; flex: none; }
.fbrow { font-weight: 400; }

/* AQUA GLASS THEME removed 10/18 (Scott: "we had beautiful crisp pages and we changed them") - light pages are the
   original crisp white design again. Dark mode + the pages designed dark keep their look (below). */
/* =====================================================================================================
   DARK MODE (Scott 10/18: "add dark mode to account settings area"). Account -> Appearance: Light / Dark / Match my
   device. Saved on this device. Same layout, deep-teal night sky, dark frosted glass.
   ===================================================================================================== */
html[data-theme="dark"] {
  --ink: #e7f4f4; --soft: #9fbcc0; --line: rgba(255,255,255,.12); --tint: rgba(47,181,168,.18); --tint2: rgba(47,181,168,.10);
  --glass: rgba(12,38,46,.74); --glass-strong: rgba(14,44,52,.92); --glass-line: rgba(255,255,255,.10);
  --glass-shadow: 0 8px 28px rgba(0,0,0,.35); --blue: #2fb5a8; --blue-dark: #7fe0d4; color-scheme: dark;
}
html[data-theme="dark"], html[data-theme="dark"] body {
  background: radial-gradient(1100px 500px at 15% -5%, rgba(47,181,168,.22), transparent 60%),
              radial-gradient(1200px 600px at 90% 105%, rgba(31,169,209,.18), transparent 65%),
              linear-gradient(170deg, #0a2730 0%, #0c333c 45%, #0b3a40 100%);
  color: var(--ink);
}
html[data-theme="dark"] .top, html[data-theme="dark"] .menu { background: rgba(8,30,37,.72); border-bottom-color: var(--glass-line); }
html[data-theme="dark"] .hero { background: linear-gradient(90deg, rgba(10,39,48,.94) 0%, rgba(10,39,48,.8) 45%, rgba(10,39,48,.3) 75%), var(--rays); }
html[data-theme="dark"] .sub, html[data-theme="dark"] .fine, html[data-theme="dark"] .tile small, html[data-theme="dark"] .card .mi { color: var(--soft); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea,
html[data-theme="dark"] .small-btn:not(.blue), html[data-theme="dark"] .ghost, html[data-theme="dark"] .loc, html[data-theme="dark"] .signin,
html[data-theme="dark"] .chips button, html[data-theme="dark"] .try button, html[data-theme="dark"] .stufftabs button, html[data-theme="dark"] .seg button,
html[data-theme="dark"] .mic, html[data-theme="dark"] .bigsearch, html[data-theme="dark"] .topsearch, html[data-theme="dark"] .card .tag {
  background: rgba(255,255,255,.07); color: var(--ink); border-color: rgba(255,255,255,.16); }
html[data-theme="dark"] .signin { color: #7fe0d4; border-color: #2fb5a8; }
html[data-theme="dark"] .card .pr, html[data-theme="dark"] .sprice { color: #6fe0b0; }
html[data-theme="dark"] dialog { background: #0f2f37; color: var(--ink); }
/* seller profile pop-up (store Message / Follow, seller boxes) - was white with dark-theme text (Scott 10/27 "way to lite") */
html[data-theme="dark"] .stkprof, html[data-theme="dark"] .stkstats div { background: #0f2f37; color: var(--ink); }
/* same white-box-with-light-text gap (found by the 10/27 scan): Messages pickup + deal-notice boxes, sticker tabs + cells */
html[data-theme="dark"] .pickup, html[data-theme="dark"] .dnbox, html[data-theme="dark"] .dnline,
html[data-theme="dark"] .stktabs button, html[data-theme="dark"] .stkcell { background: #0f2f37; color: var(--ink); }
html[data-theme="dark"] .pickup { border-color: rgba(47,181,168,.45); }
html[data-theme="dark"] .stktabs button.on { background: var(--blue); color: #fff; }
html[data-theme="dark"] .stkverified { color: #6fe0b0; }
html[data-theme="dark"] .devbar { background: #3a3210; color: #f3e3a0; }
html[data-theme="dark"] .pill { background: rgba(255,255,255,.1); color: var(--ink); }
html[data-theme="dark"] .pill.active { background: rgba(47,181,168,.25); color: #8ff0d0; }
html[data-theme="dark"] .status.err, html[data-theme="dark"] .sbody small.err { color: #ff9b8f; }
html[data-theme="dark"] .foot { background: linear-gradient(90deg, #08262d, #0d3a40); }
.themepick { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.themepick button { border: 1px solid var(--line); background: rgba(255,255,255,.6); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.themepick button.on { border-color: var(--blue); background: var(--tint); color: var(--blue-dark); }
html[data-theme="dark"] .themepick button { background: rgba(255,255,255,.07); color: var(--ink); }
html[data-theme="dark"] .themepick button.on { background: rgba(47,181,168,.25); color: #8ff0d0; }
html[data-theme="dark"] .card .tag.demotag { color: #9a5b00; }
html[data-theme="dark"] .tools i { background: rgba(255,255,255,.1); color: var(--soft); }

/* footer Log out - bright green, in line with the footer links (Scott 10/18) */
.foot nav { align-items: center; }
.logout { background: #22c55e; color: #fff; border: 0; border-radius: 999px; padding: 7px 18px; font-weight: 800; font-size: 14px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(34,197,94,.45); }
.logout:hover { background: #16a34a; }
html[data-theme="dark"] .logout { background: #22c55e; color: #fff; }

/* ---------- Affiliates (admins only; Scott's Partner Deals mockup 10/18) */
.adminbar { margin: 0 0 12px; padding: 8px 14px; border-radius: 10px; background: rgba(255,244,214,.9); color: #6b4e00; font-size: 14px; }
html[data-theme="dark"] .adminbar { background: rgba(58,50,16,.9); color: #f3e3a0; }
.affside { margin: 2px 8px 10px; }
.affhead { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.affhead h2 { margin: 0; font-size: 38px; } .affhead > div > p { margin: 2px 0 0; color: var(--blue); font-weight: 700; font-size: 18px; }
.affpoints { display: flex; gap: 18px; flex-wrap: wrap; } .affpoints div { display: grid; max-width: 170px; } .affpoints b { color: var(--blue-dark); } .affpoints small { color: var(--soft); }
.affhero { position: relative; margin: 16px 0; border-radius: 16px; padding: 22px 24px 34px; display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 18px; align-items: center;
  background: linear-gradient(120deg, rgba(14,124,116,.92), rgba(31,169,209,.78)); color: #fff; box-shadow: var(--glass-shadow); }
.affhero h3 { margin: 8px 0 4px; font-size: 34px; line-height: 1.05; } .affhero p { margin: 0 0 12px; opacity: .9; }
.affhero .small-btn.blue { background: #fff; color: var(--blue-dark); border: 0; font-weight: 700; padding: 10px 16px; border-radius: 999px; }
.affbox { justify-self: center; display: grid; justify-items: center; background: #c79a63; color: #3b2a14; border-radius: 10px; padding: 14px 22px; transform: rotate(-3deg); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.affbox img { width: 54px; height: 54px; border-radius: 50%; } .affbox b { font-size: 20px; font-style: italic; } .affbox span { font-size: 13px; font-weight: 700; }
.affhero ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.affdisc { position: absolute; right: 16px; bottom: 8px; font-size: 12px; opacity: .9; }
.affgrid { grid-template-columns: repeat(4, 1fr); } .affgrid .sbadge { background: #d6f7ef; color: #0a5f59; top: 6px; left: 6px; padding: 1px 7px; font-size: 10.5px; border-radius: 8px; opacity: .92; }   /* small: the picture shows (Scott 10/21) */
.affgrid .seeprice { font-size: 15px; font-weight: 800; color: var(--blue); } .affgrid .sfoot .small-btn { white-space: nowrap; }
.affgrid .sphoto { background: #fff; } .affgrid .sphoto img { object-fit: contain; padding: 6px; }   /* whole product on white, not cropped (Scott 10/21) */
.affgrid .noimg { width: 100%; height: 100%; display: grid; place-items: center; font-size: 44px; }
@media (max-width: 1100px) { .affgrid { grid-template-columns: repeat(3, 1fr); } .affhero { grid-template-columns: 1fr 1fr; } .affhero ul { display: none; } }
@media (max-width: 760px) { .affgrid { grid-template-columns: repeat(2, 1fr); } .affhero { grid-template-columns: 1fr; } .affbox { display: none; } .affhead h2 { font-size: 30px; } }
@media (max-width: 480px) { .affgrid { grid-template-columns: 1fr; } }
.affmanage { display: block; margin: 12px 8px 4px; text-align: center; }

/* ---------- Owner controls (Account page, admins only) */
.owner { margin-top: 14px; } .owner h3 small { font-weight: 400; }
.switchrow { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.switchrow > div { display: grid; gap: 2px; } .switchrow small.err { color: #b42318; }
.toggle { flex: none; width: 58px; height: 32px; border-radius: 999px; border: 0; background: #c9d4da; position: relative; cursor: pointer; transition: background .15s; }
.toggle i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.toggle.on { background: #22c55e; } .toggle.on i { left: 30px; } .toggle:disabled { opacity: .45; cursor: not-allowed; }
.openbox { width: 110px; margin-left: 8px; padding: 6px 8px; border: 2px solid #b42318; border-radius: 8px; text-transform: uppercase; }
#adminHere .box { margin-top: 14px; }
.switchrow > div { justify-items: start; } .switchrow > div > b { display: inline; }

/* ---------- county + ways to reach me */
.cways { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin: 6px 0 10px; }
.cways label { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 600; white-space: nowrap; }
.cways label input { width: auto; margin: 0; padding: 0; display: inline-block; }
.adultbox { display: flex; gap: 8px; align-items: center; margin: 4px 0 10px; font-weight: 700; } .adultbox input { width: auto; margin: 0; padding: 0; }   /* D7 18+ box */
.cways .cwv, .cwother input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.cways [hidden] { display: none !important; } .cways label + [hidden] + label { grid-column: 1; }
.cwother { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; }
.cways > label { grid-column: 1; } .cways > .cwv, .cways > .cwother { grid-column: 2; }
.acbox { display: grid; gap: 6px; margin: 12px 0; } .acbox select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.cwlist { display: grid; gap: 6px; margin: 10px 0; } .cwlink { display: block; padding: 8px 12px; border-radius: 10px; background: var(--tint2); border: 1px solid var(--line); }
html[data-theme="dark"] .cways .cwv, html[data-theme="dark"] .cwother input, html[data-theme="dark"] .acbox select { background: rgba(255,255,255,.07); color: var(--ink); }

/* ---------- Bulk Upload */
.bulkbox { margin: 12px 0; } .bulkbox ul { margin: 6px 0 0; padding-left: 18px; }
.bulkform { display: grid; gap: 8px; margin-top: 10px; } .bulkform .hidep { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.bulkform .hidep input { width: auto; margin: 0; padding: 0; }
.pubbar { grid-column: 1 / -1; display: flex; gap: 8px; }
.nophoto { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 4px; font-size: 40px; color: var(--soft); }
.nophoto span { font-size: 14px; }

/* ---------- review queue + report */
.revrow { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.revrow > div:first-child { display: grid; gap: 2px; } .revrow small.err { color: #b42318; } .revrow.child { background: rgba(253,232,232,.7); border-radius: 8px; padding: 10px; }
.revbtns { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.report { margin: 10px 0; } .report summary { cursor: pointer; color: var(--soft); font-size: 14px; }
.report form { display: grid; gap: 4px; margin-top: 6px; } .report label { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 400; }
.report label input { width: auto; margin: 0; padding: 0; } .report textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; }
.buildtag { opacity: .75; font-size: 12px; }

/* =====================================================================================================
   MOCKUP DARK TEAL (Scott's My Stuff + Partner Deals designs, 10/18) - used by dark mode and by the pages designed dark.
   Deep teal-navy, dark glass panels with a thin teal edge, bright aqua buttons with dark text, aqua prices + accents.
   ===================================================================================================== */
html[data-theme="dark"] { --blue: #2dd4bf; --blue-dark: #5eead4; --tint: rgba(45,212,191,.16); --tint2: rgba(45,212,191,.08);
  --glass: rgba(9,42,50,.82); --glass-strong: rgba(10,46,54,.95); --glass-line: rgba(94,234,212,.22); }
html[data-theme="dark"], html[data-theme="dark"] body {
  background: radial-gradient(1000px 520px at 10% -10%, rgba(45,212,191,.12), transparent 60%),
              linear-gradient(175deg, #062a30 0%, #073239 40%, #08363d 100%); }
html[data-theme="dark"] .top, html[data-theme="dark"] .menu { background: rgba(5,34,40,.92); border-bottom-color: rgba(94,234,212,.15); }
html[data-theme="dark"] .menu a.on { background: rgba(45,212,191,.16); color: #5eead4; box-shadow: inset 0 -3px 0 #2dd4bf; border-radius: 6px 6px 0 0; }
html[data-theme="dark"] .menu .post, html[data-theme="dark"] .small-btn.blue, html[data-theme="dark"] .primary,
html[data-theme="dark"] .stufftabs button.on { background: #2dd4bf; color: #04282d; border-color: #2dd4bf; font-weight: 700; }
html[data-theme="dark"] .small-btn.blue:hover, html[data-theme="dark"] .menu .post:hover { background: #5eead4; }
html[data-theme="dark"] .scard, html[data-theme="dark"] .stuffside, html[data-theme="dark"] .stile, html[data-theme="dark"] .box,
html[data-theme="dark"] .card, html[data-theme="dark"] .tile { border: 1px solid rgba(94,234,212,.22); }
html[data-theme="dark"] .sprice, html[data-theme="dark"] .card .pr { color: #5eead4; }
html[data-theme="dark"] .sbadge { background: #a7f3d0; color: #064e3b; } html[data-theme="dark"] .affgrid .sbadge { background: #5eead4; color: #053238; }
html[data-theme="dark"] .sbadge.draft, html[data-theme="dark"] .sbadge.paused { background: #fde68a; color: #6b4e00; }
html[data-theme="dark"] .sfnav a.on { background: rgba(45,212,191,.18); box-shadow: inset 3px 0 0 #2dd4bf; }
html[data-theme="dark"] .stuffhead p, html[data-theme="dark"] .affhead > div > p { color: #5eead4; }
html[data-theme="dark"] .affhero { background: linear-gradient(120deg, rgba(8,58,66,.95), rgba(13,92,100,.85)); border: 1px solid rgba(94,234,212,.3); }
html[data-theme="dark"] .affhero .small-btn.blue { background: #2dd4bf; color: #04282d; }
html[data-theme="dark"] .affpoints b { color: #5eead4; }
html[data-theme="dark"] .whoname, html[data-theme="dark"] .word { color: #e7f4f4; }
html[data-theme="dark"] .stile.on, html[data-theme="dark"] .plancard.on { background: rgba(45,212,191,.18); border-color: #2dd4bf; }
html[data-theme="dark"] .wcol, html[data-theme="dark"] .fbpanel, html[data-theme="dark"] .stuffbanner { background: rgba(9,52,60,.85); border-color: rgba(94,234,212,.22); color: var(--ink); }
html[data-theme="dark"] .stuffbanner .small-btn { background: rgba(255,255,255,.07); color: var(--ink); }

/* ---------- ratings */
.repstars { color: #b7791f; font-weight: 800; } .repnew { font-weight: 600; }
.rateform { display: grid; gap: 6px; margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--tint2); border: 1px solid var(--line); }
.starrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.stars button { background: none; border: 0; font-size: 24px; color: #e0a106; cursor: pointer; padding: 0 2px; line-height: 1; }
.again { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .again label { display: flex; gap: 4px; align-items: center; margin: 0; font-weight: 500; }
.again label input { width: auto; margin: 0; padding: 0; }
.rateform textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; }
.myrev { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .dispnote { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }

/* dark panels (dark mode + the pages designed dark) */
html[data-theme="dark"] { --glass-shadow: 0 8px 28px rgba(0,0,0,.35); }
html[data-theme="dark"] .box, html[data-theme="dark"] .panel, html[data-theme="dark"] .plans, html[data-theme="dark"] .trust, html[data-theme="dark"] .tile,
html[data-theme="dark"] .card, html[data-theme="dark"] .empty, html[data-theme="dark"] .wantcard, html[data-theme="dark"] .minecard, html[data-theme="dark"] .threads,
html[data-theme="dark"] .thread, html[data-theme="dark"] .fside, html[data-theme="dark"] .pcard, html[data-theme="dark"] .plancard, html[data-theme="dark"] .stuffside,
html[data-theme="dark"] .stile, html[data-theme="dark"] .scard, html[data-theme="dark"] .locpop {
  background: var(--glass); border-color: var(--glass-line); box-shadow: var(--glass-shadow); }
html[data-theme="dark"] .cols, html[data-theme="dark"] .planwrap { background: transparent; }
html[data-theme="dark"] .bigsearch, html[data-theme="dark"] .panel { background: var(--glass-strong); }

/* =====================================================================================================
   TIGHT + DEFINED (Scott 10/18: "can you get pages tighter and more defined like they were").
   Crisper card edges + a small clean shadow everywhere; less padding on the newer pages (Account, My Stuff, Affiliates).
   ===================================================================================================== */
:root { --line: #d6e0e8; --edge-shadow: 0 1px 2px rgba(16,24,40,.07), 0 2px 6px rgba(16,24,40,.05); }
.box, .card, .tile, .wantcard, .minecard, .threads, .thread, .fside, .plans, .panel, .scard, .stile, .stuffside, .plancard, .trust {
  border: 1px solid var(--line); box-shadow: var(--edge-shadow); }
/* Account */
.acctgrid { gap: 12px; } .acctgrid .box, #bizBox, #ownerArea { padding: 14px 16px; }
.acbox { margin: 8px 0; gap: 4px; } .cways { gap: 4px 10px; margin: 4px 0 6px; } .cways .cwv, .cwother input { padding: 6px 9px; }
.plancards { gap: 8px; margin: 8px 0; } .plancard { padding: 10px; gap: 4px; } .plancard span { font-size: 17px; }
.themepick button { padding: 6px 12px; } #unameForm { margin-top: 6px; }
/* My Stuff + Affiliates */
.stuff { gap: 14px; } .stuffside { padding: 12px 10px; } .sfnav a { padding: 7px 10px; } .sfme { padding: 0 4px 10px; }
.stuffhead h2 { font-size: 30px; } .stiles { gap: 8px; margin: 12px 0; } .stile { padding: 9px 12px; } .stile b { font-size: 21px; }
.tabsrow { margin-bottom: 10px; } .stufftabs button { padding: 6px 12px; } #stuffSort, #affSort { padding: 6px 10px; }
.stuffgrid { gap: 12px; } .scard { border-radius: 12px; } .sphoto { aspect-ratio: 16 / 9; }
.sbody { padding: 9px 12px 11px; gap: 1px; } .stitle { font-size: 16px; } .sprice { font-size: 20px; }
.sfoot { margin-top: 6px; } .addcard { padding: 18px 14px; gap: 8px; } .stuffbanner { margin-top: 12px; padding: 10px 14px; }
.affhead h2 { font-size: 32px; } .affhero { margin: 12px 0; padding: 18px 20px 30px; } .affhero h3 { font-size: 30px; }
/* dark pages: crisper edges too */
html[data-theme="dark"] { --glass-line: rgba(94,234,212,.32); }
html[data-theme="dark"] .box, html[data-theme="dark"] .scard, html[data-theme="dark"] .stile, html[data-theme="dark"] .stuffside, html[data-theme="dark"] .card,
html[data-theme="dark"] .tile, html[data-theme="dark"] .plancard { box-shadow: 0 1px 0 rgba(94,234,212,.08), 0 6px 16px rgba(0,0,0,.35); }
.sphoto { overflow: hidden; } .sphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acctgrid { align-items: start; }

/* Scott 10/18: "stay dark, get darker teals going, but get tighter layout back like it was - things got wider".
   My Stuff + Affiliates back to the same 1180 px frame as every other page; deeper teal night palette. */
.wrap.wide { max-width: 1180px; }
.stuff { grid-template-columns: 220px 1fr; }
html[data-theme="dark"] { --glass: rgba(4,30,36,.92); --glass-strong: rgba(5,34,40,.97); --glass-line: rgba(45,212,191,.28); --soft: #8fb3b6; }
html[data-theme="dark"], html[data-theme="dark"] body {
  background: radial-gradient(900px 480px at 10% -10%, rgba(20,184,166,.10), transparent 60%),
              linear-gradient(175deg, #031c21 0%, #04242a 45%, #052a31 100%); }
html[data-theme="dark"] .top, html[data-theme="dark"] .menu { background: rgba(2,22,27,.96); }
html[data-theme="dark"] .affhero { background: linear-gradient(120deg, rgba(4,44,51,.98), rgba(8,74,82,.9)); }
html[data-theme="dark"] .stuffbanner, html[data-theme="dark"] .wcol, html[data-theme="dark"] .fbpanel { background: rgba(5,40,47,.92); }
.stuff { grid-template-columns: 236px 1fr; } .sfnav a { font-size: 15px; white-space: nowrap; } .sfnav .pill { font-size: 11px; white-space: nowrap; }
/* My Stuff on phones/tablets (fix 2026-10-22d): the two lines above sit AFTER the 820px rule and beat it, so on a phone the
   236px side menu stayed beside the main column and its two-column links spilled over the tiles. Here (last, so it wins)
   the side menu stacks ABOVE the content: profile on top, links in two columns, "List Another Item" full width. */
.stuffmain { min-width: 0; }
@media (max-width: 820px) {
  .stuff { grid-template-columns: 1fr; } .stuffside { position: static; }
  .sfnav { grid-template-columns: 1fr 1fr; } .sfnav a { white-space: normal; min-width: 0; } .sfnav .sideadd { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .sfnav a { font-size: 14px; padding: 7px 8px; gap: 6px; } }

/* block a member (F1-12) - quiet link under the seller / in a chat; list on Account */
.blockline { margin: 6px 0; } .blockline a { color: var(--muted, #5b6b73); text-decoration: underline; }
.blockrow { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.blockrow a { font-size: 13px; }
/* email alerts on Account */
.alertpick { display: flex; gap: 8px; align-items: center; font-size: 14px; } .alertpick input { width: auto; }
/* Scott's books (books.ts) - home box + top of Books & Music */
.bookcards { display: grid; gap: 10px; } .bookcards.wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 0 0 14px; }
.bookcard { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line, #d7e7e4);
  border-radius: 10px; background: #fff; color: inherit; text-decoration: none; }
.bookcard:hover { border-color: var(--teal, #0f7c74); box-shadow: 0 2px 10px rgba(15,124,116,.12); }
.bookcard img { width: 74px; height: 118px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.bookcard div { display: grid; gap: 4px; } .bookcard b { font-size: 14px; line-height: 1.25; } .bookcard small { color: var(--muted, #5b6b73); font-size: 12px; line-height: 1.3; }
.bookcard .bookmeta { font-size: 12px; font-weight: 600; } .bookcard .small-btn { justify-self: start; } .bookcard em { font-style: normal; font-size: 11px; }
.booknote { display: block; margin-top: 6px; font-size: 11px; }
html[data-theme="dark"] .bookcard { background: rgba(255,255,255,.05); }

/* Marvel Corp apps (apps.ts) + digital products (digital.ts) */
.appcards { display: grid; gap: 8px; } .appcards.wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 0 0 14px; }
.appcard { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line, #d7e7e4);
  border-radius: 10px; background: #fff; color: inherit; text-decoration: none; }
.appcard:hover { border-color: var(--teal, #0f7c74); box-shadow: 0 2px 10px rgba(15,124,116,.12); }
.appcard img { width: 44px; height: 44px; border-radius: 10px; } .appcard div { display: grid; gap: 2px; }
.appcard b { font-size: 14px; } .appcard small { font-size: 12px; color: var(--muted, #5b6b73); line-height: 1.3; }
.appcard .appopen { font-size: 12px; font-weight: 700; color: var(--teal, #0f7c74); white-space: nowrap; }
.shopapps { margin: 0 0 8px; font-size: 16px; }
a.buyit { display: block; text-align: center; text-decoration: none; }
html[data-theme="dark"] .appcard { background: rgba(255,255,255,.05); }
.appmore { font-size: 13px; font-weight: 700; color: var(--teal, #0f7c74); text-decoration: none; padding: 2px 4px; }

/* owner At a glance (glance.ts) */
.glance .grow { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 8px 0; }
.glance .grow h4 { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; }
.gtile { display: grid; align-content: start; min-width: 104px; padding: 8px 10px; border: 1px solid var(--line, #d7e7e4); border-radius: 10px; background: #fff; }
.gtile b { font-size: 20px; line-height: 1.1; } .gtile span { font-size: 12px; font-weight: 600; } .gtile small { font-size: 11px; color: var(--muted, #5b6b73); }
.gtile.big b { font-size: 26px; color: var(--teal, #0f7c74); } .gtile.money b { color: #138a3e; } .gtile.warn { border-color: #e6a700; background: #fff8e1; }
html[data-theme="dark"] .gtile { background: rgba(255,255,255,.05); } html[data-theme="dark"] .gtile.warn { background: rgba(230,167,0,.12); }

/* Best Offer (bestoffer.ts) */
.obotag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #fff3cd; color: #7a5200; font-size: 11px; font-weight: 700; vertical-align: middle; }
.oboline { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: #fff8e1; border: 1px solid #f1d27a; font-size: 14px; }
html[data-theme="dark"] .obotag { background: rgba(255,200,60,.18); color: #ffd56b; } html[data-theme="dark"] .oboline { background: rgba(255,200,60,.10); border-color: rgba(255,200,60,.35); }

/* top-bar Best Offer countdown */
.obonext b { font-variant-numeric: tabular-nums; color: #7a5200; } html[data-theme="dark"] .obonext b { color: #ffd56b; }

/* shared Facebook group directory (groupdir.ts) */
.gdir .sechead { gap: 10px; flex-wrap: wrap; } .gdirq { max-width: 220px; padding: 7px 10px; border: 1px solid var(--line, #d7e7e4); border-radius: 8px; }
.gdirlist { display: grid; gap: 6px; max-height: 520px; overflow: auto; }
.gdrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line, #d7e7e4); border-radius: 8px; background: #fff; }
.gdrow > div:first-child { display: grid; gap: 2px; } .gdrow.pending { border-color: #e6a700; background: #fff8e1; } .gdrow.rejected { opacity: .55; }
.gdbtns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .okline.small { font-size: 12px; white-space: nowrap; }
.gdirh { margin: 18px 0 4px; font-size: 16px; }
.gdirpaste { min-height: 70px; max-height: 120px; overflow: auto; padding: 10px; border: 2px dashed var(--line, #d7e7e4); border-radius: 10px; background: #fafdfc; font-size: 13px; color: var(--muted, #5b6b73); }
.gdirpaste:empty::before { content: attr(data-ph); } .gdirpaste:focus { outline: 2px solid var(--teal, #0f7c74); }
html[data-theme="dark"] .gdrow, html[data-theme="dark"] .gdirpaste { background: rgba(255,255,255,.05); }
@media (max-width: 640px) { .gdrow { flex-direction: column; align-items: stretch; } .gdbtns { justify-content: flex-start; } }

/* listing details (details.ts) - posting form + item page + cards */
.firmrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-weight: 400; }
.pickchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.pickchips label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line, #d7e7e4); border-radius: 999px; background: #fff; font-size: 14px; cursor: pointer; }
.pickchips label:has(input:checked) { border-color: var(--teal, #0f7c74); background: #e8f6f3; font-weight: 600; } .pickchips input { width: auto; margin: 0; }
.moredet summary { cursor: pointer; font-weight: 600; }
.card .was, .priceblock .was { color: var(--muted, #5b6b73); font-weight: 500; font-size: .8em; margin-left: 4px; }
.getchip { font-size: 12px; color: var(--teal, #0f7c74); font-weight: 600; margin: 2px 0; }
.titlebtns { display: flex; gap: 6px; }
.priceblock { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .priceblock .pr { font-size: 30px; font-weight: 800; color: #138a3e; }
.priceblock .pricedrop { font-size: 12px; font-weight: 700; color: #ff7a6b; } .dealline { margin: 2px 0; font-weight: 600; color: #138a3e; }
.listedin { margin: 4px 0 8px; color: var(--muted, #5b6b73); font-size: 14px; }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; } .chiprow span { padding: 5px 11px; border-radius: 999px; background: #eef7f5; border: 1px solid var(--line, #d7e7e4); font-size: 13px; font-weight: 600; }
.askbox { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line, #d7e7e4); border-radius: 12px; background: #f7fbfa; margin: 8px 0; }
.askrow { display: flex; gap: 8px; } .askrow input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line, #d7e7e4); border-radius: 10px; } .askrow .primary { padding: 10px 22px; }
.dettable { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 8px; border: 1px solid var(--line, #d7e7e4); border-radius: 10px; overflow: hidden; }
.dettable div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line, #d7e7e4); }
.dettable dt { color: var(--muted, #5b6b73); font-size: 13px; } .dettable dd { margin: 0; font-weight: 600; font-size: 14px; }
.goodbox { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 10px 12px; border-radius: 10px; background: #fff8e1; border: 1px solid #f1d27a; font-size: 14px; margin: 6px 0 4px; }
.mapbox { position: relative; height: 180px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line, #d7e7e4); margin-top: 12px; }
.mapbox iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }
.mapring { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; background: rgba(15,124,116,.18); border: 2px solid rgba(15,124,116,.7); }
.mapnarrow { display: none; }
.repstars { color: #f5a400; letter-spacing: 1px; }
html[data-theme="dark"] .pickchips label, html[data-theme="dark"] .askbox { background: rgba(255,255,255,.05); } html[data-theme="dark"] .chiprow span { background: rgba(255,255,255,.07); }
html[data-theme="dark"] .goodbox { background: rgba(255,200,60,.10); border-color: rgba(255,200,60,.35); }
@media (max-width: 760px) { .mapwide { display: none; } .mapnarrow { display: block; } .dettable { grid-template-columns: 1fr; } }

/* item page - Scott's 10/19 mockup: thumbs | photo + good-find strip | stacked cards (dark teal via PAGE_THEME) */
#item { max-width: 1320px; }
.crumbs { font-size: 13px; color: var(--muted, #8fb3b0); margin: 4px 0 12px; } .crumbs a { color: inherit; text-decoration: none; } .crumbs span { color: var(--ink, #e8f4f2); }
.item2 { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(340px, 520px); gap: 16px; align-items: start; }
.ithumbs { display: flex; flex-direction: column; gap: 10px; max-height: 640px; overflow: auto; }
.ithumbs img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 2px solid transparent; cursor: pointer; opacity: .85; }
.ithumbs img.on { border-color: #2ec4b6; opacity: 1; box-shadow: 0 0 0 3px rgba(46,196,182,.25); }
.icenter { display: grid; gap: 16px; min-width: 0; }
.icenter .big { position: relative; height: min(640px, calc(100vh - 175px)); min-height: 340px; border-radius: 16px; background: #0b2427 center / contain no-repeat; border: 1px solid rgba(46,196,182,.25); }
.icenter .expand { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; text-decoration: none; font-size: 18px; }
.iright { display: grid; gap: 14px; min-width: 0; }
.icard { padding: 16px 18px; border-radius: 16px; background: linear-gradient(160deg, rgba(14,74,76,.55), rgba(8,40,44,.75)); border: 1px solid rgba(46,196,182,.28); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.icard h3 { margin: 0 0 8px; font-size: 17px; } .ihead { display: flex; justify-content: space-between; align-items: center; } .ihead a { color: #2ec4b6; font-size: 13px; text-decoration: none; }
.iherotop { display: flex; justify-content: space-between; gap: 12px; } .ihero h1 { margin: 6px 0 4px; font-size: 30px; line-height: 1.15; font-family: Georgia, "Times New Roman", serif; }
.condpill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(46,196,182,.18); color: #5fe0d3; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.ihero .priceblock .pr { color: #2ec4b6; font-size: 36px; }
.roundbtns { display: grid; gap: 10px; align-content: start; }
.rbtn { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 0; font-size: 11px; background: rgba(255,255,255,.06); color: inherit; border: 1px solid rgba(255,255,255,.18); cursor: pointer; }
.rbtn span { font-size: 20px; line-height: 1; } .rbtn.on span { color: #ff6b8a; }
.factrow { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0; font-size: 14px; }
.msgbtn { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 14px 18px; border: 0; border-radius: 14px; cursor: pointer; text-decoration: none;
  background: linear-gradient(90deg, #14a99c, #2ec4b6); color: #fff; font-size: 19px; font-weight: 700; box-shadow: 0 6px 20px rgba(46,196,182,.35); }
.msgbtn span { margin-left: auto; font-size: 22px; }
.insight { display: flex; gap: 14px; align-items: center; } .insight .spark { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(46,196,182,.15); color: #5fe0d3; font-size: 24px; }
.insight div { display: grid; gap: 2px; } .insight small:first-child { color: #2ec4b6; } .insight b { font-size: 19px; }
.locrow { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; align-items: stretch; } .locrow .mapbox { height: 120px; margin: 0; }
.locname { display: grid; align-content: center; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); } .locname small { color: var(--muted, #8fb3b0); }
.seller2 { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; margin-bottom: 6px; }
.seller2 .av { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 800; background: linear-gradient(135deg, #14a99c, #2a6fdb); color: #fff; }
.sinfo { display: grid; gap: 2px; } .sinfo small { color: var(--muted, #8fb3b0); }
.trustbadge { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(46,196,182,.5); background: rgba(46,196,182,.08); }
.trustbadge span { font-size: 26px; } .trustbadge div { display: grid; } .trustbadge b { font-size: 22px; }
.finds .findrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.finds .findrow div { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 6px; border-right: 1px solid rgba(255,255,255,.08); } .finds .findrow div:last-child { border-right: 0; }
.finds .findrow span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(46,196,182,.6); font-size: 20px; }
.finds small { color: var(--muted, #8fb3b0); font-size: 12px; }
.icard.askbox { background: linear-gradient(160deg, rgba(14,74,76,.55), rgba(8,40,44,.75)); } .askbox .askrow input { background: rgba(255,255,255,.06); color: inherit; border-color: rgba(255,255,255,.2); }
.askbox .primary { background: #14a99c; }
.icard .dettable { margin-top: 10px; border-color: rgba(255,255,255,.12); } .icard .dettable div { border-color: rgba(255,255,255,.08); }
@media (max-width: 1100px) { .item2 { grid-template-columns: 76px minmax(0, 1fr); } .iright { grid-column: 1 / -1; } .ithumbs img { width: 76px; height: 76px; } .icenter .big { height: min(520px, calc(100vh - 175px)); } }
@media (max-width: 640px) { .item2 { grid-template-columns: 1fr; } .icenter { display: contents; }   /* phone: photo, thumbs, title/price, then the rest */
  .icenter .big { order: 0; } .ithumbs { order: 1; } .iright { order: 2; } .icenter .finds, .icenter .vbox, .icenter > :not(.big) { order: 3; }
  .ithumbs { flex-direction: row; max-height: none; } .ithumbs img { width: 64px; height: 64px; flex: none; }
  .icenter .big { height: 340px; } .ihero h1 { font-size: 24px; } .locrow { grid-template-columns: 1fr; } .seller2 { grid-template-columns: 52px 1fr; } .trustbadge { grid-column: 1 / -1; } }

/* item page fixes: photo arrows + counter, ask row */
.icenter .big .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 26px; cursor: pointer; }
.icenter .big .nav.prev { left: 12px; } .icenter .big .nav.next { right: 12px; }
.icenter .big .count { position: absolute; bottom: 12px; right: 12px; top: auto; left: auto; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; }
.askrow .primary { width: auto; flex: none; margin: 0; }

/* Copy for Facebook Marketplace (fbkit.ts) */
.kitsteps { margin: 6px 0 8px 18px; padding: 0; line-height: 1.6; }
.kitgrid { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 16px; align-items: start; margin: 10px 0 16px; }
.kitimgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 10px; }
.kitimgs a { position: relative; display: block; border-radius: 10px; overflow: hidden; } .kitimgs img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.kitimgs span { position: absolute; bottom: 4px; right: 4px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; }
.kitbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kitrow { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line, #d7e7e4); }
.kitlab { display: grid; } .kitlab small { color: var(--muted, #5b6b73); font-size: 11px; }
.kitval { font-size: 14px; word-break: break-word; } .kitval.long { max-height: 220px; overflow: auto; }
.small-btn.done { background: #138a3e; color: #fff; }
.kitbtn { display: block; margin: 10px 0 4px; padding: 10px 14px; border-radius: 12px; text-align: center; text-decoration: none; font-weight: 700; background: #1877f2; color: #fff; }
.kitgo { max-width: 520px; background: linear-gradient(90deg, #1264d6, #1877f2); }
@media (max-width: 760px) { .kitgrid { grid-template-columns: 1fr; } .kitrow { grid-template-columns: 1fr auto; } .kitrow .kitval { grid-column: 1 / -1; grid-row: 2; } }
.grules { font-size: 12px; color: #7a5200; line-height: 1.35; } html[data-theme="dark"] .grules { color: #ffd56b; }
.housebox { margin-top: 16px; } .housebox h4 { margin: 10px 0 6px; font-size: 14px; }

/* category counts on Items for Sale */
.catlist button .catn { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--tint2, #eef7f5); color: var(--muted, #5b6b73); font-style: normal; font-size: 12px; font-weight: 600; text-align: center; }
.catlist button.on .catn { background: var(--teal, #0f7c74); color: #fff; }
html[data-theme="dark"] .catlist button .catn { background: rgba(255,255,255,.08); color: #b9d6d2; }
.catlist button .catl { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .catlist button { font-size: 13.5px; gap: 8px; }
@media (min-width: 761px) { .browse { grid-template-columns: 272px minmax(0, 1fr); } }   /* room for the category counts (10/19) - wide screens only: unguarded it beat the phone rule and squeezed Shop's items to ~50px (10/24) */
.catlist button .catn { min-width: 20px; padding: 0 6px; font-size: 11px; }

/* sales pages: Marvel Corp books + apps (dark, like the item page) */
.prodgrid { display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
.prodart { border-radius: 18px; padding: 22px; background: radial-gradient(circle at 30% 20%, rgba(46,196,182,.25), rgba(8,40,44,.9)); border: 1px solid rgba(46,196,182,.3); display: grid; place-items: center; position: sticky; top: 140px; }
.prodart.book img { width: 100%; max-width: 340px; border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.prodart.app img { width: 70%; max-width: 260px; border-radius: 28%; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.prodmain { display: grid; gap: 14px; min-width: 0; } .prodsub { margin: 2px 0 8px; font-size: 17px; color: #b9d6d2; }
.pricebox { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; } .pricebox .pp { font-size: 38px; font-weight: 800; color: #2ec4b6; } .pricebox .pf { color: #b9d6d2; }
.probtn { display: block; margin-top: 10px; padding: 12px 16px; border-radius: 14px; text-align: center; text-decoration: none; font-weight: 700; border: 1px solid #f5c542; color: #ffd56b; background: rgba(245,197,66,.08); }
.insidelist { display: grid; gap: 10px; } .insidelist div { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid #2ec4b6; } .insidelist small { color: #b9d6d2; }
.featlist { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; } .featlist li { padding-left: 26px; position: relative; } .featlist li::before { content: "✓"; position: absolute; left: 4px; color: #2ec4b6; font-weight: 800; }
.moreh { margin: 26px 0 10px; } .moreprod { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.moreprod a { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 12px 8px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(46,196,182,.2); color: inherit; text-decoration: none; }
.moreprod a:hover { border-color: #2ec4b6; } .moreprod img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; } .moreprod a.isbook img { width: 56px; height: 86px; border-radius: 4px; }
.moreprod b { font-size: 13px; } .moreprod small { font-size: 11px; color: #b9d6d2; }
@media (max-width: 760px) { .prodgrid { grid-template-columns: 1fr; } .prodart { position: static; } .prodart.book img { max-width: 220px; } .prodart.app img { width: 40%; } }
.bkrow { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line, #d7e7e4); }
.gdrow.faraway { opacity: .7; }
.gdrow > div:first-child .pill { justify-self: start; }
.gdlink { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; margin-top: 6px; } .gdlink input { flex: 1; min-width: 220px; padding: 6px 9px; border: 1px solid var(--line, #d7e7e4); border-radius: 8px; } .gdlink small { flex-basis: 100%; }
.gdrow { flex-wrap: wrap; }

/* full Edit item window (My Stuff) */
.editdlg { width: min(720px, 94vw); max-height: 90vh; overflow: auto; }
.editdlg form { display: grid; gap: 10px; } .editdlg h2 { margin: 0 0 4px; }
.editdlg .row { display: flex; justify-content: flex-end; gap: 8px; }

/* Seller Command Center strip (My Stuff, TODO B6) */
.cmdstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 0; }
.cmd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #e3e8ee; color: inherit; text-decoration: none; }
.cmd span { font-size: 22px; } .cmd b { font-size: 22px; } .cmd small { color: #5b6672; line-height: 1.2; }
.cmd.hot { border-color: #f59e0b; background: #fff8eb; } .cmd.hot b { color: #b45309; }
@media (max-width: 760px) { .cmdstrip { grid-template-columns: repeat(2, 1fr); } }
html[data-theme="dark"] .cmd { background: var(--glass); border-color: var(--glass-line); box-shadow: 0 1px 0 rgba(94,234,212,.08), 0 6px 16px rgba(0,0,0,.35); }
html[data-theme="dark"] .cmd small { color: #a9c7c4; }
html[data-theme="dark"] .cmd.hot { border-color: #fbbf24; background: rgba(251,191,36,.14); } html[data-theme="dark"] .cmd.hot b { color: #fcd34d; }

/* one-tap replies (TODO B7) */
.quickchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.qchip { border: 1px solid var(--line, #d8e0e6); background: #fff; border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.qchip:hover { border-color: var(--blue, #0d9488); }
html[data-theme="dark"] .qchip { background: var(--glass); border-color: var(--glass-line); color: inherit; }
html[data-theme="dark"] .qchip:hover { border-color: #2dd4bf; }

/* Share Everywhere (My Stuff, TODO B8) */
.sharebtn { width: 100%; margin: 6px 0 2px; }
.sharepanel { display: grid; gap: 6px; margin: 6px 0; }
.sharepanel > a, .sharepanel > button { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; padding: 7px 10px;
  border: 1px solid var(--line, #d8e0e6); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; font: inherit; cursor: pointer; }
.sharepanel small { grid-column: 2; color: var(--muted, #5b6b73); font-size: 12px; }
.sharepanel > a:hover, .sharepanel > button:hover { border-color: var(--blue, #0d9488); }
html[data-theme="dark"] .sharepanel > a, html[data-theme="dark"] .sharepanel > button { background: var(--glass); border-color: var(--glass-line); }
html[data-theme="dark"] .sharepanel small { color: #a9c7c4; }

/* Group Health (Local Groups, TODO B9) */
.fbcheckbox { margin: 12px 0; border-color: #f59e0b; } .fbcheckbox h3 { margin: 0 0 8px; }
.chkrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line, #e3e8ee); }
.health { display: inline-block; margin-top: 4px; }

/* phone app button (footer, TODO B4) */
.getapp { border: 1px solid var(--line, #d8e0e6); background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
html[data-theme="dark"] .getapp { background: var(--glass); border-color: var(--glass-line); color: inherit; }

/* List Another Item in the My Stuff side menu (Scott 10/20) */
.sideadd { display: grid; justify-items: center; border: 1px dashed var(--line, #d8e0e6); border-radius: 12px; margin: 6px 0 8px; padding: 12px 10px; gap: 6px; }
.sideadd .plus { width: 40px; height: 40px; font-size: 22px; } .sideadd p { margin: 0; font-size: 12px; }
.sideadd .small-btn { width: 100%; }
html[data-theme="dark"] .sideadd { border-color: rgba(94,234,212,.35); }

/* app viewer - our own apps open inside UseMart with a way back (Scott 10/20) */
.viewdlg { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; }
.viewdlg[open] { display: flex; flex-direction: column; }
.viewbar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--blue, #0f7c74); color: #fff; }
.viewbar b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .viewbar a { color: #fff; font-size: 13px; }
.viewback { border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; background: #fff; color: var(--blue-dark, #0a5f59); cursor: pointer; }
.viewdlg iframe { flex: 1; width: 100%; border: 0; }
@media (max-width: 560px) { .viewbar a { display: none; } }

/* Home: Nearby Areas & Local Groups tiles (homepage mockup) */
.gnear { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.gnt { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line, #e3e8ee); border-radius: 10px; color: inherit; text-decoration: none; background: #fff; }
.gnt span { display: grid; place-items: center; height: 54px; border-radius: 8px; font-size: 28px; margin-bottom: 4px; }
.gnt b { font-size: 13px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gnt small { color: var(--soft, #5b6672); font-size: 12px; } .gnt:hover { border-color: var(--blue, #0d9488); }
html[data-theme="dark"] .gnt { background: var(--glass); border-color: var(--glass-line); }

/* Home category tiles: big square tiles like the homepage mockup (desktop / tablet; phones keep the compact row) */
@media (min-width: 761px) {
  .tiles .tile { grid-template-columns: 1fr; justify-items: start; row-gap: 4px; padding: 18px 18px 20px; min-height: 150px; }
  .tiles .tile .ti { grid-row: auto; width: 54px; height: 54px; border-radius: 14px; font-size: 28px; margin-bottom: 8px; }
  .tiles .tile b { font-size: 20px; } .tiles .tile small { font-size: 14px; }
}

/* top search button + price slider (Items for Sale mockup) */
.topsearch { display: flex; align-items: center; }
.topgo { margin-left: auto; border: 0; border-radius: 8px; padding: 7px 14px; font: inherit; font-weight: 700; background: var(--blue, #0f7c74); color: #fff; cursor: pointer; }
@media (max-width: 760px) { .topgo { padding: 6px 10px; } }
.pslide { position: relative; height: 26px; margin: 10px 4px 2px; }
.pslide input[type=range] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.pslide input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--blue, #0f7c74); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.pslide input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--blue, #0f7c74); border: 2px solid #fff; cursor: pointer; }
.pslide::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: var(--blue, #0f7c74); opacity: .5; }

/* Command Center: 5 tiles now (inventory value added 10/20) */
.cmdstrip { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .cmdstrip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .cmdstrip { grid-template-columns: repeat(2, 1fr); } }

/* Amazon 3-sales tracker (Admin) */
.amztrack { display: grid; gap: 2px; padding: 10px 12px; margin: 8px 0; border-radius: 10px; background: var(--tint2, #eef7f5); }
html[data-theme="dark"] .amztrack { background: rgba(45,212,191,.12); }

/* Central Arkansas photos on the two banners (Scott's mockups; free licences - credit shown, web/hero/CREDITS.md) */
.hero { background: linear-gradient(90deg, #f3f8fb 0%, rgba(243,248,251,.94) 40%, rgba(243,248,251,.35) 62%, rgba(243,248,251,0) 80%),
  url("hero/little_rock_skyline.webp") right 30% / cover no-repeat, var(--rays); }
.hero::after { display: none; }
html[data-theme="dark"] .hero { background: linear-gradient(90deg, rgba(10,39,48,.96) 0%, rgba(10,39,48,.88) 42%, rgba(10,39,48,.4) 66%, rgba(10,39,48,.1) 82%),
  url("hero/little_rock_skyline.webp") right 30% / cover no-repeat, var(--rays); }
.banner { position: relative; overflow: hidden; background: linear-gradient(90deg, #f3f8fb 0%, rgba(243,248,251,.92) 38%, rgba(243,248,251,.15) 66%, rgba(243,248,251,0) 80%),
  url("hero/little_rock_river.webp") right 55% / cover no-repeat; }
html[data-theme="dark"] .banner { background: linear-gradient(90deg, rgba(10,39,48,.96) 0%, rgba(10,39,48,.85) 40%, rgba(10,39,48,.25) 70%),
  url("hero/little_rock_river.webp") right 55% / cover no-repeat; }
.photocredit { position: absolute; right: 10px; bottom: 6px; z-index: 2; font-size: 10.5px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); opacity: .9; }
.photocredit a { color: #fff; }
@media (max-width: 760px) {   /* phones: the words need the room - a soft wash over the whole photo */
  .hero { background: linear-gradient(rgba(243,248,251,.88), rgba(243,248,251,.88)), url("hero/little_rock_skyline_phone.webp") center / cover no-repeat; }
  .banner { background: linear-gradient(rgba(243,248,251,.85), rgba(243,248,251,.85)), url("hero/little_rock_river_phone.webp") center / cover no-repeat; }
  html[data-theme="dark"] .hero { background: linear-gradient(rgba(10,39,48,.9), rgba(10,39,48,.9)), url("hero/little_rock_skyline_phone.webp") center / cover no-repeat; }
  html[data-theme="dark"] .banner { background: linear-gradient(rgba(10,39,48,.88), rgba(10,39,48,.88)), url("hero/little_rock_river_phone.webp") center / cover no-repeat; }
  .photocredit { font-size: 9.5px; color: #3d4b5c; text-shadow: none; } .photocredit a { color: inherit; }
}

/* D14 "From Marvel Corp" strip (switch HOUSE_STRIP) */
.housestrip { margin: 14px 28px 0; padding: 12px 16px; border: 1px solid var(--line, #e3e8ee); border-radius: 14px; background: #fff; }
.housestrip .hsrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
.housestrip .bookcards, .housestrip .appcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.house-strip #appsBox, body.house-strip #booksBox { display: none !important; }
@media (max-width: 900px) { .housestrip .hsrow { grid-template-columns: 1fr; } .housestrip { margin: 12px 16px 0; } }
html[data-theme="dark"] .housestrip { background: var(--glass); border-color: var(--glass-line); }
/* D13 */ .fbprof small { color: var(--soft, #5b6672); font-weight: 400; margin-left: 4px; }

/* Nearby Areas: one row of 4 picture tiles + compact WantFinder (homepage mockup, Scott 10/21) */
.gnear { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.gnt { padding: 4px; gap: 1px; }
.gnt img { width: 100%; aspect-ratio: 36 / 22; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 3px; }
.gnt b { font-size: 11.5px; -webkit-line-clamp: 2; } .gnt small { font-size: 10.5px; }
@media (max-width: 760px) { .gnear { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.want .wgo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.want .wgo .btn { margin: 0; white-space: nowrap; }
.want .wmax { margin: 6px 0 0; font-size: 13px; } .want .wmax summary { cursor: pointer; color: var(--blue, #0f7c74); }
.want .wmax input { margin-top: 6px; width: 100%; }
/* legal takedown request form (TODO L4) */
.tdform { display: grid; gap: 12px; max-width: 640px; }
.tdform fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; }
.tdform label { display: grid; gap: 4px; }
.tdform fieldset label, .tdform .tdsworn { display: flex; gap: 8px; align-items: flex-start; }
.tdform input:not([type=radio]):not([type=checkbox]), .tdform textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.tdform fieldset label, .tdform .tdsworn { justify-content: flex-start; text-align: left; }
.tdform input[type=radio], .tdform input[type=checkbox] { width: auto; flex: none; margin: 3px 0 0; }
/* rule 12b legal pages (Terms / Privacy / Prohibited Items) - readable text column */
.legalnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; } .legalnav a { padding: 6px 12px; border-radius: 999px; background: var(--tint); color: var(--blue); font-weight: 700; text-decoration: none; }
.legalnav a.on { background: var(--blue); color: #fff; }
.legaltext { max-width: 760px; line-height: 1.6; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; }
.legaltext h1 { font-size: 26px; margin: 0 0 4px; } .legaltext h2 { font-size: 19px; margin: 22px 0 6px; } .legaltext h3 { font-size: 16px; margin: 16px 0 4px; }
.legaltext table { border-collapse: collapse; width: 100%; margin: 8px 0; } .legaltext th, .legaltext td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
@media (max-width: 600px) { .legaltext { padding: 14px; } .legaltext table { display: block; overflow-x: auto; } }
/* My Stuff -> Legal notices (DMCA counter-notice, takedowns.ts) */
.notices .notice { border-top: 1px solid var(--line); padding: 10px 0; } .notices .notice:first-of-type { border-top: 0; }
.notices details summary { display: inline-block; cursor: pointer; margin: 4px 0; } .notices form { margin-top: 8px; }
.notices form label.chk { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; } .notices form label.chk input { width: auto; margin: 3px 0 0; flex: none; }
.ncmec summary { cursor: pointer; } .ncmec ol { margin: 10px 0 6px 18px; line-height: 1.5; } .ncmec li { margin: 4px 0; }   /* NCMEC steps (Owner controls) */
/* B14 (Scott 10/21: "All dark teal" is the default now) - the last boxes that kept a white/pink background or dark-red text in dark */
html[data-theme="dark"] .areacard { background: var(--glass-strong); border: 1px solid var(--glass-line); }
html[data-theme="dark"] .legaltext { background: var(--glass-strong); border-color: var(--glass-line); }
html[data-theme="dark"] .err, html[data-theme="dark"] small.err, html[data-theme="dark"] .switchrow small.err, html[data-theme="dark"] .revrow small.err, html[data-theme="dark"] b.err { color: #ff9b8f; }
html[data-theme="dark"] .revrow.child { background: rgba(255, 120, 110, .14); }

/* visitor counter (visits.ts, switch VISITOR_COUNTER) - footer count + admin card */
.foot .visits { font-size: 13px; font-weight: 600; opacity: .9; white-space: nowrap; }
.visittbl th { width: auto; } .visittbl td, .visittbl th { padding: 5px 10px 5px 0; } .visittbl td small { display: block; }
@media (max-width: 600px) { .visitbox #visitTable { overflow-x: auto; } }

.affn { opacity: .75; font-weight: 600; margin-left: 2px; }   /* item count per partner category (Scott 10/22) */

/* POST EVERYWHERE (everywhere.js, switch POST_EVERYWHERE, TODO A2b) - the step, Ready to post, How to buy */
.pestep { display: grid; gap: 8px; }
.petally { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--tint); font-size: 15px; }
.petally b { font-size: 20px; color: var(--blue); }
.pecard { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 8px; background: var(--card); }
.pecard.on { border-color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); }
.pecard header, .pepick { display: flex; align-items: center; gap: 10px; }
.pecard header > div, .pepick > div { flex: 1; min-width: 0; display: grid; }
.pecard header small, .pepick small { color: var(--soft); font-size: 13px; }
.pepick { flex: 1; cursor: pointer; font-weight: 400; } .pepick input, .pegroups input, .peagree input, .pedel input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--blue); }
.peic { font-size: 22px; width: 30px; text-align: center; flex: none; }
.pebox { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; background: var(--blue); color: #fff; font-size: 12px; flex: none; }
.pecard.soon { opacity: .6; } .pecard.soon .pebox { background: var(--line); color: var(--soft); }
.pecard.off { opacity: .6; }
.mgline { display: block; margin-top: 4px; color: var(--soft); font-size: 13px; } .mgline .pill { margin-right: 4px; } .mgnote { margin-top: 8px; }   /* MarketGuard (everywhere.js) */
.pegroups { display: grid; gap: 6px; margin: 8px 0 0 40px; } .pegroups .fbrow small { font-size: 13px; }
.pebody { margin-top: 10px; display: grid; gap: 8px; }
.perules { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--tint2); border: 1px solid var(--line); font-size: 14px; }
.perules div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; } .perules b { font-weight: 700; }
.pelinks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 0; } .pelinks a { color: var(--blue); font-weight: 600; font-size: 13px; }
.peagree { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--blue); }
.peneed { display: grid; gap: 4px; font-size: 14px; }
/* Ready to post */
.pehead { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); margin-bottom: 10px; }
.pehead img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: var(--tint); }
.pehead > div { flex: 1; min-width: 0; display: grid; } .pehead > div span { color: var(--blue); font-weight: 800; } .pehead small { color: var(--soft); }
.pequeue { display: grid; gap: 10px; }
.perow { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--card); }
.perow.posted { border-color: rgba(47,181,168,.55); } .perow.skipped { opacity: .6; }
.pertop { display: flex; align-items: center; gap: 10px; } .pername { flex: 1; min-width: 0; display: grid; } .pername small { color: var(--soft); font-size: 13px; }
.peacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } .peacts > a.fine { margin-left: auto; }
.pego { padding: 9px 16px; font-weight: 700; }
.pelink { display: flex; gap: 6px; flex: 1; min-width: 220px; } .pelink input { flex: 1; min-width: 0; }
.peconfirm { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--tint2); display: grid; gap: 6px; }
.pelink input, .peconfirm input, .peneed input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.pesold { padding: 14px; border-radius: 14px; border: 1px solid #f0b35b; background: rgba(240,179,91,.12); margin-bottom: 12px; }
.pesold h3 { margin: 0 0 4px; }
.pedel { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .pedel > span:not(.peic) { flex: 1; display: grid; } .pedel small { color: var(--soft); }
.pephotos { margin-top: 12px; } .peadd { margin-top: 14px; } .peadd summary { display: inline-block; cursor: pointer; list-style: none; }
.peadd[open] summary { margin-bottom: 8px; } .peadd #peAddSave { margin-top: 10px; }
.pesum:empty { display: none; }
.pebadge { display: inline-block; margin: 4px 0; padding: 4px 10px; border-radius: 999px; background: var(--tint); color: var(--blue); font-size: 13px; font-weight: 700; }
.pebadge.hot { background: rgba(240,179,91,.2); color: #b26a00; }
/* item page: How to buy (the item page wears the dark-teal look) */
.howbuy { display: grid; gap: 10px; }
.howbuy h3 { margin: 0; } .hbway { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.hbway.main { border-color: rgba(46,196,182,.55); background: rgba(46,196,182,.1); } .hbway small { opacity: .85; }
.hblinks { display: grid; gap: 6px; } .howbuy .cwlist { margin: 0; }
.howbuy .cwlink { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .pecard, html[data-theme="dark"] .perow, html[data-theme="dark"] .pehead { background: var(--glass-strong); border-color: var(--glass-line); }
html[data-theme="dark"] .pecard.on { border-color: #2dd4bf; } html[data-theme="dark"] .pebox { color: #04282d; }
html[data-theme="dark"] .pelink input, html[data-theme="dark"] .peconfirm input, html[data-theme="dark"] .peneed input { background: rgba(255,255,255,.07); color: var(--ink); }
html[data-theme="dark"] .pebadge.hot { color: #ffc773; }
@media (max-width: 600px) {
  .perules div { grid-template-columns: 1fr; gap: 0; } .pegroups { margin-left: 0; }
  .pehead { flex-wrap: wrap; } .pehead .small-btn { width: 100%; text-align: center; }
  .peacts > a.fine { margin-left: 0; } .pego { flex: 1; }
}
.howbuy .cwlist > small.fine:first-child { display: none; }   /* section 3 already says "Other ways to reach" */

/* =====================================================================================================
   BUYER INTEREST (TODO B15, web/interest.js) - Scott's buyer + seller mockup 10/22. Solid panels, no glass: crisp white
   on light pages, solid dark teal on dark ones (the item page wears dark).
   ===================================================================================================== */
.ibprev { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #fff4d6; color: #6b4e00; font-size: 13px; font-weight: 700; }
.icard.ibbuy { background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,27,45,.06); display: grid; gap: 10px; }
.icard.ibbuy h3 { margin: 0; font-size: 20px; }
.iblink { text-decoration: none; color: inherit; } .iblink small { display: block; color: var(--soft); }
.ibacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ibact { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; text-align: left; padding: 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: inherit; cursor: pointer; font: inherit; }
.ibact span { grid-row: 1 / 3; font-size: 20px; line-height: 1.2; } .ibact b { font-size: 15px; } .ibact small { color: var(--soft); font-size: 12px; }
.ibact.on { border: 2px solid var(--blue); background: var(--tint2, #eef6ff); padding: 11px; } .ibact:disabled { opacity: .5; cursor: default; }
.ibextra { display: grid; gap: 8px; } .ibextra label, .ibmsg { display: grid; gap: 4px; font-size: 14px; }
.ibextra input, .ibextra select, .ibmsg textarea { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; font: inherit; }
.ibmsg small { justify-self: end; color: var(--soft); }
.ibsend { margin-top: 0; } .ibsend:disabled { opacity: .5; cursor: default; }
.ibhold { margin: 0; padding: 8px 12px; border-radius: 10px; background: #e8f1ff; color: #1d4ed8; font-size: 14px; }
/* seller page */
.ibtop { display: grid; grid-template-columns: 300px 1fr; gap: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); margin-bottom: 16px; }
.ibphoto { aspect-ratio: 4 / 3; border-radius: 10px; background: #eef1f4 center / cover no-repeat; display: grid; place-items: center; font-size: 34px; }
.ibhead h1 { margin: 6px 0 2px; font-size: 26px; } .ibprice { font-size: 26px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.ibheadrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .ibheadbtns { margin-left: auto; display: flex; gap: 8px; }
.ibstats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 14px 0 6px; border-top: 1px solid var(--line); }
.ibstat { display: grid; justify-items: center; gap: 2px; padding: 12px 4px 4px; border-right: 1px solid var(--line); text-align: center; }
.ibstat:last-child { border-right: 0; } .ibstat span { font-size: 18px; } .ibstat b { font-size: 20px; } .ibstat small { color: var(--soft); font-size: 12px; }
.ibgrid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.ibside, .ibtips { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 8px; display: grid; gap: 2px; }
.ibtips { margin-top: 14px; padding: 14px; gap: 10px; } .ibtips h3 { margin: 0; font-size: 16px; }
.ibtips div { display: flex; gap: 8px; } .ibtips p { margin: 0; display: grid; } .ibtips small { color: var(--soft); font-size: 12px; }
.ibside a { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 14px; }
.ibside a.on { background: var(--tint2, #eef6ff); box-shadow: inset 3px 0 0 var(--blue); font-weight: 700; }
.ibside em { font-style: normal; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 12px; text-align: center; }
.ibtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.ibtabs button { border: 0; background: none; padding: 10px 14px; font: inherit; color: var(--soft); cursor: pointer; border-bottom: 3px solid transparent; }
.ibtabs button.on { color: var(--blue); border-bottom-color: var(--blue); font-weight: 700; }
.ibtabs select { margin-left: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; }
.ibcard { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px; margin-bottom: 12px; display: grid; gap: 10px; }
.ibcard header { display: flex; align-items: center; gap: 10px; }
.ibav { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #0f7c74; }
.ibwho { flex: 1; min-width: 0; display: grid; } .ibwho small { color: var(--soft); font-size: 13px; }
.ibright { display: grid; justify-items: end; gap: 4px; } .ibright small { color: var(--soft); font-size: 12px; }
.ibpill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef1f4; color: #334155; }
.ibpill.st-offer { background: #dcfce7; color: #166534; } .ibpill.st-pickup_requested { background: #fef3c7; color: #92400e; }
.ibpill.st-on_hold, .ibpill.st-pickup_confirmed { background: #dbeafe; color: #1e40af; } .ibpill.st-asked { background: #e0f2fe; color: #075985; }
.ibpill.st-sold { background: #dcfce7; color: #166534; } .ibpill.st-closed { background: #f1f5f9; color: #64748b; }
.ibbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.ibbody > div { display: grid; gap: 2px; } .ibbody small { color: var(--soft); font-size: 12px; } .ibbody b { font-size: 17px; }
.ibquote { grid-column: span 2; } .ibquote span { font-size: 14px; }
.ibbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.ibbtns .small-btn { text-align: center; text-decoration: none; padding: 8px 10px; } .ibbtns .small-btn:disabled { opacity: .55; cursor: default; }
.ibcounter { display: flex; gap: 8px; } .ibcounter input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; }
.ibempty { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; }
/* dark pages: solid dark teal (still no glass) */
html[data-theme="dark"] .icard.ibbuy, html[data-theme="dark"] .ibact, html[data-theme="dark"] .ibtop, html[data-theme="dark"] .ibside, html[data-theme="dark"] .ibtips,
html[data-theme="dark"] .ibcard { background: #0b3a42; border-color: rgba(94,234,212,.24); box-shadow: none; }
html[data-theme="dark"] .ibact.on { background: #0f4a52; border-color: #2dd4bf; }
html[data-theme="dark"] .ibextra input, html[data-theme="dark"] .ibextra select, html[data-theme="dark"] .ibmsg textarea, html[data-theme="dark"] .ibtabs select,
html[data-theme="dark"] .ibcounter input { background: #082f36; border-color: rgba(94,234,212,.24); color: var(--ink); }
html[data-theme="dark"] .ibbody { background: #082f36; } html[data-theme="dark"] .ibphoto { background-color: #082f36; }
html[data-theme="dark"] .ibside a.on { background: #0f4a52; box-shadow: inset 3px 0 0 #2dd4bf; }
html[data-theme="dark"] .ibhold { background: #0f3b5c; color: #bfdbfe; } html[data-theme="dark"] .ibprev { background: #3a3210; color: #f3e3a0; }
html[data-theme="dark"] .ibpill { background: #12464f; color: #cfe9e7; } html[data-theme="dark"] .ibpill.st-offer, html[data-theme="dark"] .ibpill.st-sold { background: #14532d; color: #bbf7d0; }
html[data-theme="dark"] .ibpill.st-pickup_requested { background: #4a3a0c; color: #fde68a; }
html[data-theme="dark"] .ibpill.st-on_hold, html[data-theme="dark"] .ibpill.st-pickup_confirmed, html[data-theme="dark"] .ibpill.st-asked { background: #1e3a8a; color: #bfdbfe; }
@media (max-width: 900px) { .ibtop, .ibgrid { grid-template-columns: 1fr; } .ibstats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ibstat:nth-child(3) { border-right: 0; } }
@media (max-width: 600px) { .ibacts { grid-template-columns: 1fr; } .ibheadbtns { margin-left: 0; width: 100%; } .ibheadbtns .small-btn { flex: 1; text-align: center; }
  .ibquote { grid-column: auto; } .ibtabs select { margin-left: 0; width: 100%; } .ibtabs button { padding: 8px 10px; } }
/* ---------------------------------------------------------------- support center (web/support.js, switch SUPPORT_CENTER) */
.helpnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.helpnav a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; text-decoration: none; }
.helpbody { display: grid; gap: 14px; max-width: 760px; }
.helpsec { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; line-height: 1.6; scroll-margin-top: 90px; }
.helpsec h2 { font-size: 20px; margin: 0 0 6px; }
.helpqa { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; } .helpqa:first-of-type { border-top: 0; margin-top: 0; }
.helpqa h3 { font-size: 16px; margin: 6px 0 4px; } .helpqa p { margin: 4px 0; } .helpqa ul, .helpqa ol { margin: 4px 0; padding-left: 22px; }
.helptable { overflow-x: auto; } .helptable table { border-collapse: collapse; width: 100%; margin: 6px 0; }
.helptable th, .helptable td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.contactform { display: grid; gap: 10px; max-width: 640px; } .contactform label { display: grid; gap: 4px; }
.contactform select, .contactform textarea, .contactform input { width: 100%; box-sizing: border-box; font: inherit; }
.supmine { border-top: 1px solid var(--line); padding: 8px 0; } .supmine:first-child { border-top: 0; } .supreply { margin: 4px 0 0 10px; }
/* SUPPORT_AI (2026-10-24a): matching help answers, the automatic answer, late items on the admin list */
.faqbox { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin: 6px 0; background: #f6fafc; display: grid; gap: 6px; }
.faqhit summary { cursor: pointer; font-weight: 600; } .faqhit p, .faqhit li { font-size: 14px; }
.supai { border: 1px solid #b9d7ea; border-radius: 8px; padding: 10px; margin: 6px 0; background: #f2f8fc; } .supai p { margin: 4px 0; }
.supaibtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.revrow.late { border-left: 4px solid #dc2626; padding-left: 10px; } .revrow.focus { outline: 2px solid var(--blue); border-radius: 8px; }
html[data-theme="dark"] .faqbox, html[data-theme="dark"] .supai { background: rgba(120, 170, 210, .10); border-color: rgba(120, 170, 210, .35); }
.suprep { margin-left: 12px; white-space: nowrap; }
.msgrep { display: block; margin-top: 2px; background: none; border: 0; padding: 0; font-size: 11px; opacity: .65; cursor: pointer; color: inherit; }
.repform { display: grid; gap: 6px; margin: 8px 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; max-width: 420px; }
.repform select, .repform input { font: inherit; }
.supbtns { display: grid; gap: 6px; min-width: 220px; } .supbtns textarea { font: inherit; width: 100%; box-sizing: border-box; }
.supctx { display: grid; gap: 4px; } .supmsg { border-left: 3px solid var(--line); padding: 4px 8px; } .supmsg.rep { border-left-color: #b42318; }
html[data-theme="dark"] .helpsec { background: var(--glass-strong); border-color: var(--glass-line); }
@media (max-width: 600px) { .helpsec { padding: 12px 14px; } .supbtns { min-width: 0; width: 100%; } .suprep { display: inline-block; margin: 6px 0 0; } }
.didyou { margin: 4px 0 10px; } .didyou a { font-weight: 600; }

/* ---------- GUIDED FIRST LISTING (web/guided.js, switch GUIDED_LISTING) - one question per screen, phone first. Solid
   panels, crisp edges, no glass. */
.ghelp { margin: 10px 0 0; }
.gpanel { max-width: 560px; }
.ghead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gprev { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: #fff4d6; color: #6b4e00; font-size: 13px; font-weight: 700; }
.gdots { display: flex; gap: 8px; margin: 14px 0 4px; }
.gdots span { flex: 1; height: 8px; border-radius: 4px; background: var(--line); }
.gdots span.done { background: var(--teal); } .gdots span.on { background: var(--blue); }
.gstepn { margin-top: 0; }
.gpanel h3 { margin: 14px 0 8px; font-size: 20px; }
.gpanel label { display: block; margin-top: 10px; }
.gpanel label.alertpick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gpanel input:not([type=checkbox]):not([type=radio]):not([type=file]), .gpanel select, .gpanel textarea { width: 100%; padding: 11px 12px; border: 1px solid #c9d4de; border-radius: 10px; background: #fff; font-size: 17px; }
.gtips { margin: 6px 0 4px; padding-left: 0; list-style: none; } .gtips li { padding: 4px 0; }
.gthumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.gthumbs figure { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; text-align: center; }
.gthumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gthumbs b { display: block; font-size: 12px; padding: 3px; background: var(--blue); color: #fff; }
.gthumbs .small-btn { width: 100%; border: 0; border-radius: 0; font-size: 12px; padding: 4px; }
.gx { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(15,27,45,.75); color: #fff; cursor: pointer; }
.gconds { display: grid; gap: 8px; }
.gcond { display: grid !important; grid-template-columns: auto 1fr; column-gap: 10px; margin: 0 !important; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.gcond input { grid-row: span 2; align-self: center; } .gcond small { color: var(--soft); } .gcond.on { border-color: var(--blue); box-shadow: 0 0 0 2px var(--tint); }
.gguide { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid #b7e3dc; border-radius: 12px; background: var(--tint2); margin-bottom: 6px; }
.gguide .gpg { font-size: 24px; font-weight: 800; color: var(--blue); } .gguide .small-btn { justify-self: start; }
.gnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.gnav .primary { margin-top: 0; width: auto; flex: 1; max-width: 260px; }
.greview { display: grid; gap: 12px; }
.gcardwrap { max-width: 240px; pointer-events: none; }
.gitem, .gexample { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.gstrip { display: flex; gap: 6px; overflow-x: auto; } .gstrip img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; flex: none; }
.gprice { font-size: 24px; font-weight: 800; margin-top: 8px; } .gtitle { font-size: 18px; }
.gexample { position: relative; margin-top: 14px; border: 2px dashed #e0a500; background: #fffdf5; }
.gexlabel { display: inline-block; padding: 3px 10px; border-radius: 6px; background: #e0a500; color: #1f1600; font-weight: 900; letter-spacing: 2px; }
.gdone .gnext { padding-left: 18px; } .gdone .gnext li { margin: 8px 0; }
@media (max-width: 600px) { .gpanel { margin: 8px 0; padding: 16px; border-radius: 12px; } .gnav .primary { max-width: none; } }
html[data-theme="dark"] .gpanel input:not([type=checkbox]):not([type=radio]):not([type=file]), html[data-theme="dark"] .gpanel select, html[data-theme="dark"] .gpanel textarea,
html[data-theme="dark"] .gcond, html[data-theme="dark"] .gitem, html[data-theme="dark"] .gthumbs figure { background: #0f3a42; border-color: rgba(255,255,255,.16); }
html[data-theme="dark"] .gexample { background: #2d2a12; } html[data-theme="dark"] .gprev { background: #3a3210; color: #f3e3a0; }
/* mission control */
/* MISSION CONTROL (web/mission.js, build 2026-10-23i): crisp solid white cards in BOTH themes (UseMart look - not glass) */
.mclink { margin: 6px 0 10px; }
.mcgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0 30px; }
.mccard { background: #ffffff; color: #0f1b2d; border: 1px solid #dfe5eb; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(15,27,45,.06); min-width: 0; }
.mccard.wide { grid-column: 1 / -1; }
.mccard h3 { margin: 0 0 10px; font-size: 17px; color: #0f1b2d; }
.mccard h4 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #5b6b7c; }
.mccard a { color: #0f7c74; font-weight: 600; }
.mcstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 6px 0; }
.mcstat { background: #f5f8fa; border: 1px solid #e4ebf1; border-radius: 8px; padding: 8px 10px; min-width: 0; }
.mcstat b { display: block; font-size: 19px; color: #0f1b2d; overflow-wrap: anywhere; }
.mcstat span { display: block; font-size: 12px; color: #5b6b7c; line-height: 1.3; }
.mcstat.warn { background: #fff4e5; border-color: #f3c27a; } .mcstat.warn b { color: #9a4b00; }
.mcstat.money b { color: #0b7a4b; }
.mcbars, .mcfunnel { display: grid; gap: 6px; }
.mcbar, .mcstep { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.mcbar small, .mcstep small { grid-column: 2 / -1; color: #5b6b7c; font-size: 11px; margin-top: -4px; }
.mcbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0f1b2d; }
.mcbt { background: #eef2f5; border-radius: 4px; height: 12px; overflow: hidden; }
.mcbt i { display: block; height: 100%; background: #0f7c74; border-radius: 4px; }
.mcstep .mcbt { height: 18px; } .mcstep .mcbt i { background: #2fb5a8; }
.mctable { width: 100%; border-collapse: collapse; font-size: 13px; color: #0f1b2d; }
.mctable th, .mctable td { text-align: left; padding: 5px 6px; border-bottom: 1px solid #edf1f4; }
.mctable th { color: #5b6b7c; font-weight: 600; font-size: 12px; }
.mcnone { color: #5b6b7c; font-style: italic; margin: 6px 0; }
.mcfine { color: #5b6b7c; font-size: 12px; } .mcwarn { color: #9a4b00; }
.mccosts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid #edf1f4; }
.mccosts h4 { flex-basis: 100%; margin: 0; }
.mccosts label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #0f1b2d; }
.mccosts input { width: 84px; background: #fff; color: #0f1b2d; border: 1px solid #cdd6de; border-radius: 6px; padding: 5px 6px; }
.mccosts .status { flex-basis: 100%; margin: 0; }
@media (max-width: 760px) { .mcgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .mccard { padding: 14px; } .mcstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mctable { font-size: 12px; } }
html[data-theme="dark"] .mccosts input { background: #fff; color: #0f1b2d; border-color: #cdd6de; }

/* STRONGER RULEBOOK (web/rulebook.js, build 2026-10-23j) */
.rbform label { display: grid; gap: 2px; font-size: .9em; }
.rbtest { display: grid; gap: 2px; margin: 6px 0; }
.revrow.rboff { opacity: .6; }

/* INVITE LINKS (web/referrals.js, build 2026-10-23k) */
.refbox #refLink { flex: 1 1 220px; min-width: 0; }
.refbox textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; border: 1px solid #cdd6de; border-radius: 6px; padding: 6px; margin: 2px 0 4px; }
#refAdmList td { vertical-align: top; } #refAdmList td .small-btn { margin: 1px 2px; }

/* DEAL NOTICES (web/notices.js, switch DEAL_NOTICES; build 2026-10-23n) - crisp solid white, no glass */
.noticepop { position: fixed; z-index: 30; top: 64px; right: 16px; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 10px; }
html[data-theme="dark"] .noticepop { background: #0e2c34; border-color: var(--glass-line); box-shadow: 0 12px 40px rgba(0,0,0,.5); }   /* was white under light text (Scott 10/25) */
.nphead { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line); }
.nphead .small-btn { margin-left: auto; }
.dnrow { display: block; padding: 9px 6px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 400; text-decoration: none; }
.dnrow:last-child { border-bottom: 0; } .dnrow:hover { background: var(--tint2); }
.dnrow.unread { font-weight: 700; } .dnrow small { display: block; font-weight: 400; }
.dnbox, .dnline { margin: 10px 0; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.dnform textarea { display: block; width: 100%; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; }

/* Snap & Sell (web/snapsell.js) */
.snapbox { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 4px 0 8px; }
.snapbox #snapNote { flex-basis: 100%; }

/* MEMBER LEVELS + STRIKES (web/standing.js, build 23w) */
.lvbadge { font-size: .75rem; padding: 1px 8px; }
.stwarn { border-left: 3px solid #d97706; padding: 6px 10px; background: rgba(217, 119, 6, .08); border-radius: 4px; }
.sthist, .lvq { margin: 6px 0; padding-left: 18px; }
.sthist li, .lvq li { margin: 4px 0; }
.lvtable td, .lvtable th { text-align: center; padding: 3px 6px; }
.lvtable td:first-child { text-align: left; }
.lvtable input[type=text], .lvtable input:not([type]) { width: 4.5em; }
.lvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; margin: 10px 0; }
.lvgrid label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lvgrid input { width: 5em; }
.lvact { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }

/* ---------------------------------------------------------------- MEMBER STICKERS + PROFILE + FOLLOW (stickers.js, build 23z) */
.stk { display: inline-block; vertical-align: middle; filter: drop-shadow(0 2px 3px rgba(15, 27, 45, .22)); }
.stk.stkoff { filter: grayscale(1) opacity(.42); }
.stkrow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; }
.stkseller { margin-top: 8px; }
.stkselleract { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.stkbuyer { padding: 6px 14px 0; }
.stkbstats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--soft); }
.stkbstats b { color: var(--ink); }
/* the pop-up */
.stkpop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(15, 27, 45, .45); padding: 16px; }
.stkpop[hidden], .stkover[hidden] { display: none; }
.stkcard { position: relative; overflow: hidden; background: #fff; border-radius: 16px; max-width: 380px; width: 100%; padding: 26px 22px 22px; text-align: center; box-shadow: 0 18px 50px rgba(15, 27, 45, .3); }
.stkcard h2 { margin: 8px 0 4px; font-size: 24px; }
.stkcard .stkname { display: block; color: #6d28d9; font-size: 19px; margin-bottom: 6px; }
.stkcard p { color: var(--soft); margin: 0 0 16px; }
.stkcard .stkok { width: 100%; font-size: 17px; padding: 12px; }
.stkbig { position: relative; z-index: 1; }
.stkx { position: absolute; top: 8px; right: 10px; z-index: 2; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--soft); }
.stkconf { position: absolute; inset: 0; pointer-events: none; }
.stkconf i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; animation: stkfall 1.9s ease-in forwards; }
@keyframes stkfall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(380px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stkconf { display: none; } }
/* Account shelf */
.stktabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 8px 0 10px; }
.stktabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 600; cursor: pointer; }
.stktabs button.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.stkprog { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.stkprog i { display: block; width: 130px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.stkprog em { display: block; height: 100%; background: #16a34a; }
.stkshelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-bottom: 8px; }
.stkcell { border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; text-align: center; background: #fff; }
.stkcell b { display: block; font-size: 13px; margin-top: 4px; }
.stkcell small { display: block; font-size: 11px; color: var(--soft); line-height: 1.3; }
.stkcell.got small { color: #16a34a; font-weight: 700; font-size: 12px; }
/* profile panel */
.stkover { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; background: rgba(15, 27, 45, .45); padding: 16px; }
.stkprof { position: relative; background: #fff; border-radius: 14px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; padding: 20px; box-shadow: 0 18px 50px rgba(15, 27, 45, .3); }
.stkprof header { display: flex; gap: 14px; align-items: center; }
.stkprof h2 { margin: 0; font-size: 22px; }
.stkprof .av.big { width: 72px; height: 72px; font-size: 30px; flex: none; }
.stkverified { display: inline-block; color: #16a34a; font-weight: 700; font-size: 14px; margin: 2px 0; }
.stkprofrow { margin: 12px 0 4px; }
.stkstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 12px 0; }
.stkstats div { background: #fff; padding: 10px 6px; text-align: center; }
.stkstats b { display: block; font-size: 20px; }
.stkstats small { color: var(--soft); font-size: 12px; }
.stkbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.stkbtns button { flex: 1; min-width: 140px; }
.stkitems { margin-top: 10px; display: grid; gap: 6px; }
.stkitems a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); }
/* owner card */
.stkadmin { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.stkadmin div { display: grid; grid-template-columns: 44px 1fr; align-items: center; column-gap: 6px; font-size: 13px; }
.stkadmin div .stk { grid-row: span 2; }
.stkadmin small { color: var(--soft); }
.stkset { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.stkset label { display: grid; font-size: 12px; color: var(--soft); gap: 2px; }
.stkset button, .stkset .status { grid-column: 1 / -1; }
@media (max-width: 560px) { .stkstats { grid-template-columns: repeat(2, 1fr); } .stkprog { margin-left: 0; } }

/* NO SIDEWAYS SLIDE ON PHONES (Scott 10/24: "the page can slide all way over ... to blank area"). The footer links
   were one unwrapped row (~960px on a 375px phone); the Shop sort / view bar and the owner tables were wider too.
   They wrap / scroll in their own box now, and html clips anything that still sticks out (clip keeps sticky headers). */
html { overflow-x: clip; }
.foot nav { flex-wrap: wrap; gap: 10px 18px; }
.bctl { flex-wrap: wrap; }
@media (max-width: 640px) {
  .vtable { display: block; overflow-x: auto; }
  .lvgrid { grid-template-columns: 1fr; }
}

/* update flash (switch UPDATE_FLASH, Scott 10/24): the logo pulses when a newer build is live - tap it to reload */
@keyframes updpulse { 0%, 100% { transform: scale(1); filter: none; } 50% { transform: scale(1.12); filter: drop-shadow(0 0 10px #2fd3c4); } }
.brand.updflash img { animation: updpulse 1.1s ease-in-out infinite; }
.brand.updflash::after { content: "Update"; margin-left: 6px; font-size: 11px; font-weight: 700; color: #fff; background: #0f7c74; border-radius: 99px; padding: 2px 7px; }
@media (prefers-reduced-motion: reduce) { .brand.updflash img { animation: none; filter: drop-shadow(0 0 6px #2fd3c4); } }

/* AI Selling Tools tiles open their tool (10/24) */
.tools .trow [data-go] { cursor: pointer; border-radius: 10px; padding: 6px; margin: -6px; }
.tools .trow [data-go]:hover, .tools .trow [data-go]:focus-visible { background: var(--tint); }

/* DARK MODE READABILITY (Scott 10/24 on the phone app: "under items for sale ... print is so dull you cant read it").
   A dark-mode sweep at phone width found light-mode colours left on dark: the page-banner line ("Find great deals ..."),
   "Try searching for", the phone photo credit, every small grey note using var(--muted) (never set for dark, so it kept
   #5b6b73), white text on the light teal Search / Create Alert buttons and on the green Log out, and the dark-green
   "✓ On your list" line. */
html[data-theme="dark"] { --muted: #a9c4c7; }
html[data-theme="dark"] .banner p, html[data-theme="dark"] .try, html[data-theme="dark"] .sub { color: #d3e6e8; }
html[data-theme="dark"] .banner p { text-shadow: 0 1px 2px rgba(0,0,0,.6); }
@media (max-width: 760px) { html[data-theme="dark"] .photocredit, html[data-theme="dark"] .photocredit a { color: #c3d9db; } }
html[data-theme="dark"] .btn, html[data-theme="dark"] .topgo, html[data-theme="dark"] #sfAv { color: #04211f; }
html[data-theme="dark"] .logout { color: #052e16; }
html[data-theme="dark"] .okline, html[data-theme="dark"] .status.ok { color: #4ade80; }

/* guided listing: "Back to my item" while looking at similar items (10/24) */
.greturn { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 900;
  background: #2dd4bf; color: #04211f; font-weight: 800; padding: 12px 22px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  text-decoration: none; white-space: nowrap; }
.greturn[hidden] { display: none; }

/* seller Delete (10/24) - red so it isn't tapped by mistake (it also needs a second tap) */
.smenu button.danger, .editdlg .danger { color: #dc2626; } .editdlg .danger { margin-right: auto; }
html[data-theme="dark"] .smenu button.danger, html[data-theme="dark"] .editdlg .danger { color: #f87171; }

/* AI Boost pop-up (10/24) */
.boostdlg { max-width: 440px; } .boostpacks { display: grid; gap: 8px; margin: 12px 0; } .boostpacks .small-btn { text-align: center; padding: 10px; font-size: 15px; }

/* Lifetime free memberships (10/24): owner box + claim page */
.lifenew { display: grid; gap: 6px; margin: 10px 0; padding: 10px; border-radius: 10px; background: var(--tint); }
.lifenew input { width: 100%; font: inherit; padding: 8px; }
.lifeclaim { max-width: 560px; margin: 30px auto; text-align: center; } .lifeclaim .primary { display: inline-block; text-decoration: none; }
.lifeperks { text-align: left; display: inline-grid; gap: 6px; margin: 10px auto 16px; }

/* "Check eBay sold prices" link beside the price box (switch EBAY_SOLD_LINK, 10/24) */
.ebaysold { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; }
.ebaysold[hidden] { display: none; }

/* PriceFinder crystal ball (Scott 10/24) - beside every price estimate, guide and check */
.pfi { width: 22px; height: 22px; vertical-align: -5px; border-radius: 6px; margin-right: 2px; }
.insight .spark.pfspark { background: none; padding: 0; overflow: hidden; } .insight .spark.pfspark img { width: 52px; height: 52px; border-radius: 12px; display: block; }

/* TIPSTER (web/tipster.js, switch TIPSTER, 10/24) - the mascot's bubble, bottom right */
.tipster { position: fixed; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 950; display: flex; align-items: flex-end; gap: 4px;
  max-width: min(420px, calc(100vw - 28px)); animation: tipin .45s cubic-bezier(.2, 1.4, .4, 1); }
.tipimg { width: 132px; height: auto; flex: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); animation: tiphop 2.4s ease-in-out infinite; }
.tipcard { position: relative; background: #fff; color: #0b3b3a; border-radius: 16px; padding: 14px 16px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border: 2px solid #2dd4bf; margin-bottom: 30px; }
.tipcard::after { content: ""; position: absolute; left: -10px; bottom: 22px; border: 8px solid transparent; border-right-color: #2dd4bf; }
.tiptitle { display: block; font-size: 15px; padding-right: 18px; } .tipbody p { margin: 6px 0; font-size: 14px; }
.tiplist { margin: 8px 0 4px; padding-left: 18px; font-size: 13.5px; display: grid; gap: 6px; } .tiplist a { font-weight: 700; color: #0f7c74; white-space: nowrap; }
.tipcard { min-width: 0; overflow-wrap: anywhere; } .tipacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .tipacts > * { flex: 1 1 auto; } .tipacts a.ghost, .tipacts a.primary { padding: 8px 14px; border-radius: 4px; text-decoration: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; } .tipacts button { padding: 8px 14px; }
.tipx { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 15px; cursor: pointer; color: #5b6b73; }
.tipmute { display: inline-block; margin-top: 6px; font-size: 11.5px; color: #5b6b73; }
@keyframes tipin { from { transform: translateY(40px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tiphop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (max-width: 480px) { .tipimg { width: 92px; } .tipcard { margin-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .tipster, .tipimg { animation: none; } }

/* MY SELLER PROFILE (web/sellerprofile.js, switch SELLER_PROFILE, 10/24) */
.spcard { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; } .spcard h3 { margin: 0; } .spcard em { margin-left: auto; font-style: normal; font-size: 24px; color: var(--muted, #5b6b73); }
.spring { --p: 0; flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#2dd4bf calc(var(--p) * 1%), var(--line) 0); } .spring b { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-size: 13px; }
.sphead { display: flex; gap: 10px; align-items: flex-end; margin: 6px 0 12px; } .sphead img { width: 86px; flex: none; }
.spbubble { flex: 1; background: var(--tint); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.spprog { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; } .spprog span { display: block; height: 100%; background: #2dd4bf; }
.sptabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .sptabs button { border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 999px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.sptabs button.on { background: #2dd4bf; color: #04211f; border-color: #2dd4bf; font-weight: 700; } .sptabs button.done:not(.on) { border-color: #2dd4bf; }
.spform { display: grid; gap: 10px; } .splabel { margin: 6px 0 0; font-weight: 600; }
.spchips { display: flex; flex-wrap: wrap; gap: 6px; } .spchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.spchip:has(input:checked) { border-color: #2dd4bf; background: var(--tint); font-weight: 600; }
.spwho { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.spwho.pub { background: rgba(45,212,191,.18); } .spwho.priv { background: rgba(148,163,184,.2); } .spwho.def { background: rgba(250,204,21,.2); }
.spseller { display: grid; gap: 2px; margin-top: 4px; } .spseller i { font-size: 13px; }

/* Tipster coming out of the U in the logo (10/24): top left, under the logo, tail pointing up at it */
.tipster.atlogo { right: auto; bottom: auto; left: 12px; top: 74px; flex-direction: row; align-items: flex-start; }
.tipster.atlogo .tipcard { margin: 34px 0 0; } .tipster.atlogo .tipcard::after { left: 18px; top: -16px; bottom: auto; border-right-color: transparent; border-bottom-color: #2dd4bf; }
.tipster.atlogo .tipimg { width: 96px; }
@media (max-width: 480px) { .tipster.atlogo { top: 64px; left: 8px; } .tipster.atlogo .tipimg { width: 70px; } }

/* My Seller Profile - dark-mode + chip fix after the live look (10/24): the step tabs were white-on-white and the chips
   inherited the full-width label / input styles (huge bubbles, words wrapped onto 2-3 lines) */
.sptabs button { background: transparent; color: inherit; }
html[data-theme="dark"] .sptabs button { background: #ffffff10; color: var(--ink); border-color: #ffffff2e; }
.spchips .spchip { display: inline-flex; flex-direction: row; align-items: center; width: auto; margin: 0; font-weight: 500; font-size: 14px; white-space: nowrap; padding: 7px 12px; }
.spchips .spchip input { width: auto; height: auto; margin: 0; padding: 0; flex: none; accent-color: #2dd4bf; }
html[data-theme="dark"] .spchip { border-color: #ffffff33; }
html[data-theme="dark"] .sptabs button.on { background: #2dd4bf; color: #04211f; border-color: #2dd4bf; }

/* PROFILE quick jumps + Data in & out (10/24) */
.pfnav { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 4px; }
.pfnav a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; text-decoration: none; color: inherit; font-size: 13px; font-weight: 600; }
.pfnav a:hover { border-color: #2dd4bf; }
.pfdata .pfcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pfdata h4 { margin: 6px 0; } .pfdata a { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; font-weight: 600; font-size: 14px; }
.pfdata a small { display: block; font-weight: 400; color: var(--muted, #5b6b73); }
#pfMe, #spCard, #pfData, #pfPlan, #pfAlerts, #pfPrivacy, #acExport { scroll-margin-top: 130px; }

/* EXTEND DAYS (10/24): the "N days left" chip + day picker */
.daysleft { border: 1px solid var(--line); background: var(--tint); color: inherit; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; margin: 4px 0; }
.extendpick { display: grid; gap: 6px; margin: 6px 0; } .extbtns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .extbtns input { width: 70px; padding: 5px 8px; margin: 0; }

/* 'Open in your browser' banner (switch BROWSER_NOTICE, 10/24) */
.iabbar { position: sticky; top: 0; z-index: 960; display: flex; gap: 10px; align-items: center; justify-content: space-between; background: #2dd4bf; color: #04211f; padding: 10px 14px; font-size: 14px; }
.iabbar[hidden] { display: none; } .iabbar button { border: 0; background: none; font-size: 16px; cursor: pointer; color: inherit; }

/* MY OTHER SHOPS (switch SHOP_LINKS, 10/24) */
.shoplist { display: grid; gap: 8px; margin: 10px 0; } .shopcard { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.shopcard > div:first-child { display: grid; gap: 3px; min-width: 0; } .shopcard a { word-break: break-all; } .shopbtns { display: flex; flex-direction: column; gap: 6px; }
.shopcode b, b.shopcode { font-family: ui-monospace, Consolas, monospace; font-size: 16px; letter-spacing: 1px; background: var(--tint); padding: 1px 6px; border-radius: 6px; }
.shopbadge { display: inline-block; margin-top: 4px; font-weight: 700; font-size: 13px; color: #0f7c74; text-decoration: none; }
html[data-theme="dark"] .shopbadge { color: #5eead4; }

/* Tipster called from the logo = a question (10/24): question box + topic buttons */
.tipask { display: flex; gap: 6px; margin: 8px 0; } .tipask input { flex: 1; margin: 0; padding: 9px 12px; border-radius: 999px; border: 1px solid #b7e7e1; font: inherit; color: #0b3b3a; background: #fff; }
.tipask button { border-radius: 999px; padding: 8px 14px; }
.tiptopics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tiptopics button { text-align: left; border: 1px solid #cfeeea; background: #f3fbfa; color: #0b3b3a; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tiptopics button:hover { border-color: #2dd4bf; }
.tipster.atlogo .tipcard { max-width: 380px; }

/* GET THE APP card on Profile (10/24) */
.pfapp { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; } .pfapp[hidden] { display: none; } .pfappic { font-size: 30px; }
.pfapp > span:nth-child(2) { display: grid; gap: 2px; flex: 1; } .pfapp button { flex: none; }

/* TIPSTER BUBBLE - UseMart teal with dark text (Scott 10/24: "text in tipster bubble is way too light - color bubble teal like
   our color and use dark text"). Every bit of text inside is forced dark so dark mode's light text colours can't fade it. */
.tipcard { background: #7fe3d3; border-color: #0f7c74; color: #042420; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.tipcard, .tipcard p, .tipcard li, .tipcard b, .tipcard small, .tipcard .fine, .tipcard .tiptitle, .tipcard .tipbody { color: #042420; }
.tipcard a, .tipcard .tiplist a { color: #063f39; font-weight: 800; text-decoration: underline; }
.tipcard .tipmute, .tipcard .tipx { color: #0b4f48; }
.tipcard::after, .tipster.atlogo .tipcard::after { border-right-color: #0f7c74; }
.tipster.atlogo .tipcard::after { border-right-color: transparent; border-bottom-color: #0f7c74; }
.tipcard .tipacts .primary { background: #0f7c74; color: #fff; border-color: #0f7c74; }
.tipcard .tipacts .ghost { background: #e9fbf8; color: #042420; border: 1px solid #0f7c74; }
.tipcard .tiptopics button { background: #e9fbf8; border-color: #0f7c74; color: #042420; }
.tipcard .tipask input { background: #fff; border-color: #0f7c74; color: #042420; }
.tipcard .tipask button { background: #0f7c74; color: #fff; }
.tipcard .small-btn { background: #e9fbf8; color: #042420; border-color: #0f7c74; }

/* TIPSTER OPENS NEAR THE MIDDLE (Scott 10/24: "make tipster open toward middle of screen"): centred side to side; the
   logo-tap question box sits in the upper middle, his own tips a little below the middle. (margin auto, not a transform,
   so his pop-in animation still works) */
.tipster, .tipster.atlogo { left: 0; right: 0; margin-inline: auto; width: fit-content; }
.tipster { bottom: max(18vh, 14px); }
.tipster.atlogo { top: max(12vh, 74px); bottom: auto; align-items: center; }
.tipster.atlogo .tipcard { margin: 0; } .tipster.atlogo .tipcard::after { display: none; }
@media (max-width: 480px) { .tipster.atlogo { top: max(10vh, 64px); left: 0; } }

/* OWNER FYI banner (10/24) - same bar as 'Open in your browser', gold so it reads as news */
.fyibar { background: #ffd56b; color: #2a1d00; font-weight: 600; }
#fyiAdmin textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border-radius: 4px; margin: 6px 0; }

/* PHOTO_ORDER in Edit item (10/24): a row of photos, the first is the main one */
.edphotorow { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.edph { position: relative; flex: none; width: 112px; display: grid; gap: 4px; }
.edph img { width: 112px; height: 112px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; }
.edph.main img { border-color: #2dd4bf; }
.edmain { position: absolute; top: 4px; left: 4px; background: #2dd4bf; color: #04211f; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.edphbtns { display: flex; gap: 4px; justify-content: center; } .edphbtns .small-btn { padding: 2px 6px; font-size: 12px; }

/* PHOTO ZOOM viewer (10/24) */
.zoomdlg { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; }
.zoomdlg::backdrop { background: rgba(0,0,0,.92); }
.zstage { position: absolute; inset: 0 0 64px 0; overflow: hidden; display: grid; place-items: center; touch-action: none; cursor: grab; }
.zstage img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-drag: none; }
.zbar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; gap: 8px; align-items: center; justify-content: center; padding-bottom: env(safe-area-inset-bottom); }
.zbar button { min-width: 44px; height: 40px; border-radius: 999px; border: 1px solid #ffffff59; background: #ffffff1f; color: #fff; font-size: 20px; cursor: pointer; }
.zbar .zn { font-size: 14px; min-width: 48px; text-align: center; }

/* Seller box: 'Verified deals' fix (Scott 10/24 "verified deals is off center or needs changed") - its own full row, one line:
   🛡 0 Verified deals (was squeezed into the avatar column and wrapped) */
.seller2 .trustbadge { grid-column: 1 / -1; justify-self: stretch; justify-content: center; padding: 8px 12px; }
.seller2 .trustbadge div { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 6px; }
.seller2 .trustbadge small { font-size: 14px; white-space: nowrap; } .seller2 .trustbadge b { font-size: 20px; } .seller2 .trustbadge span { font-size: 20px; }

/* 🔮 PriceFinder (10/24) */
.pfdlg { width: min(480px, calc(100vw - 24px)); border: 0; border-radius: 14px; padding: 18px; }
.pfdlg::backdrop { background: rgba(0,0,0,.55); }
.pfform { display: grid; gap: 10px; } .pfhead { display: flex; gap: 12px; align-items: center; } .pfhead h2 { margin: 0 0 2px; }
.pfpick { justify-self: start; cursor: pointer; } .pfthumbs { display: flex; gap: 6px; } .pfthumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.pfout:empty { display: none; } .pfspin img { vertical-align: middle; animation: tiphop 1.2s ease-in-out infinite; }
.pfresult { display: grid; gap: 2px; text-align: center; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(45,212,191,.12)); }
.pfprice { font-size: 32px; } .pfconf { font-weight: 700; color: #7c3aed; } .pfguide { margin: 8px 0 0; }
#tools [data-pf] span img { display: block; margin: 0 auto; }

.edphotos .edadd { display: inline-block; margin-top: 8px; cursor: pointer; } #edAddNote { margin-left: 8px; }

/* "Always free for buyers" at the top of Home (10/24) */
.hero .sub .freebuy { color: #2dd4bf; }

/* visitor counter in the top bar (10/24) - full on wide screens, just "👀 N" on phones */
.vtop { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; border: 1px solid #2dd4bf55; color: inherit; font-size: 13px; white-space: nowrap; }
.vtop[hidden] { display: none; } .vtop b { color: #2dd4bf; }
@media (max-width: 1499px) { .vtop .vtopw { display: none; } .vtop { padding: 5px 9px; } }   /* 10/24 "top bar squished": just the number unless the screen is very wide (hover shows the rest) */
@media (max-width: 760px) { .vtop { padding: 4px 8px; font-size: 12px; } }

/* USEMART ROUTER (10/24) */
.rthead { margin-bottom: 10px; } .rtcard .pill { margin-left: 6px; }
.rtwhy { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .rtwhy span { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: #2dd4bf1f; border: 1px solid #2dd4bf55; }
.rtbest { border-color: #2dd4bf; box-shadow: 0 0 0 2px #2dd4bf33; } .rt-no, .rt-setup { opacity: .78; }
.rttext textarea { width: 100%; box-sizing: border-box; }

/* COMMAND POST (10/24) */
.cpitems { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; margin: 8px 0 12px; }
.cpwhy ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; } .cp-due { border-color: #2dd4bf; box-shadow: 0 0 0 2px #2dd4bf33; }
.cp-skipped, .cp-cancelled { opacity: .6; }

/* CRAIGSLIST kit (10/24) */
.clkit { margin: 10px 0; } .clrow { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: start; margin: 6px 0; }
.clrow input, .clrow textarea { width: 100%; box-sizing: border-box; margin: 0; font: inherit; }
.clphotos { display: flex; flex-wrap: wrap; gap: 6px; } .clphotos img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
@media (max-width: 600px) { .clrow { grid-template-columns: 1fr auto; } .clrow > span { grid-column: 1 / -1; } }
/* Command Post item picker: box beside the name (10/24 tidy) */
.cpitems label { display: flex; align-items: center; gap: 8px; } .cpitems input { width: auto; margin: 0; flex: none; }

/* BUYERS NEAR YOU (web/demand.js, switch DEMAND_HINTS) + SELL FASTER tips (My Stuff, switch SELL_FASTER) - build 2026-10-25z */
.dhbox { display: grid; gap: 8px; margin: 10px 0; }
.dhrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dhrow small { width: 100%; }
.dhchip { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 14px; background: var(--tint2, transparent); color: var(--ink); }
.dhchip b { color: var(--blue); margin-left: 2px; }
.dhline { margin: 4px 0 8px; font-size: 14px; color: var(--ink); background: var(--tint2, transparent); border-radius: 8px; padding: 6px 10px; }
.sftips { display: grid; gap: 2px; margin: 6px 0; padding: 6px 8px; border-radius: 8px; background: var(--tint2, transparent); border: 1px solid var(--line); }
.sftips small { color: var(--ink); }

/* SPECIALTY ITEMS ADDITION (web/specialty.js, switch SPECIALTY_STICKERS) - build 2026-10-25za. The sticker sits ON TOP of the
   first photo; the photo itself is never changed. A span with a background (not an img), so no ".sphoto img" rule stretches it. */
.spk { position: absolute; z-index: 2; width: calc(26% * var(--spk, 1)); aspect-ratio: 1; background: center / contain no-repeat; pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.spk-top_left { top: 3%; left: 3%; } .spk-top_right { top: 3%; right: 3%; } .spk-bottom_left { bottom: 3%; left: 3%; } .spk-bottom_right { bottom: 3%; right: 3%; }
.spk-center_top { top: 3%; left: 50%; transform: translateX(-50%); } .spk-center_bottom { bottom: 3%; left: 50%; transform: translateX(-50%); }
.icenter .big .spk { width: calc(18% * var(--spk, 1)); }
.spkdlg { width: min(720px, calc(100vw - 24px)); border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--card, #fff); color: var(--ink); }
html[data-theme="dark"] .spkdlg { background: #0e2c34; }
.spkform { display: grid; gap: 12px; padding: 18px; } .spkform h2 { margin: 0; }
.spkprev { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; background: #0b2427 center / contain no-repeat; }
.spkheroes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .spkheroes small { width: 100%; }
.spkheroes button { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; }
.spkheroes button.on { border-color: var(--blue); } .spkheroes img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block; }
.spkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; max-height: 300px; overflow: auto; }
.spkopt { display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--ink); cursor: pointer; text-align: center; }
.spkopt img { width: 64px; height: 64px; } .spkopt small { color: var(--soft); font-size: 12px; line-height: 1.25; }
.spkopt.on { border-color: var(--blue); background: var(--tint2); box-shadow: 0 0 0 2px var(--blue) inset; }
.spknone { width: 64px; height: 64px; display: grid; place-items: center; font-size: 30px; color: var(--soft); }
.spkpos { display: flex; flex-wrap: wrap; gap: 6px; }
.spkpos button { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: none; color: var(--ink); cursor: pointer; font-size: 14px; }
.spkpos button.on { border-color: var(--blue); background: var(--tint2); font-weight: 600; }
.spksize { display: flex; align-items: center; gap: 10px; } .spksize input { flex: 1; }

/* CHECK + PREVIEW BEFORE POSTING (web/postcheck.js, switch POST_PREVIEW) - build 2026-10-25zb */
.pcdlg { width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--card, #fff); color: var(--ink); }
html[data-theme="dark"] .pcdlg { background: #0e2c34; }
.pcform { display: grid; gap: 12px; padding: 18px; } .pcform h2 { margin: 0; }
.pclist { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.pclist span { font-size: 15px; padding-left: 14px; position: relative; } .pclist span::before { content: "•"; position: absolute; left: 2px; }
.pclist.must { border-color: #e0a19b; background: rgba(179, 38, 30, .08); } .pclist.must b { color: #b3261e; }
html[data-theme="dark"] .pclist.must b { color: #ff8a80; }
.pclist.better { background: var(--tint2); } .pclist.good { background: var(--tint2); color: var(--blue); }
.pcprev { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pchero { position: relative; aspect-ratio: 4 / 3; background: #0b2427 center / contain no-repeat; display: grid; place-items: center; }
.pcnophoto { color: #9fbcc0; font-size: 18px; }
.pcthumbs { display: flex; gap: 6px; padding: 6px; overflow-x: auto; } .pcthumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.pcinfo { display: grid; gap: 6px; padding: 10px 14px 14px; } .pcinfo h3 { margin: 0; font-size: 20px; }
.pcprice { font-size: 24px; font-weight: 800; color: var(--blue); }
.pcdet { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; } .pcdesc { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pcspk { display: grid; gap: 6px; } .pcspkrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 210px; overflow: auto; }
.pcspkrow .spkopt img, .pcspkrow .spknone { width: 48px; height: 48px; }
.pcform .row button[disabled] { opacity: .5; cursor: not-allowed; }

/* AUTOMATIC AD CARDS - Share ad (web/adcards.js, switch AD_CARDS) - build 2026-10-25zc. One big Share button, 2 small ones. */
.adbtn { font-weight: 700; }
.addlg { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--card, #fff); color: var(--ink); }
html[data-theme="dark"] .addlg { background: #0e2c34; }
.adwrap { display: grid; gap: 10px; padding: 18px; } .adwrap h2 { margin: 0; }
.adsizes { display: flex; gap: 6px; } .adsizes button { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; background: none; color: var(--ink); cursor: pointer; }
.adsizes button.on { border-color: var(--blue); background: var(--tint2); font-weight: 700; }
.adimg { display: grid; place-items: center; min-height: 160px; border-radius: 12px; background: var(--tint2); overflow: hidden; }
.adimg img { display: block; width: 100%; height: auto; max-height: 52vh; object-fit: contain; }
.adshare { width: 100%; padding: 14px; font-size: 18px; border-radius: 12px; }
.adwrap .row2 { display: flex; flex-wrap: wrap; gap: 6px; } .adwrap .row2 .small-btn { flex: 1; }
.pcad { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--tint2); font-size: 15px; }

/* FB_SEND_PLUS join-first box (web/router.js) - build 2026-10-25zd */
.rtjoin { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--tint2); border: 1px dashed var(--line); }
.rtjoin p { margin: 0; }

/* HOME "Your Local Groups" (web/homegroups.js, switch MY_GROUPS_HOME) - build 2026-10-25ze */
.hgadd { display: grid; gap: 6px; margin: 10px 0 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.hgsug { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hgsug span { display: grid; min-width: 0; } .hgsug small { color: var(--soft); }

/* "Posted to" line on My Stuff cards (web/postedto.js, switch POSTED_TO) - build 2026-10-25zf */
.ptline { display: block; } .ptrow { display: block; line-height: 1.5; overflow-wrap: anywhere; }
.pt1 { white-space: nowrap; } .pt1 small { color: var(--soft); }
.ptmore { display: inline; } .ptmore summary { display: inline; cursor: pointer; color: var(--blue); }

/* DARK MODE DROPDOWNS (Scott 10/25 "all drop downs in dark mode are wrong color way to lite"): a see-through select lets
   Windows draw the open list white under the light text - give the box and its options a SOLID dark background. */
html[data-theme="dark"] select { background-color: #10282d; color: var(--ink); }
html[data-theme="dark"] select option, html[data-theme="dark"] select optgroup { background-color: #10282d; color: #e7f4f4; }
html[data-theme="dark"] select option:checked { background-color: #1f5f5a; color: #ffffff; }
html[data-theme="dark"] select:disabled, html[data-theme="dark"] select option:disabled { color: #7d9a9e; }
/* Home "Your Local Groups": the notes, "+ more" and "Add more" sit UNDER the tile grid, not inside it (homegroups.js) */
.gnearmore { display: grid; gap: 8px; margin-top: 8px; } .gnearmore:empty { display: none; } .gnearmore .hgadd { margin: 0; }

/* SHARE TO SELECTED GROUPS (web/sharequeue.js, switch SHARE_QUEUE) - build 2026-10-25zh */
.sqbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .sqbar small { flex-basis: 100%; }
.sqtick { display: inline-flex; margin-right: 8px; vertical-align: middle; } .sqtick input { width: 20px; height: 20px; }
.sqdlg { width: min(520px, calc(100vw - 24px)); border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--card, #fff); color: var(--ink); }
html[data-theme="dark"] .sqdlg { background: #0e2c34; }
.sqwrap { display: grid; gap: 10px; padding: 18px; } .sqwrap h2 { margin: 0; } .sqwrap p { margin: 0; }
.sqstyle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sqstyle select { flex: 1; min-width: 0; padding: 7px; border-radius: 8px; border: 1px solid var(--line); }
.sqmore { display: grid; gap: 6px; } .sqmorerow { display: flex; gap: 8px; align-items: center; justify-content: flex-start; padding: 4px 0; text-align: left; } .sqmorerow input { width: auto; flex: none; margin: 0; } .sqmorerow { flex-wrap: wrap; } .sqmorerow small { flex-basis: 100%; padding-left: 26px; } .sqmorerow.no { opacity: .7; }   /* N72 */
.sqstyle select { flex: 1 1 200px; } .sqstyle small { flex-basis: 100%; }   /* phones: the choice gets the room, the note goes under (10/31 phone test) */
.sqbig { width: 100%; padding: 14px; font-size: 18px; border-radius: 12px; } .sqbig:disabled { opacity: .5; cursor: not-allowed; }
.sqwait { padding: 8px 10px; border-radius: 10px; background: var(--tint2); }
.sqwrap .row2 { display: flex; flex-wrap: wrap; gap: 6px; } .sqwrap .row2 .small-btn { flex: 1; }

/* POSTVERIFY marks on Router cards (web/postverify.js, switch POST_VERIFY) - build 2026-10-25zj. The FAT green check. */
.pvmark { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 8px 0; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); }
.pvmark small { display: block; color: var(--soft); } .pvmark b { letter-spacing: .02em; } .pvmark .row2 { margin-top: 6px; }
.pvcheck { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 30px; font-weight: 900; line-height: 1; }
.pv-live { border-color: #1fa84f; background: rgba(31, 168, 79, .1); } .pv-live .pvcheck { background: #1fa84f; color: #fff; box-shadow: 0 3px 10px rgba(31, 168, 79, .45); }
.pv-live b { color: #13843c; } html[data-theme="dark"] .pv-live b { color: #5fe08e; }
.pv-wait { border-color: #e0a100; background: rgba(224, 161, 0, .08); } .pv-wait .pvcheck { background: #fff3cd; }
.pv-no { border-color: #d65b52; background: rgba(214, 91, 82, .07); } .pv-no .pvcheck { background: #fde3e1; }
.pv-ask .pvcheck { background: var(--tint2); }
.pvlink { display: flex; gap: 6px; margin-top: 6px; } .pvlink input { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); }

/* GROUP FINDER (web/groupfinder.js, switch GROUP_FINDER) - build 2026-10-25zk */
.gfentry { display: grid; gap: 6px; margin-bottom: 12px; } .gfentry p { margin: 0; } .gfentry button { justify-self: start; }
.gfdlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--card, #fff); color: var(--ink); }
html[data-theme="dark"] .gfdlg { background: #0e2c34; }
.gfwrap { display: grid; gap: 10px; padding: 18px; } .gfwrap h2, .gfwrap p { margin: 0; }
.gfask { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: var(--tint2); }
.gflist { display: grid; gap: 4px; max-height: 46vh; overflow: auto; }
.gfrow { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--line); cursor: pointer; }
.gfrow input { width: 20px; height: 20px; } .gfname { display: grid; min-width: 0; } .gfname small { color: var(--soft); }
.gfrow .pill.ok { color: #13843c; } .gfrow .pill.wait { color: #a56a00; } .gfrow .pill.no { color: #b3261e; }
html[data-theme="dark"] .gfrow .pill.ok { color: #5fe08e; } html[data-theme="dark"] .gfrow .pill.wait { color: #f0b35e; } html[data-theme="dark"] .gfrow .pill.no { color: #ff8a80; }
.gfbig { display: block; text-align: center; padding: 14px; font-size: 17px; border-radius: 12px; text-decoration: none; }
.gfwrap .row2 { display: flex; flex-wrap: wrap; gap: 6px; } .gfwrap .row2 > * { flex: 1; }

/* SELLER SETUP (web/setup.js, switch SELLER_SETUP) - build 2026-10-25zl */
.subar { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--blue); background: var(--tint2); color: var(--ink); text-decoration: none; }
.subar small { display: block; color: var(--soft); } .suarrow { margin-left: auto; font-size: 26px; color: var(--blue); }
.suring { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-weight: 800; font-size: 14px; flex: none;
  background: radial-gradient(closest-side, var(--tint2) 78%, transparent 80% 100%), conic-gradient(var(--blue) calc(var(--p) * 1%), var(--line) 0); }
.suprog { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 6px 0 14px; } .suprog span { display: block; height: 100%; background: var(--blue); }
.susteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sustep { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card, transparent); }
html[data-theme="dark"] .sustep { background: #10292f; }
.sustep p { margin: 2px 0 8px; } .sustep.next { border: 2px solid var(--blue); } .sustep.done { opacity: .85; }
.sunum { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; border: 2px solid var(--line); }
.sustep.next .sunum { border-color: var(--blue); color: var(--blue); } .sustep.done .sunum { background: #1fa84f; border-color: #1fa84f; color: #fff; font-size: 20px; }
.suact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.suchips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.suchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; }
.suchip:has(input:checked) { border-color: var(--blue); background: var(--tint2); font-weight: 600; }
.sudone { margin-top: 12px; }
/* walk-through fixes 10/25: Check & preview keeps its buttons on screen; guided "It's up" + ad window get the groups button */
.pcform > .row { position: sticky; bottom: 0; z-index: 3; margin: 0 -18px -18px; padding: 12px 18px; background: var(--card, #fff); border-top: 1px solid var(--line); }
.pcdlg { background: var(--card, #fff); } html[data-theme="dark"] .pcform > .row { background: #0e2c34; }
.adgroups { display: block; text-align: center; padding: 10px; } .gshare { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.suchip input { display: inline-block; width: auto; margin: 0; padding: 0; }   /* the general "label input" rule stretches checkboxes */
.suchip { width: auto; margin: 0; }

/* ONE ADVERTISE BUTTON (web/advertise.js, switch ADVERTISE_MENU) + GROUP RULES BOOK (web/rulesbook.js) - build 2026-10-25zm */
.advbtn { width: 100%; margin: 6px 0; padding: 10px; border-radius: 10px; font-size: 16px; }
.advdlg { width: min(560px, calc(100vw - 24px)); border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--card, #fff); color: var(--ink); }
html[data-theme="dark"] .advdlg { background: #0e2c34; }
.advwrap { display: grid; gap: 10px; padding: 18px; } .advwrap h2 { margin: 0; font-size: 20px; }
.advgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.advtile { display: grid; gap: 2px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint2); color: var(--ink); cursor: pointer; text-decoration: none; font: inherit; }
.advtile:hover { border-color: var(--blue); } .advtile small { color: var(--soft); }
.rbbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 12px; } .rbbar input#rbQ { flex: 1; min-width: 180px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); }
.rbrow { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; } .rbrow.rbmissing { border-left: 4px solid #e0a100; }
.rbhead { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; } .rbhead small { flex-basis: 100%; }
.rbrules { margin: 0; padding-left: 18px; } .rbtext { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; padding: 10px; border-radius: 8px; background: var(--tint2); font: 13px/1.45 system-ui, sans-serif; }
.rbrow > button { justify-self: start; }
.rdesk { margin-bottom: 18px; } .rdesk h3 { margin: 0 0 4px; }
.rdrow { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; } .rdrow.rbmissing { border-left: 4px solid #e0a100; }
.rdtop { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rdbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.rdpaste textarea { width: 100%; box-sizing: border-box; font: 14px/1.4 system-ui, sans-serif; margin-bottom: 6px; } #rdMore { margin-top: 10px; }

/* REVIEW FIXES 10/25 (new-user walk-through on desktop + phone) - build 2026-10-25zn */
/* Tipster: a long answer ran off the bottom of a phone and couldn't be scrolled (Scott: "when tipster is to long on phone app you
   can't scroll down to answer him") - the card now stops at the screen and scrolls inside */
.tipcard { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.tipster.atlogo .tipcard { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); }
/* "You earned a new sticker!" - a white card with pale heading text in dark mode */
html[data-theme="dark"] .stkcard { background: #0e2c34; color: var(--ink); } .stkcard h2 { color: inherit; }
html[data-theme="dark"] .stkcard .stkname { color: #c4a3ff; }
/* the menu row's scrollbar showed on phones */
.menu { scrollbar-width: none; } .menu::-webkit-scrollbar { display: none; }
/* item page seller box: Follow / followers / View profile were squeezed into a narrow column */
.seller2 .stkseller { grid-column: 1 / -1; }
/* the map's credit line covered half of the small map */
.leaflet-control-attribution { font-size: 9px !important; line-height: 1.2; max-width: 70%; opacity: .75; }
/* Seller setup bar on Home can be hidden (members who only buy) */
.subarwrap .subar { padding-right: 40px; } .subarx { position: absolute; top: 50%; transform: translateY(-50%); right: 8px; border: 0; background: none; color: var(--soft); font-size: 16px; cursor: pointer; padding: 4px; }

/* NEW LOOK for new users (web/newlook.js, switch NEW_LOOK; review A-G) - build 2026-10-25zo. Everything is under html.nl */
/* B: phone header = one row (logo · Saved · Messages · Notices · Profile) + location; was four rows */
@media (max-width: 760px) {
  html.nl .top { gap: 6px 8px; padding: 6px 12px; }
  html.nl .brand img { width: 34px; height: 34px; } html.nl .word { font-size: 20px; }
  html.nl .tagline, html.nl .whoname { display: none !important; }
  html.nl .vtop { order: 2; font-size: 12px; padding: 3px 7px; } html.nl .vtop .vtopw { display: none; }   /* the count stays, small */
  html.nl .links { order: 2; flex: 0 1 auto; margin-left: auto; gap: 2px; }
  html.nl .links .ico { font-size: 0; padding: 6px; gap: 0; } html.nl .links .ico span { font-size: 20px; }
  html.nl .signin { order: 3; padding: 5px 9px; font-size: 13px; }
  html.nl .loc { order: 4; margin-left: 0; flex: 1 1 100%; justify-content: center; padding: 4px 10px; font-size: 13px; }
  html.nl .topsearch { order: 5; flex: 1 1 100%; }
}
/* E: Home - visitor count off the header (footer keeps it); Marvel Corp apps + books below the plans */
/* E (corrected 10/25 - Scott "did i lose my visitors counter on front page"): the visitor count STAYS in the top bar (his 10/24 ask) */
.nlcorp { margin: 0 auto 24px; } .nlcorph { margin: 0 0 10px; }
.nlcorprow { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .nlcorprow > .box { margin: 0; }
/* A: item page - description card right under the photo; quick-question chips inside the Interested box */
html.nl .icenter .nldesc, html.nl .icenter .icard { margin-top: 14px; }
.nlchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
/* C: sign-up - the optional bits folded away */
.nlmore { margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.nlmore summary { cursor: pointer; font-weight: 600; } .nlmore[open] summary { margin-bottom: 8px; }
/* D + G: Wanted - how it works + examples + buyers near you */
.nlhow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 12px; }
.nlhow > div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--tint2); }
.nlhow span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; }
.nlhow small { color: var(--soft); }
@media (max-width: 560px) { .nlhow { grid-template-columns: 1fr; } }
.nlex { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; } .nlex small { width: 100%; }
.nlnear { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); }
/* F: My Stuff with nothing in it yet - a starter card instead of rows of zeros */
#mine.nlempty .cmdstrip, #mine.nlempty .stiles, #mine.nlempty .tabsrow, #mine.nlempty #mineList, #mine.nlempty .stuffbanner { display: none; }
html.nl #intakeBox:not([hidden]) ~ .stuffbanner { display: none; }   /* the two "email your items in" boxes said the same thing */
.nlstarter { display: grid; gap: 10px; justify-items: start; padding: 22px; border-radius: 16px; border: 2px solid var(--blue); background: var(--tint2); margin: 6px 0 14px; }
.nlstarter h3, .nlstarter p { margin: 0; } .nlbig { padding: 14px 22px; font-size: 18px; border-radius: 12px; text-decoration: none; }
.nlstarterlinks { display: flex; flex-wrap: wrap; gap: 8px; }

/* "NEW FROM $X" strip under the item price (web/newcompare.js, switch NEW_COMPARE) - build 2026-10-25zp */
.ncstrip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--tint2); color: var(--ink); text-decoration: none; }
.ncstrip:hover { border-color: var(--blue); } .ncnew { font-size: 20px; } .ncgo { font-size: 22px; color: var(--blue); }
.ncsave { color: #13843c; } html[data-theme="dark"] .ncsave { color: #5fe08e; }
.ncdisc { grid-column: 1 / -1; color: var(--soft); font-size: 11px; }
.ibplace { color: var(--blue); }   /* BUYER_LINE - the buyer's own place in line */

/* ITEMS FOR SALE MAP (web/mapview.js, switch MAP_SEARCH) - build 2026-10-25zq. OpenStreetMap tiles, town pins with counts */
.mapview { margin: 0 0 14px; } .mvmap { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: #cfe3e8; }
.mvmap img { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; pointer-events: none; }
.mvpin { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 0; padding: 4px 8px 6px; border: 2px solid #fff; border-radius: 12px;
  background: #0f6f67; color: #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.35); font: inherit; line-height: 1.1; }
.mvpin::after { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0f6f67; }
.mvpin b { font-size: 16px; } .mvpin small { font-size: 10px; white-space: nowrap; } .mvpin.on { background: #ff8a3d; z-index: 2; } .mvpin.on::after { border-top-color: #ff8a3d; }
.mvattr { position: absolute; right: 6px; bottom: 4px; font-size: 10px; background: #f2f4f4; color: #222; padding: 1px 5px; border-radius: 4px; }
.mvattr a { color: #222; } .mvtown { grid-column: 1 / -1; margin: 8px 0 0; }

/* 🔮 APPRAISE button (web/appraiser.js, switch APPRAISER) + Duplicate (web/sellertools.js) - build 2026-10-25zs */
.apmenu { color: #c4a3ff !important; font-weight: 700; }
.apsell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 10px; } .apsell small { flex: 1 1 200px; }
.aphome { margin: 10px 0 0; } .apchip { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid #a78bfa;
  background: rgba(124, 58, 237, .18); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; } .apchip small { font-weight: 400; color: var(--soft); }
/* the extra 🔮 Appraise link pushed "List an Item" off a laptop-width menu - a little less padding there */
@media (max-width: 1440px) and (min-width: 1021px) { .menu { gap: 2px; padding-left: 18px; padding-right: 18px; } .menu a { padding-left: 9px; padding-right: 9px; font-size: 15px; } }
/* SHARE_BUTTON (web/sharebtn.js, Scott 10/25) - one share menu for everyone */
.sbdlg .sbimg img{max-height:42vh;width:auto;max-width:100%;display:block;margin:0 auto;border-radius:10px}
.sbgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.sbgrid .small-btn{justify-content:center;text-align:center}
@media(max-width:420px){.sbgrid{grid-template-columns:repeat(2,1fr)}}
/* CLEAN_RETURN (web/fbwin.js, Scott 10/25) - back-on-UseMart bar + toast; solid colours */
.umback{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9998;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;max-width:calc(100% - 32px);background:#0f2a2e;color:#f2fbfa;border:2px solid #2bd4c4;border-radius:14px;padding:10px 14px;box-shadow:0 10px 30px #00000066;font-weight:600}
.umback[hidden],.umtoast[hidden]{display:none}
.umtoast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:9999;background:#12693f;color:#ffffff;border-radius:12px;padding:10px 16px;font-weight:700;box-shadow:0 8px 24px #00000055}
.sbdlg .sbok{font-size:1.6em;font-weight:800;color:#2bd4c4;text-align:center;margin:6px 0}.sbdlg .sbpace{text-align:center}.sbdlg .sbhow{text-align:center;margin:6px 0 0}
.sbdlg .sbimg.sbsmall img{max-height:22vh}.sbgrid2{grid-template-columns:1fr}
.advtile[data-advgo=share]{grid-column:1/-1;border-width:2px;border-color:#2bd4c4}
/* Tipster share directions (tipShareHow) */
.tiphow{margin:6px 0;border:1px solid #1aa99c;border-radius:10px;padding:6px 10px;background:#eafbf8;color:#0b2f33}.tiphow summary{cursor:pointer}.tiphow ol{margin:6px 0 2px 18px;padding:0}.tiphow li{margin:3px 0}
.sbdlg .sbstep{text-align:center;margin:8px 0}.sbdlg .sbglist{display:grid;gap:8px;max-height:40vh;overflow:auto}.sbdlg .sbglist .small-btn{justify-content:flex-start;text-align:left}.sbdlg .sbglist small{opacity:.8;margin-left:6px}
.sbdlg .sbsteps{margin:6px 0 10px 22px;padding:0}.sbdlg .sbsteps li{margin:4px 0}
/* NICE_GROUPS (web/groupsnice.js, Scott 10/25) */
.nicegroups .ngmine{border:2px solid #2bd4c4}.nicegroups .ngmine h3{margin:0}.nicegroups .ngwhat{margin:4px 0 10px}
.nicegroups #fbList [data-g]{border-left:4px solid #2bd4c4}.nicegroups #fbList [data-g] header{flex-wrap:wrap;gap:8px}
.nicegroups .ngmore{margin-top:14px;border:1px solid #2c4a50;border-radius:12px;padding:10px 14px;background:#0f2226}.nicegroups .ngmore>summary{cursor:pointer;font-weight:800;font-size:1.05em}
.nicegroups .ngmore[open]>summary{margin-bottom:10px}.nicegroups .ngempty{padding:8px 0}
.tiphowfine{font-size:.88em;color:#24474b;margin:6px 0 0}
.nicegroups #fbList [data-g] header>div:first-child{flex:1 1 340px;min-width:0}.nicegroups #fbList [data-g] header>.small-btn,.nicegroups #fbList [data-g] header>a.small-btn{flex:0 0 auto;min-width:96px;justify-content:center}
.sbdlg .sbglist .small-btn[disabled]{opacity:.55;cursor:not-allowed}
/* STATEWIDE (web/statewide.js) */
.locpop .swask{margin:0 0 8px}.locpop .geocredit{margin:8px 0 0;font-size:.78em}

/* SELLER_SETUP: the Home bar is empty once a seller finishes (or hides it) - take no space (found live 10/25: a blank 54px strip) */
#setupBar:empty{display:none}
/* Affiliates cards (Scott 10/25 "see price on amazon can be offset fix that"): the brand line is optional, so buttons sat at different
   heights - every card's text is now a column with the button pinned to the bottom; the price line stays on one line */
.pcard{display:flex;flex-direction:column}.pcard>.tx{display:flex;flex-direction:column;flex:1}.pcard>.tx>.shopret{margin-top:auto;align-self:flex-start}
.pcard>.tx>.pr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* PRICE MARK (Scott 10/26 "see price on amazon to be a logo of dollarsigns, not mention amazon"): the partner's name is not shown
   next to a price; a green $$$ badge stands for "see today's price" (screen readers hear that). The commission disclosure stays. */
.dollars{display:inline-block;font-weight:900;letter-spacing:-1px;color:#fff;background:#1f8f4e;border-radius:999px;padding:1px 9px;font-size:14px;line-height:1.5}

/* MY STORE editor (storeedit.js, N42 M4 part 1) */
.msicon{font-size:34px;line-height:1;display:grid;place-items:center;width:58px}
.mshead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px}.mshead h1{margin:0}
#seNote.ok{color:#1f8f4e;font-weight:700}#seNote.bad{color:#c62828;font-weight:700}
.msstep{margin:12px 0}.msstep h2{margin:0 0 4px;font-size:19px}.msstep label{display:block;margin:8px 0}.msstep input[type=text],.msstep label>input:not([type]){width:100%;max-width:520px}
.mslooks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
.mslook{position:relative;display:block;text-align:center;border:2px solid transparent;border-radius:12px;overflow:hidden;padding:0 0 10px;cursor:pointer;font:inherit;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.mslook.on{border-color:#1f8f4e;box-shadow:0 0 0 3px rgba(31,143,78,.3)}.mslook .bn{display:block;height:44px}
.mslook .lg{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid #fff;margin:-16px auto 4px;font-weight:800}
.mslook b{display:block;font-size:14px;padding:0 6px}.mslook small{display:block;font-size:11.5px;opacity:.75;padding:2px 8px 0;line-height:1.3}
.mslook em{position:absolute;top:6px;right:6px;background:#1f8f4e;color:#fff;font-style:normal;font-size:11px;font-weight:800;border-radius:999px;padding:1px 7px}
.msaddr{display:flex!important;align-items:center;gap:4px;max-width:520px}.msaddr span{font-weight:700;white-space:nowrap}.msaddr input{flex:1;min-width:0}
.mscolor{display:flex!important;align-items:center;gap:10px}.mscolor input{width:54px;height:38px;padding:0;border:none;background:none}
.msfeat{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.mssecs{list-style:none;padding:0;margin:8px 0;max-width:520px}.mssecs li{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--line,#e3ebe9)}.mssecs li span{flex:1;font-weight:600}
.msviews{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.msframe{border:1px solid var(--line,#e3ebe9);border-radius:12px;overflow:hidden;background:#fff;margin:0 auto}.msframe iframe{display:block;width:100%;height:720px;border:0}
.msframe.phone{max-width:390px}.msframe.pc{max-width:100%}
.mspub{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.msowner{border:2px solid #f5b700;background:rgba(245,183,0,.10);margin:10px 0}
.mscardtop{display:flex;align-items:center;gap:12px;border:2px solid #1f8f4e;margin:10px 0 14px}.mscardtop h3{margin:0;font-size:20px}.mscardtop .suarrow{margin-left:auto;font-size:26px}
.mslook .pic{display:block;width:100%;aspect-ratio:480/420;object-fit:cover;margin-bottom:8px}.mslooks{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.mspics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px;margin-top:8px}@media (max-width:640px){.mspics{grid-template-columns:1fr}}
.mspic{border:1px dashed var(--line,#cfd9d6);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.mspic img{width:100%;max-height:150px;object-fit:cover;border-radius:8px}.mspic.logo img{width:110px;height:110px;border-radius:50%;object-fit:cover}
.mspic .none{color:#8a9a9f;font-size:14px;padding:18px 0}
/* lifetime ON / OFF toggles (Scott 10/26) */
.lifetog{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:999px;padding:4px 12px 4px 4px;background:#5b6b73;color:#fff;font-weight:800;font-size:13px;cursor:pointer;vertical-align:middle;min-height:30px}
.lifetog .knob{width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}.lifetog.on{background:#1f8f4e;flex-direction:row-reverse;padding:4px 4px 4px 12px}
.lifetog.sure{background:#c62828}
/* Free Marketing Center (Scott 10/27, marketing.js) */
#marketing .sechead { flex-wrap: wrap; align-items: center; } #mkWs .seg button { padding: 6px 12px; white-space: nowrap; }
.mktest { background: #fff7d6; color: #5a4300; border: 1px solid #f0d77a; border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.mktabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.mkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mkslot { display: grid; gap: 8px; align-content: start; text-align: left; } .mkslot.off { opacity: .65; }
.mkslot.empty { border: 2px dashed var(--line); background: transparent; cursor: pointer; min-height: 150px; place-content: center; text-align: center; font: inherit; color: inherit; }
.mkslothead { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.mkbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.mkad { position: relative; border-radius: 10px; overflow: hidden; background: #10202a; color: #fff; display: grid; }
.mkad.square { aspect-ratio: 1 / 1; } .mkad.wide { aspect-ratio: 1.91 / 1; } .mkad.tall { aspect-ratio: 9 / 16; max-height: 420px; }
.mkpic { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* the picture always fits its frame (Scott 10/27): whole picture shown, blurred copy fills the rest, words below */
.mkadwrap { display: grid; border-radius: 10px; overflow: hidden; background: #10202a; color: #fff; }
.mkadwrap .mkad.fit { border-radius: 0; }
.mkblur { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(18px) brightness(.6); }
.mkimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mkcopy.below { background: #10202a; padding: 10px 12px 12px; }
.mkpic.none { background: linear-gradient(135deg, #0f7c74, #10202a 70%); }
.mkcopy { position: relative; align-self: end; display: grid; gap: 4px; padding: 12px; background: linear-gradient(transparent, rgba(0,0,0,.75) 35%); }
.mkcopy b { font-size: 18px; line-height: 1.2; } .mkcopy span { font-size: 13px; opacity: .9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mkcopy em { font-style: normal; font-weight: 800; justify-self: start; background: #2bd4c0; color: #06302c; border-radius: 6px; padding: 5px 10px; font-size: 13px; margin-top: 4px; }
.mkform { margin-top: 14px; } .mkformgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 18px; }
.mkform label { display: grid; gap: 4px; margin: 8px 0; } .mkform .mkrun { display: flex; align-items: center; gap: 8px; } .mkform .mkrun input { width: auto; }
.mkdates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mkshapes { margin: 6px 0 10px; width: max-content; }
.mksched h3 { margin: 14px 0 6px; } .mkplace { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); } .mkplace input { width: auto; margin-top: 4px; }
.mkdays { display: flex; flex-wrap: wrap; gap: 6px; } .chipbox input { display: none; } .chipbox span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.chipbox input:checked + span { background: var(--blue); color: #fff; border-color: var(--blue); }
.mkwhen { display: flex; flex-wrap: wrap; gap: 14px; } .mkwhen label { display: grid; gap: 4px; margin: 10px 0; } .mksoon { margin: 8px 0; }
.mkday { margin: 16px 0 4px; } .mkjob.turn { border-left: 4px solid #f0a020; padding-left: 10px; } .mkjob.test .mkjobst { color: #8a6d00; } .mkjob.ok .mkjobst { color: #1f8f4e; }
.mkjobst { font-weight: 700; font-size: 14px; }
.mkbsky { border: 2px solid #1185fe; margin-bottom: 12px; } .mkbsky h3 { margin: 0 0 6px; }
.commpromo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0 0 14px; }
.cpad { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: #10202a; color: #fff; text-decoration: none; }
.cppic { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; } .cptx { display: grid; gap: 4px; } .cptx b { font-size: 16px; } .cptx span { font-size: 13px; opacity: .9; }
.cptx em { font-style: normal; font-weight: 800; justify-self: start; background: #2bd4c0; color: #06302c; border-radius: 6px; padding: 4px 10px; font-size: 13px; }
.cplab { position: absolute; top: 6px; right: 8px; font-size: 11px; opacity: .75; }
.mkruns { font-size: 14px; background: rgba(43,212,192,.12); border-radius: 6px; padding: 4px 8px; justify-self: start; }
#sell.snapmode #mailIt, #sell.snapmode #dhBox { display: none; }   /* Snap mode: guide -> photos, nothing between */
.snapintro { border: 2px solid var(--blue); margin: 10px 0; } .snapintro h3 { margin: 0 0 6px; } .snapintro ol { margin: 6px 0 8px 18px; padding: 0; } .snapintro li { margin: 4px 0; }
.mkai { background: linear-gradient(135deg, #7c3aed, #2bd4c0); color: #fff; border: 0; font-weight: 700; }
@media (max-width: 700px) { .mkformgrid { grid-template-columns: 1fr; } }
html[data-theme="dark"] .mktest { background: #3a3110; color: #ffe9a3; border-color: #6b5a1c; }
/* Members - give a package (Scott 10/27) */
.mempkgs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.memchk{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:14px}.memchk input{width:18px;height:18px;margin:0}.memchk.on{border-color:#1f8f4e;background:rgba(31,143,78,.12);font-weight:700}.memnow{margin-left:4px}.mempkgs .small-btn.sure{background:#c62828;color:#fff;border-color:#c62828}.mempkgs .small-btn[disabled]{opacity:.5;cursor:not-allowed}
.msframe iframe{height:min(1100px,85vh)}
/* PROFILE ORDER (profileorder.js, Scott 10/26) */
.pfjump{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}.pfjump a{text-decoration:none;font-weight:700;font-size:14px;border:1px solid var(--line,#2c4a4a);border-radius:999px;padding:6px 12px}
.pfgroup{margin:8px 0 26px}.pfgtitle{font-size:20px;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid var(--line,#2c4a4a)}
.pfgbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:12px;align-items:start}
.pfgbody>#pfNav,.pfgbody>#pfApp,.pfgbody>#seCard,.pfgbody>#ownerArea,.pfgbody>#pfAffiliates,.pfgbody>#glanceBox,.pfgbody>#visitBox{grid-column:1/-1}
.pfgbody>.acbox,.pfgbody>form,.pfgbody>.themepick{background:var(--panel,#0f2b2d);border:1px solid var(--line,#2c4a4a);border-radius:12px;padding:12px}
/* THE STORES PAGE (stores.js, Scott 10/26): item-card format, the picture is the store's real top */
.stcard .sthero{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;overflow:visible}
.stcard .stshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.55))}
.stcard .stname{position:absolute;left:10px;right:10px;top:50%;transform:translateY(-60%);text-align:center;color:#fff;font-size:clamp(20px,2.4vw,30px);line-height:1.05;text-shadow:0 2px 10px rgba(0,0,0,.6);overflow-wrap:anywhere}
.stcard .stlogo{position:absolute;left:12px;bottom:-22px;width:52px;height:52px;border-radius:50%;border:3px solid #fff;object-fit:cover;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.3);display:grid;place-items:center;color:#fff;font-size:24px}
.stcard .tx{padding-top:28px}.stcard .sttag{color:var(--soft);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stv{color:#1f8f4e;font-weight:800}
.mstabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.stbtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin:0 0 12px}.sllook .ph{aspect-ratio:480/420;background-size:cover;background-position:top center}.sllook .tx .small-btn{margin-top:8px;display:inline-block}
.msupgrade ol{margin:8px 0 10px 18px}.msupgrade li{margin:4px 0}
/* SELLER BOX (Scott 10/26 "the format on sellers box need work, text elongated"): the seller-profile answers + linked shops landed in
   the narrow third column of .seller2 and stretched into a tall thin strip. They now run the full width, in two even columns. */
.seller2 .spseller{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:6px 14px;margin:6px 0 2px;padding-top:10px;border-top:1px solid var(--line,#24494a)}
.seller2 .spseller>i{grid-column:1/-1;font-size:14px;line-height:1.45}
.seller2 .spseller small{display:block;font-size:13.5px;line-height:1.4;color:var(--muted,#8fb3b0);overflow-wrap:anywhere}
.seller2 .spseller .shopbadge{grid-column:1/-1}
.seller2 .sinfo{min-width:0}.seller2 .sinfo b{overflow-wrap:anywhere}
/* details table: a lone detail (or an odd last one) spans both columns instead of squeezing into half (Scott 10/26 seller-box pass) */
.dettable div:only-child,.dettable div:last-child:nth-child(odd){grid-column:1/-1}
/* TIPSTER ON A PHONE (Scott 10/26 "the notes for the apps dont format right on phone"): Tipster sat squeezed behind the bubble,
   each note's title ran into its text, and "Have a question?" wrapped to 3 lines. Phones: Tipster stands ABOVE the bubble, the
   bubble uses the screen width, each note = title line / text / Show me, buttons share the row and never wrap. */
@media (max-width: 560px) {
  .tipster, .tipster.atlogo { flex-direction: column; align-items: center; gap: 0; width: calc(100vw - 20px); left: 10px; right: 10px; margin: 0; }
  .tipster .tipimg, .tipster.atlogo .tipimg { width: 78px; margin-bottom: -6px; z-index: 1; }
  .tipcard, .tipster.atlogo .tipcard { width: 100%; max-width: none; margin: 0; padding: 14px 14px 10px; }
  .tipcard::after, .tipster.atlogo .tipcard::after { display: none; }
  .tipcard .tiptitle { display: block; font-size: 17px; line-height: 1.3; padding-right: 30px; }
  .tiplist { padding-left: 0; list-style: none; gap: 10px; font-size: 15px; }
  .tiplist li { background: #b9efe6; border-radius: 10px; padding: 8px 10px; line-height: 1.4; }
  .tiplist li > b:first-child { display: block; margin-bottom: 2px; }
  .tiplist li a { display: inline-block; margin-top: 4px; }
  .tipacts { flex-wrap: nowrap; } .tipacts > * { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 8px; font-size: 15px; }
}
@media (max-width: 560px) { .tipacts > .primary { flex: 0 0 auto; padding: 10px 20px; width: auto; } .tipask button { flex: 0 0 64px; } }
.tipster.tiphelper .tipacts { flex-wrap: wrap; } .tipster.tiphelper .tipacts > * { flex: 1 1 40%; white-space: normal; text-align: center; margin-top: 0; }   /* the out-of-date Helper bubble (helpercheck.js) */
.tipacts > .primary { width: auto; }   /* the global .primary is 100% wide - in Tipster it pushed the other buttons off the card on phones (10/31) */

/* FACEBOOK GROUPS page (#legalint, web/legalint.js) + SMARTSTEP panel (web/smartstep.js) - switch LEGAL_INTEGRATION, 10/28a */
#legalint .box { margin-top: 12px; }
#legalint .pill.ok, .sspanel .pill.ok { background: #e6f6ec; color: #067647; }
.licounts { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.licounts > span { flex: 1 1 140px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.licounts b { font-size: 22px; } .licounts small { color: var(--soft); }
.litabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.litab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer; font-size: 14px; }
.litab.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.lilist { list-style: none; margin: 8px 0 0; padding: 0; }
.lilist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.lilist li > div:first-child { flex: 1 1 260px; min-width: 0; } .lilist small { display: block; }
.liacts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lipick { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; } .lipick label { display: flex; gap: 8px; align-items: center; }
.lipre { white-space: pre-wrap; word-break: break-word; background: #f6f8fa; border: 1px solid var(--line); border-radius: 8px; padding: 10px; max-height: 220px; overflow: auto; font: 14px/1.4 inherit; }
.lipost { width: 100%; box-sizing: border-box; margin-top: 6px; }
.liform { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 12px; margin: 8px 0; }
.liform label { display: flex; flex-direction: column; gap: 3px; font-size: 14px; } .liform fieldset { border: 1px solid var(--line); border-radius: 8px; }
.liform fieldset label { display: inline-flex; flex-direction: row; gap: 4px; margin-right: 10px; }
.glink { color: inherit; text-decoration: none; } .glink:hover b, .glink:focus b { text-decoration: underline; } .glink-rules { font-size: 12px; white-space: nowrap; opacity: .85; }   /* clickable group names (31zb) */
.litoday { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--tint2, rgba(45,212,191,.12)); }   /* Today's ads (31z) */
.litable { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; } .litable th, .litable td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--line); white-space: nowrap; }
.libar { display: inline-block; width: 90px; height: 8px; background: #eef1f4; border-radius: 99px; overflow: hidden; vertical-align: middle; } .libar span { display: block; height: 100%; background: #12a150; }
.sspanel { position: fixed; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border: 2px solid var(--blue);
  border-radius: 16px; box-shadow: 0 16px 50px rgba(0,0,0,.25); padding: 14px 16px; z-index: 1000; box-sizing: border-box; }
.sshead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ssprog { height: 6px; background: #eef1f4; border-radius: 99px; overflow: hidden; margin: 8px 0; } .ssprog span { display: block; height: 100%; background: var(--blue); }
.ssacts { display: flex; flex-direction: column; gap: 8px; } .ssacts .primary { margin-top: 6px; } .ssacts .small-btn { padding: 10px 12px; font-size: 15px; }
.ssn { display: inline-block; font-size: 22px; line-height: 1; vertical-align: -2px; margin-right: 4px; }
.ssnav { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ss-hl { outline: 3px solid #f79009 !important; outline-offset: 3px; border-radius: 6px; }
@media (max-width: 560px) { .sspanel { right: 8px; left: 8px; bottom: 8px; width: auto; } }
html[data-theme="dark"] .licounts > span, html[data-theme="dark"] .litab:not(.on), html[data-theme="dark"] .sspanel { background: var(--glass-strong); color: var(--ink); }
html[data-theme="dark"] .lipre, html[data-theme="dark"] .libar, html[data-theme="dark"] .ssprog { background: rgba(127,224,212,.08); color: var(--ink); }
html[data-theme="dark"] #legalint .pill.ok, html[data-theme="dark"] .sspanel .pill.ok { background: rgba(95,224,142,.16); color: #5fe08e; }
.lipick input[type=checkbox], .liform input[type=checkbox] { width: auto; flex: none; margin: 0; }
.liform label:has(> input[type=checkbox]) { flex-direction: row; align-items: center; gap: 6px; }
#signin h2:focus { outline: none; }   /* phones: the heading holds focus so the keyboard waits for a tap (10/28b) */
/* 60 FREE DAYS on the opening page + clickable plan squares (Scott 10/28, 28b) */
.hero .free60 { display: inline-block; margin: 6px 0 2px; padding: 8px 14px; border-radius: 999px; background: #facc15; color: #1a1300; font-weight: 700; text-decoration: none; box-shadow: 0 4px 14px rgba(250,204,21,.35); }
.hero .free60:hover { filter: brightness(1.06); }
a.plan { display: flex; flex-direction: column; color: inherit; text-decoration: none; cursor: pointer; position: relative; transition: transform .12s, box-shadow .12s; }
a.plan:hover, a.plan:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,124,116,.18); }
.plan .free60tag { align-self: flex-start; background: #facc15; color: #1a1300; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 9px; margin-bottom: 6px; }
.plan .planpick { margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--blue); }
/* phones: sign-in as a full-screen page, not a pop-up (28c) */
dialog#signin.sifull { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; z-index: 10000; overflow: auto; box-sizing: border-box; padding: 24px 18px 40px; background: #fff; }
html[data-theme="dark"] dialog#signin.sifull { background: #0f2f37; }
/* PHONES: "From Marvel Corp" books + apps - picture on top, words under it, 2 across (Scott 10/28 28d: "the books and aps need the
   datra rearranged so looks good mayby under pic"). Side by side, 2 to a row, left each card ~170px with the words squeezed. */
@media (max-width: 600px) {
  .housestrip { padding: 10px; }
  .housestrip .bookcards, .housestrip .appcards { gap: 8px; }
  .housestrip .bookcard, .housestrip .appcard { grid-template-columns: 1fr; justify-items: center; align-content: start; text-align: center; gap: 6px; padding: 10px 8px; }
  .housestrip .bookcard img { width: 92px; height: 146px; }
  .housestrip .bookcard div, .housestrip .appcard div { justify-items: center; }
  .housestrip .bookcard .small-btn { justify-self: center; font-size: 13px; padding: 6px 10px; }
  .housestrip .appcard img { width: 56px; height: 56px; }
  .housestrip .appcard .appopen { justify-self: center; }
}
/* Facebook groups: radius picker (25 / 50 / 75 / 100 mi) - 097 reach, 28e */
.liradius { display: inline-flex; gap: 4px; flex-wrap: wrap; } .liradius .litab { padding: 5px 10px; font-size: 13px; }
/* N52 Deal of the Day under Welcome (switch DEAL_OF_DAY, web/dotd.js): 3 across on a computer, only the first on a phone */
.dotd { margin-top: 0; } .dotd .sechead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dotdrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dotdtag { background: #ff5a1f !important; color: #fff; }
.dotdsee { font-size: 15px; color: #127a3d; }
@media (max-width: 700px) { .dotdrow { grid-template-columns: 1fr; } .dotdrow .card:nth-child(n+2) { display: none; } }
/* N48 QR price tags (switch QR_TAGS, web/qrtags.js): the picker dialog + the printed sheet (only the sheet prints) */
.qtdlg { max-width: 520px; width: calc(100% - 32px); } .qtdlg .qtsizes { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0; }
.qtdlg .qtsel { display: flex; gap: 6px; margin: 6px 0; } .qtlist { max-height: 46vh; overflow: auto; border: 1px solid var(--line, #e3e8ee); border-radius: 8px; padding: 6px 10px; }
.qtpick { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line, #eef2f5); } .qtpick span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qtdlg input[type=checkbox], .qtdlg input[type=radio] { width: auto; flex: none; margin: 0 6px 0 0; } .qtdlg .qtsizes label { display: inline-flex; align-items: center; }
#qtSheet { display: none; }
@media print {
  body.qtprinting > *:not(#qtSheet) { display: none !important; }
  html:has(body.qtprinting), body.qtprinting { background: #fff !important; }
  body.qtprinting #qtSheet { display: grid; grid-template-columns: repeat(2, 3.6in); gap: 0.15in 0.2in; justify-content: center; color: #000; }
  @page { size: letter; margin: 0.4in; }
  .qttag { border: 1.5px dashed #888; border-radius: 10px; padding: 0.12in 0.16in; box-sizing: border-box; break-inside: avoid; page-break-inside: avoid;
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand code" "title code" "price code" "scan code" "url code"; column-gap: 0.12in; align-content: start; font-family: Arial, sans-serif; }
  .qtsheet.small .qttag { height: 2.35in; } .qtsheet.large .qttag { height: 4.75in; grid-template-columns: 1fr; grid-template-areas: "brand" "title" "price" "code" "scan" "url"; text-align: center; }
  .qtbrand { grid-area: brand; font-weight: 800; color: #0a7f6f; font-size: 11pt; }
  .qttitle { grid-area: title; font-weight: 700; font-size: 12pt; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 3.6em; }
  .qtprice { grid-area: price; font-weight: 900; font-size: 22pt; margin-top: 0.04in; } .qtprice s { font-size: 12pt; font-weight: 500; color: #555; }
  .qtsheet.large .qttitle { font-size: 16pt; -webkit-line-clamp: 2; max-height: 2.4em; }
  .qttitle { min-height: min-content; }   /* overflow:hidden lets a grid row shrink below its text - keep whole lines */ .qtsheet.large .qtprice { font-size: 34pt; }
  .qtcode { grid-area: code; width: 1.55in; height: 1.55in; align-self: center; } .qtsheet.large .qtcode { width: 2.3in; height: 2.3in; justify-self: center; margin: 0.08in 0; }
  .qtcode svg { width: 100%; height: 100%; display: block; }
  .qtscan { grid-area: scan; font-size: 8.5pt; color: #333; margin-top: 0.04in; } .qturl { grid-area: url; font-size: 8.5pt; font-weight: 700; }
  .qtsheet.large .qtscan, .qtsheet.large .qturl { font-size: 11pt; }
}
/* MSG_LOOK - the new Messages panel (Scott 10/29 mockup; web/msglook.js). Crisp solid white in BOTH themes, like the mockup
   (UseMart look = crisp white, not glass) - the panel sets its own colours so the dark theme's light text can't wash it out. */
#inbox.mlook { --ink: #0f1b2d; --soft: #5b6b7c; --line: #e4ebf1; --card: #fff; --tint: #e3f4f1; --tint2: #f4f8fa; color: #0f1b2d; }
#inbox.mlook .threads a.mlrow { display: flex; padding: 12px 16px; border-radius: 0; }   /* beats the old ".threads a" block rows */
#inbox.mlook .inbox { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); min-height: 70vh; }
#inbox.mlook .threads { border-right: 1px solid var(--line); padding: 14px 0 0; max-height: none; overflow: auto; background: var(--card); }
#inbox.mlook .thread { padding: 0; display: flex; flex-direction: column; min-width: 0; background: var(--card); }
.mlhead { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; } .mlhead h2 { margin: 0; font-size: 22px; }
.mlcount, .mlbadge { background: #e5484d; color: #fff; border-radius: 999px; font-size: 12px; font-weight: 800; min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; }
.mlprev { margin-left: auto; }
.mlsearch { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--tint2); }
.mlsearch input { border: 0; background: transparent; padding: 9px 0; flex: 1; min-width: 0; color: var(--ink); outline: none; } .mlsearch span { color: var(--soft); }
.mlrow { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-left: 3px solid transparent; color: var(--ink); text-decoration: none; position: relative; }
.mlrow:hover { background: var(--tint2); } .mlrow.on { background: var(--tint); border-left-color: var(--blue); }
.mlav { width: 44px; height: 44px; flex: none; border-radius: 50%; color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 15px; }
.mlmid { flex: 1; min-width: 0; display: grid; gap: 2px; } .mltop { display: flex; justify-content: space-between; gap: 8px; } .mltop small { color: var(--soft); white-space: nowrap; }
.mlline, .mlitem { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--soft); font-size: 14px; }
.mlitem { font-size: 12px; display: flex; align-items: center; gap: 5px; } .mlitem img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
.mlwait { font-style: normal; color: #b45309; font-weight: 700; margin-left: 4px; } .mlwait.blue { color: var(--blue); }
.mlnone { padding: 16px; }
.mlempty { margin: auto; text-align: center; color: var(--soft); } .mlempty span { font-size: 44px; }
.mlbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mlback { display: none; font-size: 30px; line-height: 1; text-decoration: none; color: var(--ink); padding: 0 6px 4px 0; }
.mlwho { flex: 1; min-width: 0; display: grid; } .mlwho b { font-size: 17px; } .mlwho small { color: var(--soft); }
.mlmore { position: relative; } .mlmore summary { list-style: none; cursor: pointer; font-size: 22px; padding: 0 6px; color: var(--soft); } .mlmore summary::-webkit-details-marker { display: none; }
.mlmenu { position: absolute; right: 0; top: 30px; z-index: 5; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 220px; box-shadow: 0 8px 24px rgba(0,0,0,.18); display: grid; gap: 8px; }
.mlcard { display: flex; gap: 12px; align-items: center; margin: 12px 16px 6px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint2); color: var(--ink); text-decoration: none; }
.mlcard img, .mlnoph { width: 64px; height: 50px; border-radius: 8px; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--tint); }
.mlcard > span { min-width: 0; } .mlcard b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mlprice { color: #16a34a; font-weight: 800; } .mlcard small { color: var(--soft); }
.mldeal { margin: 0 16px; } .mldeal > summary { cursor: pointer; color: var(--soft); padding: 6px 0; font-size: 14px; } .mldeal .deal { margin-top: 4px; }
.mlmsgs { flex: 1; max-height: 52vh; padding: 10px 16px; gap: 10px; }
.mlday { text-align: center; margin: 4px 0; } .mlday span { background: var(--tint2); border: 1px solid var(--line); color: var(--soft); font-size: 12px; padding: 3px 12px; border-radius: 999px; }
.mlm { display: flex; gap: 8px; align-items: flex-end; max-width: 80%; } .mlm.mine { align-self: flex-end; flex-direction: row-reverse; } .mlm.theirs { align-self: flex-start; }
.mlm .mlav { width: 32px; height: 32px; font-size: 12px; }
.mlbub { display: grid; gap: 3px; } .mltext { padding: 10px 14px; border-radius: 16px; background: var(--tint2); border: 1px solid var(--line); color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.mlm.mine .mltext { background: #d9f5e3; border-color: #bfe9cf; color: #0f1b2d; border-bottom-right-radius: 4px; } .mlm.theirs .mltext { background: #f1f4f7; } .mlm.theirs .mltext { border-bottom-left-radius: 4px; }
.mlbub small { color: var(--soft); font-size: 11px; } .mlm.mine .mlbub small { text-align: right; } .mlread { color: #16a34a; font-weight: 700; } .mlsent { opacity: .6; }
.mlacts { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 16px 0; }
.mlact, #inbox.mlook .qchip { font-size: 14px; } .mlact { border-radius: 999px; padding: 7px 14px; font-weight: 700; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.mlact.offer { background: #e8f0ff; border-color: #c9d9ff; color: #1d4ed8; } .mlact.pick { background: #f3e8ff; border-color: #e2ccff; color: #7e22ce; }
#inbox.mlook .quickchips { padding: 6px 16px 0; } #inbox.mlook .qchip { border-radius: 999px; background: #e7f7ee; border: 1px solid #c3ead3; color: #0f6b3a; }
.mlreply { border-top: 0; padding: 10px 16px; align-items: center; } .mlreply input { border-radius: 999px; padding: 12px 16px; background: var(--tint2); color: var(--ink); }
.mlreply button { width: 46px; height: 46px; padding: 0; border-radius: 50%; background: #16a34a; font-size: 18px; flex: none; }
.mlsafe { margin: 0 16px 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--soft); font-size: 13px; }
/* phone: one pane at a time - the list, or the open chat with a back arrow */
@media (max-width: 760px) {
  #inbox.mlook .inbox { grid-template-columns: 1fr; border-radius: 12px; min-height: 0; }
  #inbox.mlook .threads { border-right: 0; } #inbox.mlook.mlopen .threads { display: none; } #inbox.mlook:not(.mlopen) .thread { display: none; }
  .mlback { display: inline-block; } .mlm { max-width: 88%; } .mlmsgs { max-height: none; }
}
/* N48 vacation mode (switch VACATION_MODE, web/vacation.js) */
.vacbanner { margin: 8px 0; padding: 12px 14px; border-radius: 12px; background: #fff7e0; border: 1px solid #f3d27a; color: #5b4300; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#vacDlg label { display: grid; gap: 4px; margin: 8px 0; }
/* N48 bulk edit (switch BULK_EDIT, web/bulkedit.js) - reuses the QR dialog look */
#beDlg .beline { display: flex; gap: 10px; align-items: center; margin: 6px 0; } #beDlg .beline select, #beDlg .beline input { flex: 1; min-width: 0; }
.bepick { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line, #eef2f5); }
.bepick span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bepick em { font-style: normal; }
.bepick .benew { min-width: 70px; text-align: right; color: #16a34a; } .bepick.beskip { opacity: .55; }
#beDlg input[type=checkbox] { width: auto; flex: none; margin: 0 6px 0 0; }
/* MY STUFF SQUARES (Scott 10/29 "my stuff squares are not right"): the top strip (.cmd) now uses the same layout as the
   square row under it (.stile) - icon left, number on top, label under it - so long labels never squeeze into a narrow
   column; every square the same height. On a phone (2 across) an odd last square stretches across the row. */
.cmdstrip, .stiles { align-items: stretch; }
.cmd { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-height: 64px; }
.cmd span { grid-row: span 2; align-self: center; } .cmd b { line-height: 1.1; } .cmd small { font-size: 13px; }
.stile { min-height: 64px; align-content: center; }
@media (max-width: 1100px) { .cmdstrip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .cmdstrip, .stiles { grid-template-columns: repeat(2, 1fr); }
  .cmdstrip > :last-child:nth-child(odd), .stiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* SELLER TOOLS bar */
.toolbar { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.tbhead { display: block; margin-bottom: 8px; }
.tbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tbtool { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--tint2, #f0faf8); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; text-align: center; }
.tbtool:hover { border-color: var(--blue); }
html[data-theme="dark"] .toolbar { background: var(--glass); border-color: var(--glass-line); }
html[data-theme="dark"] .tbtool { background: #173431; border-color: var(--glass-line); color: var(--ink); }
@media (max-width: 560px) { .tbgrid { grid-template-columns: repeat(2, 1fr); } }
/* N48 my items on my website (switch EMBED_WIDGET, web/embedwidget.js) */
#ewDlg { max-width: 760px; }
#ewDlg textarea { width: 100%; box-sizing: border-box; font: 13px/1.4 ui-monospace, Consolas, monospace; }
.ewprev { max-height: 360px; overflow: auto; border-radius: 14px; }
#ewDlg .row { flex-wrap: wrap; } #ewDlg .row button { white-space: nowrap; flex: 0 0 auto; }
/* BATCH SNAP & SELL (switch BATCH_SNAP, web/batchsnap.js) */
.bslist { display: grid; gap: 12px; margin: 12px 0; }
.bsrow { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px; }
.bsrow > img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; }
.bsrow.done { opacity: .8; }
.bsf { display: grid; gap: 6px; min-width: 0; }
.bsf input:not([type=checkbox]), .bsf select, .bsf textarea { width: 100%; box-sizing: border-box; }
.bsline { display: grid; grid-template-columns: 1fr 1fr 120px; gap: 6px; }
.bstick, .bsget label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.bstick input, .bsget input { display: inline-block; width: auto; margin: 0; }
.bsget { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.bsPick { display: inline-block; cursor: pointer; }
@media (max-width: 640px) {
  .bsrow { grid-template-columns: 84px 1fr; } .bsrow > img { width: 84px; height: 84px; }
  .bsline { grid-template-columns: 1fr 1fr; } .bsline input { grid-column: 1 / -1; }
}
/* DAILY POSTS - owners (switch DAILY_POSTS, web/dailyposts.js) */
.dpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; }
.dpcard { border: 1px solid var(--line, #e2e8f0); border-radius: 12px; padding: 10px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.dpcard img, .dpnoimg { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: #f1f5f9; }
.dpnoimg { display: grid; place-items: center; color: #64748b; }
.dpcard textarea { width: 100%; font: inherit; font-size: 13px; resize: vertical; }
.dpmeta { font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* FOLLOW ON FACEBOOK (switch FB_FOLLOW, web/fbfollow.js) */
.fbfollow { background: #1877f2; color: #fff !important; border-color: #1877f2; font-weight: 700; white-space: nowrap; }
.fbfline { margin: 10px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.4; }
.fbfprev { color: var(--muted, #64748b); font-size: 12px; margin-left: 6px; }
.fbfbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; max-width: min(640px, calc(100vw - 24px)); padding: 12px 40px 12px 16px; background: #fff; color: #0f172a;
  border: 1px solid var(--line, #e2e8f0); border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); font-size: 14px; }
.fbfbar .fbfx { position: absolute; right: 8px; top: 8px; border: 0; background: none; font-size: 16px; cursor: pointer; color: #64748b; }
@media (max-width: 640px) { .fbfbar { bottom: 76px; } }

/* START SELLING landing page (switch START_SELLING, web/startselling.js) */
.sshero { padding: 28px 24px; border-radius: 16px; background: var(--rays); color: #fff; margin: 12px 0 20px; }
.sshero h1 { margin: 0 0 8px; font-size: clamp(26px, 5vw, 40px); line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sshero .sslead { font-size: 18px; margin: 0 0 16px; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sssteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0; list-style: none; counter-reset: ss; }
.sssteps li { counter-increment: ss; padding: 14px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 4px; }
.sssteps li::before { content: counter(ss); font-weight: 800; font-size: 22px; color: var(--teal); }
.sstools { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sstool { display: grid; gap: 4px; } .sstool span { font-size: 26px; }
.ssfaq details { padding: 10px 0; border-bottom: 1px solid var(--line); } .ssfaq summary { cursor: pointer; font-weight: 600; }
.ssend { margin: 20px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
@media (max-width: 640px) { .sssteps { grid-template-columns: 1fr; } .sshero { padding: 20px 16px; } }
/* N48 My buyers - seller mini-CRM (switch SELLER_CRM, web/crm.js) */
#crmDlg { max-width: 720px; width: calc(100% - 24px); }
#crmFind { width: 100%; box-sizing: border-box; margin: 6px 0 10px; }
.crmrow { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.crmtop { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.crmitems { display: flex; flex-wrap: wrap; gap: 6px; }
.crmrow textarea { width: 100%; box-sizing: border-box; }

/* N58 seller card in the right margin of the item page (web/sellerpanel.js, switch SELLER_PANEL). sellerpanel.js measures the
   empty margin right of the page and shows the card ONLY when it fits (class "on" + width); otherwise it stays hidden, so
   smaller screens and phones keep today's layout. */
#item { position: relative; }
.selpside { display: none; }
.selpside.on { display: block; position: absolute; top: 36px; bottom: 0; }
.selpcard { position: sticky; top: 130px; display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: linear-gradient(160deg, rgba(14,74,76,.55), rgba(8,40,44,.75));
  border: 1px solid rgba(46,196,182,.28); box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 13px; max-height: calc(100vh - 150px); overflow: auto; }
.selptop { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }
.selptop .av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; background: linear-gradient(135deg, #14a99c, #2a6fdb); color: #fff; }
.selptop b { display: block; font-size: 15px; overflow-wrap: anywhere; } .selptop .lvbadge { margin-top: 3px; display: inline-block; } .selptop small { display: block; opacity: .8; }
.selprep { line-height: 1.4; }
.selpdeals { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(46,196,182,.5); background: rgba(46,196,182,.08); }
.selpdeals small { display: block; opacity: .8; } .selpdeals b { font-size: 18px; }
.selpfacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.selpbtns { display: grid; gap: 6px; } .selpbtns > * { width: 100%; box-sizing: border-box; text-align: center; justify-content: center; }
.selpbtns button.primary { padding: 10px; border-radius: 10px; font-weight: 700; }
.selpmorehead { font-weight: 700; } .selpmorehead small { font-weight: 400; opacity: .8; }
.selpmoregrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.selpmore { display: grid; gap: 2px; text-decoration: none; color: inherit; font-size: 12px; text-align: center; }
.selpph { aspect-ratio: 1; border-radius: 10px; background-color: #0b2427; background-position: center; background-size: cover; background-repeat: no-repeat; border: 1px solid rgba(46,196,182,.25); display: grid; place-items: center; font-size: 22px; }
.selpmore:hover .selpph { border-color: #2ec4b6; }
.selpprev { color: #ffd166; font-weight: 700; }

/* PUBLIC REVIEWS (publicreviews.js, switch PUBLIC_REVIEWS) - what people say on a profile + the member's one reply */
.prvbox { margin-top: 14px; border-top: 1px solid #e6e6e6; padding-top: 10px; text-align: left; }
.prvbox h3 { margin: 0 0 6px; font-size: 1.05rem; }
.prvbox h3 small { font-weight: 400; color: #666; }
.prvtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.prvlist { list-style: none; margin: 0 0 8px; padding: 0; max-height: 48vh; overflow-y: auto; }
.prvrev { padding: 9px 0; border-bottom: 1px solid #f0f0f0; }
.prvrev:last-child { border-bottom: 0; }
.prvhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.prvnote { margin: 5px 0 0; font-size: .95rem; }
.prvreply { margin: 6px 0 0 12px; padding: 6px 10px; border-left: 3px solid #d32f2f; background: #fafafa; border-radius: 0 6px 6px 0; }
.prvreply small { color: #666; font-weight: 600; }
.prvreply p { margin: 2px 0 0; font-size: .93rem; }
.prvans { margin-top: 6px; }
.prvans textarea { width: 100%; box-sizing: border-box; }
.dpsocial { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 4px; font-size: .95rem; }
.dpsocial input { margin-top: 3px; }
/* My Stuff (Scott 10/31 "the advertise button goes all over the place and not uniform"): every card's 📣 Advertise button
   + the bottom row (views / Edit) sit at the BOTTOM of the card, so they line up across a row whatever is above them
   (a 2-line title, Sell faster tips, Posted-to line...). Cards in a row are already the same height (grid stretch). */
.scard > .sbody { display: flex; flex-direction: column; flex: 1 1 auto; }
.scard > .sbody > .advbtn { margin: auto 0 0; padding: 11px; border-radius: 10px; font-size: 16px; font-weight: 700; min-height: 44px; }
.scard > .sbody > .sfoot { margin-top: auto; padding-top: 8px; }
.scard > .sbody > .advbtn ~ .sfoot { margin-top: 8px; }
.scard > .sbody > .stitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* USEMART REWARDS (badges.js, switch ACHIEVEMENTS) - colours from Scott's badge sheets: navy + blue light, tier metals */
#rewards { --bdg-bg: #0b1730; --bdg-card: #10213f; --bdg-line: rgba(120, 180, 255, .22); }
.bdgtitle { text-align: center; margin: 6px 0 14px; } .bdgtitle h1 { margin: 0; } .bdgtitle p { margin: 2px 0 0; color: #5b6b73; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; font-weight: 700; }
#rewardsBody section { background: var(--bdg-bg); color: #e8f0ff; border: 1px solid var(--bdg-line); border-radius: 16px; padding: 14px 16px; margin: 12px 0;
  background-image: radial-gradient(circle at 50% -20%, rgba(70, 150, 255, .25), transparent 60%); }
#rewardsBody section h3 { margin: 0 0 10px; } #rewardsBody section h3 small { font-weight: 400; color: #9fb4d8; }
#rewardsBody section .fine, #rewardsBody section small { color: #9fb4d8; }
.bdghero { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; align-items: stretch; }
.bdgtiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bdgtiles > div { background: #0b1730; color: #fff; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(120, 180, 255, .22); }
.bdgtiles b { font-size: 26px; color: #ffd76a; } .bdgtiles small { color: #9fb4d8; }
.bdgnext { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #10213f, #1b2f63); color: #fff; border-radius: 14px; padding: 14px; border: 1px solid #ffd76a55; cursor: pointer; }
.bdgnext > div { display: flex; flex-direction: column; gap: 3px; flex: 1; } .bdgnext small { color: #ffd76a; font-weight: 700; letter-spacing: .06em; } .bdgnext b { font-size: 20px; }
.bdgnext .fine { color: #c7d6f2; }
.bdgbar { display: block; height: 8px; border-radius: 6px; background: #26385e; overflow: hidden; width: 100%; margin: 4px 0 2px; }
.bdgbar i { display: block; height: 100%; background: linear-gradient(90deg, #2ee6c8, #ffd76a); border-radius: 6px; }
.bdgbar.big { height: 12px; }
.bdgcaserow, .bdgrow { display: flex; gap: 12px; flex-wrap: wrap; }
.bdgslot { width: 120px; height: 140px; border: 2px dashed rgba(120, 180, 255, .3); border-radius: 14px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; }
.bdgslot span { color: #9fb4d8; font-size: 12px; } .bdgslot.on { border-style: solid; border-color: #ffd76a88; cursor: pointer; }
.bdgcats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.bdggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.bdggrid.small { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: 55vh; overflow-y: auto; }
.bdgcell { background: #10213f; border: 1px solid rgba(120, 180, 255, .22); border-radius: 14px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: #e8f0ff; font: inherit; }
.bdgcell:not(.on) .bdgmed, .bdgcell:not(.on) .bdgimg { filter: grayscale(.85) brightness(.75); }
.bdgcell.soon { opacity: .55; } .bdgcell.picked { outline: 3px solid #2ee6c8; } .bdgok { color: #2ee6c8 !important; font-weight: 700; }
.bdgimg { object-fit: contain; display: block; }
/* the tier medallion (stands in until Scott's art is uploaded) */
.bdgmed { --s: 96px; position: relative; width: var(--s); height: calc(var(--s) * 1.08); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.bdgring { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: calc(var(--s) * .86); height: calc(var(--s) * .86); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), var(--m); box-shadow: 0 0 calc(var(--s) * .14) var(--glow), inset 0 0 0 calc(var(--s) * .05) #0b1730, inset 0 0 0 calc(var(--s) * .08) var(--edge); }
.bdgico { position: absolute; top: calc(var(--s) * .14); font-size: calc(var(--s) * .38); line-height: 1; filter: drop-shadow(0 2px 2px #0008); }
.bdgplate { position: absolute; bottom: calc(var(--s) * .12); left: 50%; transform: translateX(-50%); max-width: calc(var(--s) * 1.02); width: max-content; padding: 2px 6px;
  background: linear-gradient(#1b2b52, #0b1730); border: 1px solid var(--edge); border-radius: 6px; color: #fff; font-weight: 800; font-size: calc(var(--s) * .105); line-height: 1.1;
  text-transform: uppercase; text-align: center; white-space: normal; letter-spacing: .02em; box-shadow: 0 2px 4px #0008; }
.bdgstars { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: var(--edge); font-size: calc(var(--s) * .1); letter-spacing: 1px; white-space: nowrap; text-shadow: 0 0 4px var(--glow); }
.t-bronze { --m: radial-gradient(circle, #c98a52, #7a4a24); --edge: #e2a46a; --glow: #c9853f88; }
.t-silver { --m: radial-gradient(circle, #e9eef5, #8b97a8); --edge: #dfe6f0; --glow: #b8c6dc99; }
.t-gold { --m: radial-gradient(circle, #ffe08a, #b8860b); --edge: #ffd76a; --glow: #ffcc4099; }
.t-platinum { --m: radial-gradient(circle, #8fd3ff, #1f5fbf); --edge: #8fd3ff; --glow: #3fa2ff99; }
.t-diamond { --m: radial-gradient(circle, #e2a8ff, #6b21a8); --edge: #d79bff; --glow: #b04bff99; }
.pill.t-bronze, .pill.t-silver, .pill.t-gold, .pill.t-platinum, .pill.t-diamond { background: var(--edge); color: #0b1730; font-weight: 800; }
/* pop-up, celebration */
.bdgover { position: fixed; inset: 0; background: rgba(5, 12, 28, .78); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.bdgpop { position: relative; background: #0b1730; color: #e8f0ff; border: 1px solid #ffd76a66; border-radius: 18px; padding: 22px; width: min(460px, 100%); text-align: center;
  background-image: radial-gradient(circle at 50% 0%, rgba(70,150,255,.35), transparent 60%); max-height: 90vh; overflow-y: auto; overflow-x: hidden; }
.bdgpop h2 { margin: 6px 0; color: #fff; } .bdgpop .fine { color: #9fb4d8; } .bdgpop .stkx { color: #fff; }
.bdgbig { display: flex; justify-content: center; margin: 4px 0; } .bdgbig.pop { animation: bdgpop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.bdgwow { font-size: 22px; font-weight: 800; color: #ffd76a; margin: 0; }
@keyframes bdgpop { from { transform: scale(.2) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.bdgconfetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bdgconfetti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; animation: bdgfall 2.4s ease-in forwards; }
@keyframes bdgfall { to { transform: translateY(560px) rotate(540deg); opacity: 0; } }
/* small featured row on profiles + seller card */
.bdgmini { display: flex; align-items: center; gap: 4px; margin-top: 4px; } .bdgmini small { color: #5b6b73; font-weight: 700; }
.bdgminione { display: inline-flex; } .bdgminione .bdgplate, .bdgminione .bdgstars { display: none; }
@media (max-width: 700px) { .bdghero { grid-template-columns: 1fr; } .bdggrid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bdgbig.pop, .bdgconfetti i { animation: none; } .bdgconfetti { display: none; } }
.bdgcats > button { width: auto; flex: 0 0 auto; margin: 0; }
.bdgslot { width: 112px; height: 132px; }

/* USEMART CHAMPIONS (champions.js, switch CHAMPIONS) - recurring titles look different: crown gold, month plate, x N */
.chbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 6px 0 12px; } .chbar select { margin-left: 6px; }
.chgroup { background: #0b1730; color: #e8f0ff; border: 1px solid #ffd76a55; border-radius: 16px; padding: 14px 16px; margin: 12px 0;
  background-image: radial-gradient(circle at 50% -10%, #3a2a0a, #0b1730 60%); }
.chgroup h2 { margin: 0 0 10px; color: #ffd76a; } .chgroup h2 small, .chgroup .fine, .chgroup small { color: #b9c7e2; } .chgroup h3 { color: #fff; margin: 14px 0 6px; }
.chgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.chcard { background: #10213f; border: 1px solid #ffd76a44; border-radius: 14px; padding: 10px 12px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chcard h3 { margin: 2px 0; font-size: 1.02rem; color: #fff; } .chcard.soon { opacity: .6; }
.chcard a { color: #ffd76a; font-weight: 700; }
.chwho { margin: 2px 0; display: flex; flex-direction: column; } .chwho.none { color: #b9c7e2; font-size: .9rem; }
.chhist { width: 100%; text-align: left; } .chhist summary { cursor: pointer; color: #b9c7e2; } .chhist ul { margin: 6px 0 0; padding-left: 18px; }
.chart { --s: 150px; position: relative; display: inline-block; width: var(--s); height: var(--s); flex: 0 0 auto; }
.chart img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chnoart { font-size: calc(var(--s) * .5); line-height: var(--s); }
.chplate { position: absolute; left: 50%; top: 75.5%; transform: translate(-50%, -50%); background: linear-gradient(#ffe08a, #e0a82e); color: #3a2304;
  border: 1px solid #7a4a10; border-radius: 5px; padding: 0 6px; font-weight: 900; font-size: calc(var(--s) * .085); line-height: 1.35; white-space: nowrap; letter-spacing: .02em; box-shadow: 0 1px 3px #0009; }
.chwins { position: absolute; right: 4%; top: 6%; background: #d32f2f; color: #fff; border: 2px solid #ffd76a; border-radius: 999px; font-weight: 900;
  font-size: calc(var(--s) * .11); padding: 0 .45em; line-height: 1.4; box-shadow: 0 0 8px #ffcc4099; }
.chtab { width: 100%; border-collapse: collapse; font-size: .9rem; } .chtab th, .chtab td { border-bottom: 1px solid #2a3c66; padding: 5px 6px; text-align: left; vertical-align: top; }
.chtab th { color: #ffd76a; } .chtab a { color: #ffd76a; } .chnote { margin: 4px 0; width: 100%; max-width: 260px; }
.chsw { white-space: nowrap; }
.bdgcell .chart .chplate { font-size: calc(var(--s) * .08); }
@media (max-width: 700px) { .chgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .chart { --s: 120px; } .chtab { display: block; overflow-x: auto; } }
.chsw { display: inline-flex; gap: 4px; align-items: center; }

/* OWNER MAIL (ownermail.js) - UseMart email in owners' Messages */
.omlink { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; margin: 0 0 8px; border: 1px solid #2bd4c0; border-radius: 10px; background: #e9fbf8; color: #06302c; text-decoration: none; }
.omlink small { flex-basis: 100%; color: #3d6b66; } .omnew { background: #d32f2f; color: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 800; }
.ombar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 12px; }
.omgrid { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 12px; }
.omlist { display: flex; flex-direction: column; gap: 6px; max-height: 75vh; overflow-y: auto; }
.omrow { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--line, #ddd); border-radius: 10px; text-decoration: none; color: inherit; background: #fff; }
.omitem { display: flex; align-items: stretch; gap: 6px; } .omitem .omrow { flex: 1; min-width: 0; }   /* 🗑 to the right of each email (N71) */
.omdel { flex: 0 0 auto; width: 44px; min-height: 44px; border: 1px solid var(--line, #ddd); border-radius: 10px; background: #fff; cursor: pointer; font-size: 18px; padding: 0; }
.omdel:hover { border-color: #d32f2f; background: #fdecec; } .omdel.ask { width: auto; padding: 0 8px; font-size: 13px; font-weight: 800; color: #fff; background: #d32f2f; border-color: #d32f2f; }
html[data-theme="dark"] .omdel { background: #0f2a30; color: #e6fffb; } html[data-theme="dark"] .omdel.ask { background: #d32f2f; color: #fff; }
.omrow.unread { border-left: 4px solid #2bd4c0; } .omrow.unread b { font-weight: 900; } .omrow.on { outline: 2px solid #2bd4c0; }
.omsub { font-weight: 600; } .omread { border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 12px 14px; background: #fff; min-height: 300px; }
.ombody, .omreply pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 8px 0; }
.omreply { border-left: 3px solid #2bd4c0; padding: 4px 10px; margin: 8px 0; background: #f6fbfa; } .omreply.failed { border-color: #d32f2f; }
.omform textarea { width: 100%; box-sizing: border-box; }
html[data-theme="dark"] .omrow, html[data-theme="dark"] .omread { background: #0f2a30; } html[data-theme="dark"] .omlink { background: #0f3a42; color: #e6fffb; }
@media (max-width: 760px) { .omgrid { grid-template-columns: 1fr; } }

/* HELPER CHECK (helpercheck.js) - the install / update bar */
.hcbar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2500; width: min(680px, calc(100% - 24px)); background: #10202a; color: #fff;
  border: 2px solid #2bd4c0; border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 24px #0007; font-size: .95rem; }
.hcbar .hcbtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .hcbar .hcsteps { margin: 8px 0 0; padding-left: 20px; }

/* POSTER (poster.js) - Scott's Share My Listings prototype: items left, sites right, checklist below */
.pohero h1 { margin: 6px 0 0; } .pohero p { margin: 2px 0 10px; color: #5b6b73; }
.potip { background: #e9fbf8; border: 1px solid #b8efe6; border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }
.pogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.popanel { background: #fff; border: 1px solid #dfe7ea; border-radius: 16px; padding: 14px; }
.popanel header { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid #eef2f3; padding-bottom: 10px; margin-bottom: 10px; }
.popanel header h2 { font-size: 1.1rem; margin: 0; } .popanel footer { display: flex; justify-content: space-between; border-top: 1px solid #eef2f3; padding-top: 10px; margin-top: 10px; }
.posearch { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid #dfe7ea; }
.pofilters { display: flex; gap: 6px; margin: 10px 0; } .pofilters button { border: 0; border-radius: 999px; padding: 6px 12px; background: #eef4f5; cursor: pointer; font: inherit; }
.pofilters button.on { background: #0f3a42; color: #fff; }
.poitems { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; }
.poitem { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid #eef2f3; border-radius: 12px; cursor: pointer; }
.poitem.on { border-color: #2bd4c0; background: #f2fcfa; box-shadow: 0 0 0 1px #2bd4c0; }
.poph { width: 72px; height: 72px; border-radius: 10px; background: #eef4f5 center / cover no-repeat; display: grid; place-items: center; flex: 0 0 auto; font-size: 24px; }
.pomid { display: flex; flex-direction: column; gap: 1px; } .poprice { color: #0f7c74; font-weight: 800; } .pomid em { font-style: normal; font-size: 12px; color: #b26a00; }
.pomid em.podraft { color: #6b7a80; }
.posites { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.posite { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid #dfe7ea; border-radius: 12px; cursor: pointer; }
.posite.on { border-color: #2bd4c0; background: #f2fcfa; } .posite small { display: block; color: #5b6b73; font-size: 12px; }
.poinfo { background: #eef5ff; border: 1px solid #cfe0fb; border-radius: 12px; padding: 10px 12px; font-size: .9rem; margin: 10px 0; }
.poprep button[disabled] { opacity: .5; }
.polist { margin-top: 14px; } .pobar { height: 10px; background: #e7eff0; border-radius: 6px; overflow: hidden; margin: 4px 0 12px; } .pobar i { display: block; height: 100%; background: #2bd4c0; }
.poitemcard { border: 1px solid #eef2f3; border-radius: 14px; padding: 10px; margin: 10px 0; }
.pohead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .pohead .poph { width: 48px; height: 48px; }
.pophotos { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.pocell { border-left: 4px solid #ccc; background: #fafcfc; border-radius: 0 10px 10px 0; padding: 8px 10px; margin: 6px 0; }
.pocell.v-green { border-color: #2e7d32; } .pocell.v-yellow { border-color: #f9a825; } .pocell.v-red { border-color: #d32f2f; opacity: .85; }
.pocelltop { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .pocelltop small { color: #5b6b73; }
.ponotes { margin: 4px 0; padding-left: 18px; font-size: .88rem; color: #3d4b51; }
.potext pre { white-space: pre-wrap; background: #fff; border: 1px solid #eef2f3; border-radius: 8px; padding: 8px; font: inherit; font-size: .9rem; }
.podone { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
html[data-theme="dark"] .popanel, html[data-theme="dark"] .pocell { background: #0f2a30; border-color: #1f4a52; } html[data-theme="dark"] .potip { background: #0f3a42; border-color: #1f5a62; }
@media (max-width: 860px) { .pogrid { grid-template-columns: 1fr; } .posites { grid-template-columns: 1fr; } }
.poitem input, .posite input { width: auto; flex: 0 0 auto; margin: 4px 0 0; }
.poitem .pomid, .posite > span { flex: 1 1 auto; text-align: left; }
html[data-theme="dark"] .poitem.on, html[data-theme="dark"] .posite.on { background: #0f3a42; border-color: #2bd4c0; }
html[data-theme="dark"] .poitem, html[data-theme="dark"] .posite { border-color: #1f4a52; }
html[data-theme="dark"] .pofilters button { background: #16363d; color: #e6fffb; } html[data-theme="dark"] .pofilters button.on { background: #2bd4c0; color: #06302c; }
html[data-theme="dark"] .poinfo { background: #112a44; border-color: #23486e; color: #dbe8ff; }
html[data-theme="dark"] .posearch { background: #0f2a30; color: #e6fffb; border-color: #1f4a52; }
html[data-theme="dark"] .poph { background-color: #16363d; } html[data-theme="dark"] .posite small, html[data-theme="dark"] .pocelltop small, html[data-theme="dark"] .ponotes { color: #b9cdd1; }
html[data-theme="dark"] .pomid .poprice { color: #2bd4c0; } html[data-theme="dark"] .potext pre { background: #0b2025; border-color: #1f4a52; } html[data-theme="dark"] .pobar { background: #16363d; }
html[data-theme="dark"] .popanel header, html[data-theme="dark"] .popanel footer { border-color: #1f4a52; }

/* Scott 10/31 "share this item page has no way to close it": a ✕ always in the corner of the Share pop-up + Close / Done on the Share page */
.sbdlg .adwrap { position: relative; } .sbclose { position: sticky; top: 0; float: right; margin: -4px -4px 0 8px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #c9d6da; background: #fff; color: #10202a; font-size: 18px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 6px #0003; }
html[data-theme="dark"] .sbclose { background: #16363d; color: #fff; border-color: #2bd4c0; }
.shclose { margin-left: auto; } .shdone { margin: 14px 0 4px; text-align: center; }

/* My Stuff: 📤 Poster is the card's posting button; the ad card + sticker are a small link under it */
.scard > .sbody > a.advbtn { display: block; text-align: center; text-decoration: none; margin: auto 0 0; }
.scard > .sbody > .advmore { margin-top: 4px; background: none; border: 0; color: #0f7c74; font: inherit; font-size: .88rem; cursor: pointer; text-decoration: underline; }
.scard > .sbody > .advmore ~ .sfoot { margin-top: 6px; }
.poinfo p { margin: 0 0 6px; } .poinfo .pobig { font-size: 1.05rem; } .poinfo p:last-child { margin: 0; }
/* POSTER order (Scott 10/31 "wrong order - test that whole thing"): intro, ① items + ② sites + ③ review, ④ a bar stuck to the
   bottom of the screen with the count + Prepare (always in reach), ⑤ the checklist */
#poster .poinfo { margin: 0 0 12px; } .pomore summary { cursor: pointer; color: #0f7c74; font-weight: 700; margin: 4px 0; }
.ponum { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #0f7c74; color: #fff; font-size: 13px; font-weight: 800; margin-right: 6px; vertical-align: middle; }
.poreview { margin-top: 14px; border-top: 1px solid #eef2f3; padding-top: 12px; } .poreview h3 { margin: 0 0 8px; font-size: 1rem; }
.porev { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #eef2f3; border-radius: 12px; padding: 10px; }
.porev .poph { width: 64px; height: 64px; } .porev small { display: block; color: #0f7c74; font-weight: 700; } .porev p { margin: 4px 0 0; font-size: .9rem; color: #3d4b51; }
.poaction { position: sticky; bottom: 10px; z-index: 40; margin: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #10202a; color: #fff; border: 2px solid #2bd4c0; border-radius: 14px; padding: 10px 14px; box-shadow: 0 8px 22px #0006; }
.poaction small { display: block; color: #ffd76a; } .poaction button { min-width: 200px; font-size: 1.02rem; } .poaction button[disabled] { opacity: .45; }
html[data-theme="dark"] .poreview, html[data-theme="dark"] .porev { border-color: #1f4a52; } html[data-theme="dark"] .porev p { color: #c9d9dc; }
@media (max-width: 860px) { .poitems { max-height: 330px; } .poaction { bottom: 6px; } .poaction button { flex: 1 1 100%; } }
.poaction { flex-wrap: nowrap; padding: 8px 12px; gap: 10px; } .poaction > div { min-width: 0; font-size: .95rem; line-height: 1.3; }
.poaction button.primary { width: auto; flex: 0 0 auto; min-width: 0; padding: 10px 16px; margin: 0; white-space: nowrap; }
@media (max-width: 860px) { .poaction { padding: 7px 10px; } .poaction > div { font-size: .85rem; } .poaction .ponum { display: none; } .poaction button.primary { flex: 0 0 auto; padding: 9px 12px; font-size: .92rem; } }
/* N78 What's selling report tables (salesreport.js) */
.srtab{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0 10px}.srtab th,.srtab td{padding:4px 6px;border-bottom:1px solid #e3ecee;text-align:left}.srtab th{font-weight:600;color:#4a5b63}
/* N86 (Scott 11/01): the app's QR code right below its icon, the same size (web/app.js openProduct) */
.prodart.app { gap: 16px; }
.prodart.app .appqr { width: 70%; max-width: 260px; display: grid; gap: 6px; justify-items: center; }
.prodart.app .appqr svg { width: 100%; height: auto; aspect-ratio: 1; background: #fff; border-radius: 18px; padding: 8px; box-sizing: border-box; box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.prodart.app .appqr small { color: #cfe9e6; font-size: 13px; text-align: center; }
@media (max-width: 760px) { .prodart.app .appqr { width: 40%; } }
/* Scott 11/01: a rulebook WARN note on the item page (replica etc.) - live, with a "please verify" for buyer + seller */
.icard.verifynote { border-color: #f5b74e; background: rgba(245,183,78,.10); }
.icard.verifynote b { color: #f5b74e; }

/* N91: Take a photo + Choose photos side by side in What's it worth */
.pfpickrow { display: flex; gap: 8px; flex-wrap: wrap; }
.pfpickrow .pfpick { flex: 1 1 140px; text-align: center; }
/* N92 (Scott 11/01): the owner's 📣 Ads link glows with a count when today's ads are ready to push */
.adslink { position: relative; }
.adslink.adsglow { color: #ffd166 !important; text-shadow: 0 0 10px rgba(255,209,102,.9); animation: adsPulse 1.6s ease-in-out infinite; }
@keyframes adsPulse { 0%,100% { filter: drop-shadow(0 0 0 rgba(255,209,102,0)); } 50% { filter: drop-shadow(0 0 8px rgba(255,209,102,.95)); } }
.adsbadge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #e53935; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.icard.adsready { border-color: #ffd166; box-shadow: 0 0 0 1px rgba(255,209,102,.4), 0 0 24px rgba(255,209,102,.15); }
#ads .bigbtn { display: inline-block; padding: 12px 18px; border-radius: 10px; font-weight: 800; text-decoration: none; margin: 6px 0; }
@media (prefers-reduced-motion: reduce) { .adslink.adsglow { animation: none; } }

/* N64 Profile 2.0 (profile2.js) */
.pv2prev { background: var(--tint); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.pv2head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 12px; }
.pv2who { flex: 1; min-width: 200px; display: grid; gap: 2px; } .pv2who h2 { margin: 0; overflow-wrap: anywhere; }
.pv2plan { font-weight: 700; } .pv2priv { overflow-wrap: anywhere; }
.pv2level { display: grid; gap: 2px; text-align: right; } .pv2level b { font-size: 18px; }
.pv2nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; } .pv2nav a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; text-decoration: none; color: inherit; font-size: 14px; }
.pv2grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pv2grid .box { margin: 0; } .pv2grid h3 { margin: 0 0 8px; } .pv2span { grid-column: 1 / -1; }
.pv2rep { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 6px; }
.pv2trust { display: grid; gap: 4px; align-content: start; } .pv2score { font-size: 40px; line-height: 1; } .pv2score small { font-size: 15px; font-weight: 400; }
.pv2badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pv2tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pv2tile { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; } .pv2tile b { font-size: 22px; } .pv2tile small { color: var(--soft); }
@media (max-width: 640px) { .pv2grid { grid-template-columns: minmax(0, 1fr); } .pv2level { text-align: left; } }
.pv2head .av { width: 72px; height: 72px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #1f8fb0, #2ec4b6); color: #fff; font-size: 32px; font-weight: 800; }

/* 11-02b: the Messages panel is white in both themes, but the dark theme's box + control colours were winning: dark text on dark */
html[data-theme="dark"] #inbox.mlook .pickup, html[data-theme="dark"] #inbox.mlook .dnbox, html[data-theme="dark"] #inbox.mlook .dnline { background: #fff; color: #0f1b2d; }
html[data-theme="dark"] #inbox.mlook input, html[data-theme="dark"] #inbox.mlook select, html[data-theme="dark"] #inbox.mlook textarea,
html[data-theme="dark"] #inbox.mlook .small-btn:not(.blue):not(.warn), html[data-theme="dark"] #inbox.mlook .ghost, html[data-theme="dark"] #inbox.mlook .mic { background: #fff; color: #0f1b2d; border-color: #cfd9e2; }
/* 11-02b: the pickup form ran off its panel on a phone */
.mini2 form { grid-template-columns: minmax(0, 1fr); } .mini2 input, .mini2 select { width: 100%; min-width: 0; box-sizing: border-box; }
/* 11-02b: the dark theme turned this button's background almost clear under white text */
html[data-theme="dark"] .fbfollow { background: #1877f2; color: #fff; border-color: #1877f2; }
html[data-theme="dark"] #inbox.mlook .mini2 summary { color: #0f7c74; font-weight: 700; }

/* 11-02c: Tipster's bubble covered the Sold form + What's selling and blocked their buttons */
body:has(.stkover:not([hidden])) .tipster { display: none; }
.sellgate .small-btn, [data-umtrialrow] .small-btn { white-space: nowrap; }

/* SALE THANKS (salethanks.js) */
body[data-view="thanks"] .tipster { display: none; }
.stbox { max-width: 460px; width: 100%; max-height: 90vh; overflow: auto; }
.stplaces { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.stprice { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.stprice input { width: 110px; }
.stresult textarea { width: 100%; box-sizing: border-box; }
.stqr { width: 180px; margin: 6px auto; background: #fff; padding: 6px; border-radius: 8px; }
.stqr svg { display: block; width: 100%; height: auto; }
.stdone { font-size: 13px; font-weight: 700; color: #16a34a; align-self: center; }
.stpage { max-width: 520px; margin: 16px auto; }
.stbanner { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 12px; background: linear-gradient(120deg, #0f766e, #2563eb); color: #fff; margin-bottom: 12px; }
.stbanner span { font-size: 40px; line-height: 1; }
.stbanner b { display: block; font-size: 26px; line-height: 1.1; }
.stbanner small { font-size: 14px; opacity: .92; }
.stpromo { margin-top: 16px; padding: 16px 18px; border: 1px solid #2dd4bf55; border-radius: 12px; }
.stpromo b { display: block; font-size: 22px; line-height: 1.15; }
.stpromo b span { color: #2dd4bf; }
.stpromo small { display: block; margin: 6px 0 10px; font-size: 14px; }
.stpromo a.small-btn { display: inline-block; }
.stitem { font-size: 16px; margin: 6px 0 12px; }
.stask { display: grid; gap: 8px; margin-bottom: 12px; }
.sthbtns { display: flex; flex-wrap: wrap; gap: 8px; }

/* List an Item photos (sellkeep.js) */
.skth { position: relative; display: inline-block; }
.skth .skx { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #111827; color: #fff; font: 700 15px/24px system-ui, sans-serif; cursor: pointer; }

/* PHONE TIDY (web/phonetidy.js, switch PHONE_TIDY, 11/03) - phones only, everything under html.ptidy */
@media (max-width: 760px) {
  html.ptidy #shop .banner { margin: 8px 16px 0; padding: 10px 14px; background: none; border: 0; min-height: 0; }
  html.ptidy #shop .banner::before, html.ptidy #shop .banner::after { display: none; }
  html.ptidy #shop .banner h1 { font-size: 22px; letter-spacing: 0; }
  html.ptidy #shop .banner p, html.ptidy #shop .banner .areacard, html.ptidy #shop .banner .photocredit { display: none; }
  html.ptidy #shop .browse { gap: 8px; padding-top: 4px; }
  html.ptidy #fside { position: static; max-height: none; min-width: 0; padding: 0; background: none; border: 0; }   /* keeps its overflow:auto: that's what holds it inside the grid column */
  html.ptidy #fside:not(.ptopen) > :not(#cats):not(#ptFilt), html.ptidy #fside > h3:first-child { display: none; }
  html.ptidy #fside.ptopen { padding-bottom: 10px; }
  html.ptidy .ptfilt { display: block; width: 100%; margin: 8px 0 0; padding: 10px; border: 1px solid #2dd4bf55; border-radius: 10px; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
  html.ptidy .vtopmw { display: none; }
  html.ptidy .top { gap: 6px 5px; padding: 6px 8px; }
  html.ptidy .brand img { width: 30px; height: 30px; } html.ptidy .word { font-size: 18px; }
  html.ptidy .vtop { padding: 3px 5px; font-size: 11px; gap: 2px; }
  html.ptidy .links .ico { padding: 4px 3px; } html.ptidy .links .ico span { font-size: 18px; }
  html.ptidy .signin { padding: 4px 7px; font-size: 12px; }
  html.ptidy #inbox .inbox, html.ptidy #inbox .thread { overflow: visible; }   /* a clipping panel stops the box below from sticking */
  html.ptidy #reply { position: sticky; bottom: 0; z-index: 5; background: var(--card, #fff); }
  html.ptidy a.small-btn, html.ptidy #mystore a.primary { display: inline-block; width: auto; }   /* a button that wraps stays one button: "Build your own / store" split in two at 360 wide */
}
.ptfilt { display: none; }

/* BARCODE MAGIC (web/barcode.js, switch BARCODE_MAGIC, 11/03) */
.bcbox { margin: 10px 0; }
.bcnote { margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--blue); }
.bcdlg { width: min(92vw, 440px); padding: 18px; border: 0; border-radius: 14px; }
.bcdlg h3 { margin: 0 34px 10px 0; }
.bcdlg .bcx { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.bccam { position: relative; overflow: hidden; border-radius: 10px; background: #000; aspect-ratio: 4 / 3; }
.bccam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bccam i { position: absolute; inset: 28% 8%; border: 3px solid #2dd4bf; border-radius: 8px; box-shadow: 0 0 0 999px #0006; pointer-events: none; }
.bcalt { margin-top: 10px; }
#bcType { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
#bcType label { flex: 1 1 100%; }

/* SOLD CARD (Scott 11/03 "sold item layout is off center"): the counts and three buttons shared one row, so a button ran off the card on a computer and squeezed into stacked words on a phone */
.sfoot.soldfoot { flex-wrap: wrap; justify-content: center; gap: 8px 16px; text-align: center; }
.soldfoot > span { white-space: nowrap; }
.soldbtns { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.soldbtns > * { flex: 1 1 40%; display: flex; align-items: center; justify-content: center; min-height: 40px; box-sizing: border-box; text-align: center; margin: 0; }
/* HELD ITEM buttons in Drafts, owners only */
.heldbtns { margin-top: 8px; padding: 10px; border: 1px solid #f0b35b; border-radius: 10px; }
.heldbtns [data-heldwhy] { display: block; margin-bottom: 8px; }
.heldbtns .row { display: flex; flex-wrap: wrap; gap: 8px; }
.heldbtns .row button { flex: 1 1 40%; min-height: 40px; }

/* Post Everywhere: Etsy's question */
.peetsy { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.peetsy select { flex: 1 1 60%; min-width: 0; } .peetsy input { flex: 1 1 30%; min-width: 0; }
.poetsy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.poetsy select { flex: 1 1 60%; min-width: 0; } .poetsy input { flex: 1 1 30%; min-width: 0; }

/* Ads page numbers (Scott 11/03) */
.adsbiz { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.adstiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.adstiles > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; text-align: center; }
.adstiles b { display: block; font-size: 22px; line-height: 1.1; }
.adstiles small { display: block; margin-top: 3px; font-size: 12px; }
#adsSocial .srtab { display: block; overflow-x: auto; }
#adsSocial .srtab th { color: inherit; font-weight: 700; white-space: nowrap; }
#adsSocial .adsnet { text-transform: capitalize; white-space: nowrap; }
/* NEAR_EMPTY (web/nearempty.js): nothing near you, and where to go next */
.neempty b { display: block; font-size: 1.05rem; }
.neempty .nebtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 12px 0 8px; }
.neempty small { display: block; }
/* How to & FAQ (web/howto.js) */
.hosec { margin: 16px 0 8px; font-size: 16px; }
.hogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hocard { display: flex; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint2); text-decoration: none; color: inherit; min-height: 44px; }
.hocard span { font-size: 22px; } .hocard b { font-weight: 600; font-size: 14px; line-height: 1.25; }
.hobtns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.hogo { display: inline-block; padding: 10px 18px; border-radius: 10px; text-decoration: none; }
.hofaqhead { margin: 24px 0 8px; }
.hosearch { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.hofaq { border-top: 1px solid var(--line); padding: 10px 2px; } .hofaq summary { cursor: pointer; font-weight: 600; } .hofaq .helpqa { border: 0; margin: 0; }
.tiphow { display: block; width: 100%; margin: 4px 0 8px; padding: 12px; }
.tiplist li a { display: block; white-space: normal; overflow-wrap: anywhere; } .tiplist:has(a[data-tipsec]) li { box-sizing: border-box; max-width: 100%; min-width: 0; white-space: normal; } #tipster .tiphow ~ .fine { color: #0b4f49; margin: 4px 0; }
/* TIPSTER_WAIT (N68): waits small in the corner on a first visit, covers nothing */
.tippeek { position: fixed; right: 10px; bottom: 12px; z-index: 900; display: flex; align-items: center; gap: 2px; background: #fff; color: #10242c; border: 1px solid rgba(15,124,116,.45); border-radius: 30px; box-shadow: 0 6px 18px rgba(0,0,0,.28); padding: 2px 6px 2px 2px; }
.tippeekgo { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: inherit; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; padding: 0 2px; min-height: 44px; }
.tippeekgo img { display: block; }
.tippeekx { background: none; border: 0; color: inherit; opacity: .7; font-size: 14px; width: 32px; height: 44px; cursor: pointer; }

/* B37 paid bumps (web/bumps.js) - the label always says paid */
.card .tag.boosttag { background: #fff3c4 !important; color: #6b4e00; border: 1px solid #f5b700; }
.card .tag.boosttag.feat { background: #ffe08a !important; }
html[data-theme="dark"] .card .tag.boosttag { color: #6b4e00; }
.bumpline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.bumpline:empty { display: none; }
.bumpon { font-weight: 700; color: #8a6500; }
.bumpbox { margin-top: 10px; } .bumpbox .bumprow { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
/* N123 Tipster sells UseMart: one line after an answer */
.tippitch { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #fff7d6; color: #4a3a00; font-size: 14px; }
.tippitch a { font-weight: 700; color: #0f7c74; }
/* Tipster first-sign-in welcome: the U logo glows so they see where he lives */
.brand img.tipglow { animation: updpulse 1.2s ease-in-out 4; }
.tiplogo { font-size: 14px; }
/* 👀 Views (views.js, SELLER_VIEWS 11/07) */
.svtabs{margin:4px 0 10px}.svtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:6px 0 12px}
.svtile{background:#f3f8f9;border-radius:10px;padding:8px 10px;text-align:center}.svtile b{display:block;font-size:22px}.svtile small{color:#4a5b63}
html[data-theme="dark"] .svtile{background:#163e48}html[data-theme="dark"] .svtile small{color:inherit}
.svchart{display:flex;align-items:flex-end;gap:3px;height:110px;padding:4px 0 18px;border-bottom:1px solid #e3ecee;margin-bottom:6px}
.svbar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;min-width:0}
.svbar i{display:block;width:100%;max-width:34px;min-height:2px;background:#1a8fa6;border-radius:4px 4px 0 0}
.svbar small{position:absolute;bottom:-17px;font-size:10px;color:#4a5b63;white-space:nowrap}
.svtab td:not(:first-child),.svtab th:not(:first-child){text-align:center}
@media (max-width:480px){.svtab{font-size:12px}.svtab th,.svtab td{padding:4px 3px}}

/* Share to groups: rule + today line, remove (router.js, 11/07) */
.rtday{margin:6px 0;font-size:13px;line-height:1.5}.rtrm{margin-top:8px;text-align:right}

/* 🔍 Google Lens in What's it worth? (pricefinder.js, 11/07) */
.pflens{margin:6px 0}.pflensbtn{width:100%;min-height:48px;font-size:17px;font-weight:700}.pflensask{margin-top:6px}.pflensask .row{gap:6px}.pflensask input{width:100%;box-sizing:border-box;margin-top:4px}

/* 🗺 Nationwide ad groups (adsnation.js, 11/07) */
.anregions{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:8px 0}
.anreg{text-align:left;border:1px solid #cfdde0;border-radius:10px;background:transparent;color:inherit;padding:6px 8px;cursor:pointer;font:inherit}
.anreg small{display:block;font-size:11px;opacity:.75}.anreg.on{border-color:#1a8fa6;background:rgba(26,143,166,.12)}.anreg.today b::after{content:' • today';color:#1a8fa6;font-weight:600}
.ansteps{margin:6px 0 8px 18px}.anbar{flex-wrap:wrap;gap:6px;margin:6px 0}
.anlist{max-height:420px;overflow:auto;border:1px solid #e3ecee;border-radius:10px}
.anrow{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-bottom:1px solid #e3ecee}.anrow.dim{opacity:.6}
.anadd textarea{width:100%;box-sizing:border-box;margin:4px 0}
.anreg.shut{opacity:.65;border-style:dashed}
.anleads{margin:8px 0}.anlead{padding:6px 0;border-bottom:1px solid #e3ecee}.anlead .row{flex-wrap:wrap;gap:6px;margin-top:4px}.anlead input{flex:1;min-width:160px}
/* 📡 outreach board (outreach.js, 11/07) */
.ortab tr.dim{opacity:.55}.orform{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.orform input[name=what]{flex:1 1 220px}.orform input[name=people],.orform input[name=cost]{width:150px}
/* 🔁 similar items while listing (similar.js, 11/07) */
.simbox{border:1px solid #cfdde0;border-radius:10px;padding:8px 10px;margin:6px 0}.simrow{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-top:1px solid #e3ecee}.simrow img{width:56px;height:56px;object-fit:cover;border-radius:6px;flex:none}.simrow .small-btn{margin-top:4px}
/* 🔗 tracked links (links.js, 11/07) */
.lkform{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.lkform input[name=label]{flex:1 1 220px}.lkqr{display:flex;gap:12px;align-items:center;margin:8px 0;padding:8px;border:1px solid #cfdde0;border-radius:10px}.lkqr img{background:#fff;border-radius:6px}.lktab td:not(:first-child){text-align:center}
.lkqr{flex-wrap:wrap}.lkqr>div{min-width:0;flex:1 1 160px;overflow-wrap:anywhere}.lkqr img{width:150px;height:150px}.lktab td:first-child{overflow-wrap:anywhere}.lkbtns{margin-top:4px}.lkform select{max-width:100%}
/* ad landing pages (landing.js, 11/07) */
.lptips{margin:6px 0 12px 18px;line-height:1.6}.lpnote{border-left:3px solid #1a8fa6;padding:6px 10px;margin:10px 0;font-size:14px}
.anwalk{border:2px solid #1a8fa6;border-radius:12px;padding:10px 12px;margin:8px 0}.anwname{font-size:18px;font-weight:700;overflow-wrap:anywhere}.anwalk .row{flex-wrap:wrap;gap:6px;margin-top:8px}.anwalk input{flex:1 1 100%;min-width:0}.anwerr{color:#b3261e}.anrow input[type=checkbox]{flex:0 0 auto;width:auto;margin-top:3px}.anrow>span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.ancnt{display:inline-block;white-space:nowrap;margin-left:6px;padding:0 7px;border-radius:9px;font-size:12px;font-weight:700}.ancnt.go{background:#d1fadf;color:#05603a}.ancnt.no{background:#fee4e2;color:#912018}
.pagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:12px}.paform{max-width:560px;margin:16px 0}.paform label{display:block;margin:8px 0}.paform input,.paform select,.paform textarea{width:100%;box-sizing:border-box}.paform .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pahide{position:absolute;left:-9999px}.pastages{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.pastages span{padding:6px 10px;border:1px solid #cfdde0;border-radius:9px;font-size:13px}.pastages b{display:block;font-size:18px}.parow{padding:8px 0;border-top:1px solid #e3ecee}.parow .row{flex-wrap:wrap;gap:6px;margin:6px 0}.parow input{flex:1;min-width:130px}
.pfev{margin:12px 0;padding:10px;border:1px solid #cfdde0;border-radius:10px}.pfev h3{margin:0 0 6px}.pfverdict{font-weight:700;padding:6px 10px;border-radius:8px;margin:6px 0}.pfverdict.none{background:#fee4e2;color:#912018}.pfverdict.some{background:#fef0c7;color:#7a4b00}.pfverdict.good{background:#d1fadf;color:#05603a}.pfevt{width:100%;border-collapse:collapse;font-size:14px}.pfevt th{text-align:left;vertical-align:top;padding:4px 8px 4px 0;white-space:nowrap}.pfevt td{padding:4px 0;overflow-wrap:anywhere}.pfrefs{display:flex;flex-wrap:wrap;gap:6px}.pfrefs a{white-space:nowrap}.pfcompadd{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;margin:6px 0}.pfcompadd input,.pfcompadd select{width:100%;box-sizing:border-box}.pfcomps{margin:6px 0;padding-left:18px;font-size:14px}