:root{--ink:#1d1d22;--muted:#777783;--paper:#fff;--bg:#f6f5f2;--line:#e8e6e1;--gold:#c99e4f;--gold-light:#f8edda;--green:#237753;--dark:#25221d;--r:18px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 ui-rounded,"SF Pro Rounded",system-ui,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}header{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;padding:0 max(24px,calc((100vw - 1160px)/2));position:sticky;top:0;z-index:2}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);letter-spacing:-.04em;font-size:18px}.brand span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--dark);color:#f4d9a2;font-size:11px;font-weight:900}.brand i{color:#ae7e2e;font-style:normal}nav{display:flex;gap:3px;flex:1}nav button,.link,.back{background:transparent;color:#5e5e67;padding:9px 11px;font-weight:700}.identity{background:#f4f2ed;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700}main{max-width:1110px;margin:auto;padding:42px 24px 76px}.view{display:none}.view.active{display:block}.hero{background:var(--dark);color:#fff;border-radius:28px;padding:55px;display:grid;grid-template-columns:1.3fr .7fr;gap:38px;overflow:hidden}.eyebrow{margin:0 0 8px;font-size:11px;font-weight:900;letter-spacing:.13em;color:#b98735}.hero h1,h1,h2{letter-spacing:-.06em}.hero h1{font-size:52px;line-height:1.02;max-width:620px;margin:0}.lede{color:#dedbd4;font-size:17px;max-width:590px;margin:22px 0}.hero aside{align-self:end;border:1px solid #ffffff24;background:#ffffff0b;border-radius:16px;padding:18px}.hero aside h3{margin:0}.hero ul{padding-left:19px;color:#d9d7d2;margin:10px 0 0}.hero li+li{margin-top:8px}.actions{display:flex;gap:10px}.primary,.dark,.ghost{padding:12px 16px;border-radius:11px;font-weight:850}.primary{background:var(--gold);color:#211a10}.dark{background:#fff;color:#25221d}.ghost{background:#f0efec;color:#595962}.section-head{display:flex;justify-content:space-between;align-items:end;margin:44px 0 16px}.section-head h1,.section-head h2{margin:0;font-size:31px}.category-row,.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.category-row button,.dashboard-grid article{background:#fff;border:1px solid var(--line);text-align:left;border-radius:16px;padding:20px}.category-row button:hover{border-color:var(--gold);transform:translateY(-2px)}.category-row b,.category-row small{display:block}.category-row b{margin:11px 0 3px}.category-row small{color:var(--muted)}.filters{display:flex;gap:8px;flex-wrap:wrap}.filter{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700}.filter.on{background:var(--dark);color:white;border-color:var(--dark)}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.product{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.product-image{height:145px;display:grid;place-items:center;font-size:50px;background:linear-gradient(135deg,#eee4d1,#d2cabd)}.product-body{padding:16px}.product .tag{font-size:11px;color:#7d5a22;font-weight:800;background:var(--gold-light);padding:5px 7px;border-radius:999px}.product h3{font-size:17px;letter-spacing:-.03em;margin:12px 0 5px}.product p{font-size:13px;color:var(--muted);margin:0}.price{margin:16px 0 12px;font-weight:900;font-size:18px}.product-footer{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}.product-footer button{background:#25221d;color:#fff;padding:8px 10px;border-radius:8px;font-size:12px;font-weight:800}.back{padding:0;color:#96681f}.dashboard-head{display:flex;justify-content:space-between;align-items:start;margin:18px 0 24px}.dashboard-head h1{font-size:37px;margin:0}.verified{background:#e7f3ec;color:var(--green);padding:8px 10px;border-radius:999px;font-size:12px;font-weight:800}.dashboard-grid article>span{font-size:22px}.dashboard-grid h3{margin:14px 0 2px;font-size:14px}.dashboard-grid strong{font-size:30px;letter-spacing:-.06em}.dashboard-grid p{color:var(--muted);font-size:13px;margin:6px 0 0}.dashboard-grid+button{margin-top:18px}.form-shell{background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px;margin-top:18px;max-width:820px}.form-shell h1{margin:0 0 28px;font-size:35px}.form-shell form{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:13px;font-weight:850}.field input,.field select,.field textarea{border:1px solid #dddce0;border-radius:10px;padding:11px;outline:0;background:#fff}.field textarea{min-height:100px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px #c99e4f25}.field small{color:var(--muted);font-size:12px}.notice{background:#fbf7ef;border-left:3px solid var(--gold);padding:13px;font-size:13px;color:#65593e}.form-actions{display:flex;justify-content:space-between;margin-top:8px}dialog{width:min(530px,calc(100vw - 32px));border:0;border-radius:20px;padding:28px;box-shadow:0 22px 80px #0005}dialog::backdrop{background:#14120f88}dialog h2{font-size:27px;margin:5px 0 9px}dialog p{color:var(--muted)}.dialog-actions{display:flex;gap:10px;margin-top:22px;justify-content:end}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:#25221d;color:#fff;padding:11px 16px;border-radius:10px;font-size:13px;transition:.2s;z-index:5}#toast.show{transform:translateX(-50%) translateY(0)}.market-actions{margin-top:30px}.market-actions button{min-width:142px;font-size:16px}.listing-steps{display:flex;gap:0;align-items:center;margin:-7px 0 30px;overflow:auto}.listing-steps span{color:var(--muted);font-size:13px;font-weight:800;white-space:nowrap;display:flex;align-items:center;gap:7px}.listing-steps span:not(:last-child)::after{content:"";height:1px;width:45px;background:#dedde0;margin:0 13px}.listing-steps .done,.listing-steps .active-step{color:var(--ink)}.listing-steps .active-step{color:#79551d;font-weight:900}.category-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 28px}.category-picker button{min-height:148px;text-align:left;background:#fff;border:1px solid #e1dfe2;border-radius:15px;padding:20px;color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:22px;transition:border .15s,box-shadow .15s,transform .15s}.category-picker button:hover,.category-picker button.selected{border-color:var(--gold);box-shadow:0 0 0 3px #c99e4f23;transform:translateY(-2px)}.category-picker b{font-size:17px}.category-picker small{font-size:13px;color:var(--muted);line-height:1.45}@media(max-width:720px){header{padding:0 15px;gap:10px}.identity{display:none}nav{justify-content:end}nav button{font-size:12px;padding:8px 6px}main{padding:24px 15px}.hero{padding:30px;grid-template-columns:1fr}.hero h1{font-size:39px}.products,.category-row,.dashboard-grid,.category-picker{grid-template-columns:1fr}.section-head{align-items:start;gap:12px;flex-direction:column}.form-shell{padding:22px}.form-shell form{grid-template-columns:1fr}.field.full{grid-column:auto}.listing-steps{margin-bottom:23px}.listing-steps span:not(:last-child)::after{width:18px;margin:0 8px}}.staff-main{max-width:1160px}.staff-hero{background:var(--dark);color:#fff;border-radius:22px;padding:34px;margin-bottom:26px}.staff-hero h1{margin:0;font-size:39px}.staff-section{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;margin:18px 0}.staff-section h2{margin:0;font-size:25px}.audit-filters{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end}.audit-filters label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;color:var(--muted)}.audit-filters input,.audit-filters select{border:1px solid #dddce0;border-radius:9px;padding:10px;background:#fff;color:var(--ink)}.audit-table{overflow:auto}.audit-table table{width:100%;border-collapse:collapse;font-size:13px}.audit-table th,.audit-table td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:top}.audit-table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.audit-table code{font-size:12px}.staff-list{display:grid;gap:10px}.staff-row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px}.staff-row strong{display:block;margin-top:3px}@media(max-width:800px){.audit-filters{grid-template-columns:1fr 1fr}.audit-filters button{grid-column:1/-1}}@media(max-width:520px){.audit-filters{grid-template-columns:1fr}}
/* Staff control panel over every listing. The thumb is here for the same reason it is in
   the seller dashboard: "which photo is on this listing" is the first thing both sides
   need to see, and a staff member removing a listing should be looking at it. */
.staff-tools{display:flex;gap:12px;align-items:end}
.inline-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;color:var(--muted)}
.inline-field select{border:1px solid #dddce0;border-radius:9px;padding:10px;background:#fff;color:var(--ink)}
.staff-listing{gap:12px}
.staff-listing-thumb{width:56px;height:56px;flex:0 0 56px;border-radius:10px;overflow:hidden;position:relative;display:grid;place-items:center;font-size:26px;background:linear-gradient(135deg,#eee4d1,#d2cabd)}
.staff-listing-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.staff-listing-main{flex:1 1 240px;min-width:0}
.staff-listing-main .muted{font-size:12px;color:var(--muted)}
.staff-row .ghost.danger{background:#fbeceb;color:#a2342a;white-space:nowrap}
@media(max-width:640px){.staff-listing{flex-wrap:wrap}.staff-tools{width:100%;justify-content:space-between}}
.suspension-panel{margin:18px 0;padding:18px 20px;border:1px solid #d7b26b;border-radius:14px;background:var(--gold-light);color:var(--dark)}.suspension-panel strong{font-size:17px}.suspension-panel p{margin:6px 0 0}.interest{display:block;margin:8px 0;color:var(--green);font-weight:700}.consent-dialog{min-width:min(520px,calc(100vw - 40px));padding:28px}.consent-dialog label{display:flex;gap:10px;align-items:flex-start;margin:20px 0}.consent-dialog input{margin-top:4px}.consent-dialog button:disabled{opacity:.45;cursor:not-allowed}
/* The dialog asks the seller to read the agreement, so the text is on screen — in a
   fixed-height scroller rather than behind a link, because "read this" with nothing
   to read was the actual complaint. */
.agreement{margin:18px 0 4px;border:1px solid var(--line);border-radius:12px;background:#fbfaf7}
.agreement-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:12px}
.agreement-head span{color:var(--muted);font-weight:700}
.agreement-body{max-height:230px;overflow:auto;padding:14px;font-size:13px;line-height:1.6;white-space:pre-wrap;color:#4b4b53}
.agreement-body:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.agreement-body.failed{color:#8a3b3b}

.identity.guest{border-color:var(--gold);color:var(--gold)}
.section-title{font-size:19px;letter-spacing:.01em;margin:30px 0 12px;text-transform:uppercase;color:var(--muted)}
.listing-list{display:grid;gap:10px}
.listing-list .muted{color:var(--muted);font-size:14px;margin:0}
.listing-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.listing-row b{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted)}
.listing-row h3{font-size:16px;margin:3px 0 4px}
.listing-row p{margin:0;font-size:13px;color:var(--muted)}
.listing-row .tag{white-space:nowrap}

/* ── Login gate ───────────────────────────────────────────────────────────
   Shown when a visitor tries to buy or sell without a Discord session. It is a
   real page rather than a toast, because buying and selling are the only two
   actions that require an account and the reason must be obvious. */
.login-shell { max-width: 640px; }
.login-reasons {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}
.login-reasons article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: baseline;
  padding: 14px 16px;
  border: 1px solid var(--line, #e5e3dd);
  border-radius: 12px;
}
.login-reasons article span { grid-row: span 2; font-size: 22px; }
.login-reasons article h3 { margin: 0; font-size: 15px; }
.login-reasons article p { margin: 0; color: var(--muted, #6b6862); font-size: 14px; }

/* ── Catalog photos ───────────────────────────────────────────────────────
   The catalog used to print an emoji in a gradient box for every listing,
   because nothing turned a listing's cover into something an <img> could
   load. Now the box is a frame and the photo fills it.

   The frame is `position: relative` and the photo is pinned to all four edges
   on purpose. A percentage height inside a grid item resolves against the
   grid area, not the 145px frame, so a plain `height: 100%` let a square photo
   lay itself out at the frame's *width* — 341px tall in a 145px box — and
   `overflow: hidden` cropped it to the top 42%. Pinning it is what makes
   object-fit: cover mean what it says. */
.product-image { overflow: hidden; position: relative; }
.product-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Seller self-service ──────────────────────────────────────────────────
   Edit / photo / mark-sold / delete on the seller's own listings. The row is
   a thumbnail plus the details, with the controls on their own line so they
   stay reachable on a phone instead of wrapping under the status tag. */
.listing-row { align-items: flex-start; }
.listing-thumb { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 10px; overflow: hidden; position: relative; display: grid; place-items: center; font-size: 30px; background: linear-gradient(135deg, #eee4d1, #d2cabd); }
.listing-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-main { flex: 1 1 260px; min-width: 0; }
.listing-main small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.listing-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.listing-actions .ghost { padding: 8px 11px; font-size: 13px; }
.ghost.danger { background: #fbeceb; color: #a2342a; }

/* ── Photo manager ────────────────────────────────────────────────────────
   Cover first, then the rest, each with its own "make cover" and delete, so
   a seller can see exactly which picture the catalog is showing. */
.photo-cover { display: flex; align-items: center; gap: 14px; margin: 14px 0; }
.photo-cover .product-image { width: 96px; height: 96px; border-radius: 12px; font-size: 34px; }
.photo-upload { display: inline-flex; }
.photo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-upload span { background: var(--gold); color: #211a10; padding: 11px 15px; border-radius: 11px; font-weight: 850; cursor: pointer; }
.photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.photo-item { margin: 0; border: 1px solid var(--line, #e5e3dd); border-radius: 12px; overflow: hidden; }
.photo-item.is-cover { border-color: var(--gold); box-shadow: 0 0 0 2px #c99e4f33; }
.photo-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.photo-item figcaption { display: flex; flex-direction: column; gap: 6px; padding: 8px; font-size: 12px; text-align: center; }
.photo-item figcaption b { color: #7d5a22; }
.photo-item figcaption .ghost { padding: 6px 8px; font-size: 12px; }