.board-page { margin:0; padding:0; background:var(--paper); color:var(--ink); font-family:var(--font); }
.board-page main { max-width:1160px; margin:auto; padding:24px; }
.board-page .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); margin:0; background:var(--card); border-bottom:1px solid var(--rule); padding:8px 24px; gap:12px; position:relative; height:auto; min-height:56px; box-sizing:border-box; align-items:center; }
.board-page .preview-toggle { display:none; }
.board-brand { display:flex; align-items:center; justify-content:center; }
.board-brand img { width:44px; height:44px; object-fit:contain; }
.board-page .topbar-actions { margin-left:0; justify-content:flex-end; min-width:0; flex-wrap:wrap; }
.board-page .topbar-tabs { min-width:0; height:auto; }
.board-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; border:1px solid var(--rule); border-radius:14px; background:var(--card); padding:22px; }
.board-steps span { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--paper); margin-right:8px; font-size:12px; }
.board-steps strong { font-size:13px; }
.board-steps p { font-size:12px; margin:8px 0 0; }
.board-handoff { margin-top:18px; padding:16px; background:var(--paper); border-radius:10px; }
.board-handoff p { font-size:13px; margin:8px 0; }
.board-handoff a { display:inline-block; margin:8px 0; font-weight:600; }
.board-head { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:12px; }
.board-eyebrow { font-size:11px; letter-spacing:.13em; color:var(--ink-2); }
.board-head h1 { font-size:28px; letter-spacing:-.035em; line-height:1.1; margin:8px 0; text-transform:none; }
.board-page p { line-height:1.6; color:var(--ink-2); }
.board-page button,.board-page input,.board-page textarea { font:inherit; }
.board-page button { border:1px solid var(--rule); border-radius:8px; padding:10px 14px; background:var(--card); color:var(--ink); cursor:pointer; }
.board-page button:hover { border-color:var(--ink-2); }
.board-page button:disabled { opacity:.45; cursor:default; }
.board-page button.board-primary { background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:600; }
.board-page :focus-visible { outline:2px solid #8756ed; outline-offset:3px; }
.board-safety { padding:16px 20px; border:1px solid var(--rule); border-radius:10px; font-size:13px; line-height:1.6; background:var(--card); }
.board-tabs { display:flex; gap:0; margin:18px 0 0; border-bottom:1px solid var(--rule); padding-bottom:0; }
.board-tabs button { border:0; border-radius:0; border-bottom:2px solid transparent; padding:12px 18px; background:transparent; }
.board-tabs [aria-selected="true"] { border-bottom-color:var(--board-accent,#ab8647); color:var(--ink); font-weight:600; }
.board-toolbar,.board-section-head { display:flex; align-items:center; gap:16px; justify-content:space-between; margin:16px 0; }
.board-search { display:flex; flex-direction:column; gap:8px; flex:1; max-width:600px; font-size:12px; color:var(--ink-2); }
.board-page input,.board-page textarea { width:100%; box-sizing:border-box; border:1px solid var(--rule); border-radius:8px; padding:12px; color:var(--ink); background:var(--card); }
.board-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.board-card { border:1px solid var(--rule); border-radius:6px; padding:14px; background:var(--card); overflow-wrap:anywhere; }
.board-card h3 { margin:0 0 8px; font-size:16px; }
.board-meta { display:flex; gap:12px; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-2); margin-bottom:12px; }
.board-meta a,.board-page a { color:var(--ink); }
.board-item-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:6px; }
.board-item { display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; font-size:11px; line-height:1.4; text-align:center; padding:10px 6px; border:1px solid var(--rule); border-bottom:3px solid #ab8647; border-radius:5px; background:var(--paper); min-height:94px; }
.board-item img { width:100%; height:62px; object-fit:contain; }
.board-item-placeholder { display:grid; place-items:center; height:62px; font-size:32px; color:var(--ink-2); }
.board-exchange { display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:10px; align-items:start; }
.board-side { min-width:0; }
.board-side h3 { font-size:11px; letter-spacing:.08em; margin-bottom:10px; color:var(--ink-2); }
.board-side h3 small { float:right; font-size:10px; font-weight:400; letter-spacing:0; }
.board-exchange-arrow { align-self:center; text-align:center; font-size:28px; color:#ab8647; }
.board-want-tile { min-height:94px; padding:10px 14px; display:flex; align-items:center; justify-content:center; box-sizing:content-box; border:1px solid var(--rule); border-radius:5px; background:var(--paper); font-size:13px; text-align:center; }
.board-trade-note { font-size:13px; margin:12px 0 0; }
.board-details { color:var(--ink-2); font-size:11px; }
.board-details summary,.board-how summary { cursor:pointer; }
.board-details>div { padding:12px 0; }
.board-how { color:var(--ink-2); font-size:12px; }
.board-how .board-steps { margin-top:12px; }
.board-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--rule); }
.board-beta { display:inline-block; vertical-align:middle; font-size:9px; letter-spacing:.08em; padding:4px 6px; margin-left:10px; border:1px solid var(--rule); border-radius:3px; color:var(--ink-2); }
#myOffers,#myListings { grid-template-columns:1fr; }
.board-head p { font-size:13px; margin:6px 0 0; }
.board-status { padding:4px 8px; border-radius:5px; background:var(--paper); font-size:11px; text-transform:none; }
.board-muted,.board-footer { font-size:12px; color:var(--ink-2); line-height:1.6; }
.board-footer { border-top:1px solid var(--rule); margin-top:40px; padding-top:18px; }
.board-message { position:sticky; top:12px; z-index:10; padding:14px 18px; margin:18px 0; border:1px solid var(--rule); border-radius:8px; background:var(--card); }
.board-message.is-error { border-color:#cc5555; }
.board-form { max-width:650px; display:grid; gap:16px; margin-top:20px; }
.board-form label,.board-dialog label { display:grid; gap:8px; font-size:13px; }
.board-inventory { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; max-height:420px; overflow:auto; margin-top:16px; }
.board-choice { display:flex !important; flex-direction:column; border:1px solid var(--rule); background:var(--card); border-radius:8px; padding:12px; font-size:12px; gap:8px; cursor:pointer; }
.board-choice:has(input:checked) { border-color:#8756ed; box-shadow:inset 0 0 0 1px #8756ed; }
.board-choice input { width:16px; height:16px; }
.board-choice img { width:100%; height:65px; object-fit:contain; }
.board-empty { padding:36px 20px; text-align:center; border:1px dashed var(--rule); border-radius:10px; grid-column:1/-1; }
.board-pagination { display:flex; justify-content:center; align-items:center; gap:20px; margin:24px 0; }
.board-dialog { max-width:800px; width:calc(100% - 48px); box-sizing:border-box; border:1px solid var(--rule); background:var(--paper); color:var(--ink); border-radius:14px; padding:24px; }
.board-dialog::backdrop { background:rgba(0,0,0,.55); }
.board-dialog form { display:grid; gap:16px; }
.board-dialog .board-inventory { max-height:260px; }
@media(max-width:640px) { .board-page main { padding:24px 16px; } .board-head,.board-section-head { align-items:flex-start; flex-direction:column; } .board-page .topbar { flex-wrap:wrap; padding:12px 16px; } .board-toolbar { flex-wrap:wrap; } .board-search { min-width:100%; } .board-tabs { gap:4px; } .board-tabs button { flex:1; font-size:12px; padding:10px 8px; } }
@media(max-width:640px) { .board-page .topbar-tabs { order:0; width:auto; justify-content:flex-start; height:auto; } .board-page .topbar-actions { order:0; } .board-steps { grid-template-columns:1fr; gap:16px; padding:18px; } .board-page .auth-box { justify-content:flex-end; flex-wrap:wrap; gap:4px; } .board-page .auth-who { max-width:64px; } .board-page .auth-steam-long { display:none; } .board-page .topbar-actions button { padding:8px; font-size:12px; } }
@media(max-width:640px) { .board-exchange { grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); gap:8px; } .board-item-tiles { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); } .board-card { padding:12px; } .board-meta { gap:8px; } .board-status { text-align:right; font-size:10px; } .board-want-tile { padding:10px 8px; font-size:13px; } }

@media(max-width:800px) { .board-grid { grid-template-columns:1fr; } }
.board-examples { margin-top:24px; padding-top:18px; border-top:1px solid var(--rule); }
.board-examples>summary { cursor:pointer; font-size:14px; font-weight:600; }
.board-examples>summary span { margin-left:8px; color:var(--ink-2); font-size:12px; font-weight:400; }
.board-example .board-status { font-size:10px; }

/* Use the same quiet surfaces, type and controls as Praeco's market pages. */
.board-page main { max-width:1360px; }
.board-head { padding:16px 0 24px; border-bottom:1px solid var(--rule); }
.board-head h1 { font-size:24px; font-weight:600; letter-spacing:-.025em; }
.board-eyebrow { letter-spacing:0; text-transform:none; color:var(--ink-3); }
.board-account { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 0; font-size:12px; color:var(--ink-2); border-bottom:1px solid var(--rule); }
.board-account a { margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.board-account-dot { width:6px; height:6px; border-radius:50%; background:var(--ok); flex-shrink:0; }
.board-tabs { margin-top:12px; }
.board-tabs [aria-selected="true"] { border-bottom-color:var(--ink); }
.board-toolbar { padding:16px; background:var(--card); border:1px solid var(--rule); border-radius:var(--r); }
.board-page button,.board-page input,.board-page textarea { border-radius:var(--r); font-size:12px; }
.board-page button:hover { background:var(--paper); border-color:var(--rule-2); }
.board-page button.board-primary:hover { background:var(--ink-2); color:var(--paper); }
.board-page :focus-visible { outline-color:var(--ink-2); }
.board-card { border-radius:var(--r-lg); padding:20px; }
.board-meta { padding-bottom:12px; border-bottom:1px solid var(--rule); }
.board-item-tiles { grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; }
.board-item { border:1px solid var(--rule); border-radius:var(--r); min-height:136px; padding:12px 8px; }
.board-item img,.board-item-placeholder { height:96px; }
.board-exchange-arrow { color:var(--ink-3); font-size:22px; }
.board-side h3 { letter-spacing:0; font-size:12px; font-weight:500; }
.board-want-tile { box-sizing:border-box; min-height:162px; border-radius:var(--r); text-align:left; justify-content:flex-start; align-items:flex-start; padding:18px; line-height:1.6; }
.board-status { border:1px solid var(--rule); border-radius:var(--r); }
.board-choice:has(input:checked) { border-color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--ink-2); }
.board-choice img { height:96px; }
.board-examples { background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg); padding:18px; }
.board-example { background:var(--paper); }
.board-steps,.board-dialog,.board-handoff { border-radius:var(--r-lg); }
@media(max-width:640px) {
  .board-card { padding:14px; }
  .board-toolbar { padding:12px; gap:12px; }
  .board-account a { margin-left:0; }
  .board-item-tiles { grid-template-columns:1fr; }
  .board-item { min-height:120px; }
  .board-item img,.board-item-placeholder { height:80px; }
  .board-want-tile { min-height:146px; padding:12px; }
  .board-examples { padding:12px; }
}

/* Items from collections: details under the name, value, the trader's profile. */
.board-item-sub{color:var(--ink-2);font-size:10px;line-height:1.3;overflow-wrap:anywhere}
.board-item-value{font-weight:700;font-size:11px}
.board-choice small{color:var(--ink-2)}
.board-for-trade{font-weight:700;color:var(--ink)!important}
.board-trader{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.board-trader img{width:20px;height:20px;border-radius:50%}
.board-filter{display:inline-flex;gap:8px;align-items:center;font-size:13px}
.board-filter button{padding:4px 10px;font-size:12px}
.board-handoff-list{margin:6px 0;padding-left:18px;display:grid;gap:4px;font-size:13px}
#addItemBox .coll-form{margin-top:12px}

/* ===== Cleaner trade page (tb-*) ===== */
.tb { max-width:1080px; }
.tb-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:8px 0 14px; }
.tb-head h1 { margin:0; font-size:26px; font-weight:650; letter-spacing:-.02em; }
.tb-tabs { margin-bottom:14px; }
.tb-hidden-tab { display:none !important; }
.tb-bar { display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.tb-bar input { flex:1; min-width:0; padding:11px 14px; border:1px solid var(--rule); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; font-size:14px; }
.tb-count { font-size:12px; color:var(--ink-3); white-space:nowrap; }
.tb-chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin-bottom:14px; }
.tb-chips::-webkit-scrollbar { display:none; }
.tb-chips button { flex:0 0 auto; padding:6px 12px; font-size:12px; border:1px solid var(--rule); border-radius:999px; background:var(--card); color:var(--ink-2); cursor:pointer; }
.tb-chips button[aria-pressed=true] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tb-list { display:grid; grid-template-columns:1fr; gap:8px; }
.tb-card { padding:12px 14px !important; }
.tb-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; }
.tb-thumbs { display:flex; }
.tb-thumb { width:52px; height:52px; display:grid; place-items:center; border:1px solid var(--rule); border-radius:8px; background:var(--paper); overflow:hidden; margin-left:-10px; box-shadow:0 0 0 2px var(--card); font-size:12px; color:var(--ink-2); }
.tb-thumb:first-child { margin-left:0; }
.tb-thumb img { width:100%; height:100%; object-fit:contain; }
.tb-thumb b { font-size:20px; font-weight:400; color:var(--ink-3); }
.tb-what { min-width:0; display:grid; gap:2px; }
.tb-what p { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-have { font-size:14px; font-weight:600; }
.tb-have small, .tb-want small { font-weight:400; color:var(--ink-3); font-size:11px; }
.tb-want { font-size:13px; color:var(--ink-2); }
.tb-want strong { color:var(--ink); font-weight:600; }
.tb-meta { display:flex !important; gap:6px; align-items:center; font-size:11px !important; color:var(--ink-3); margin:2px 0 0 !important; padding:0 !important; border:0 !important; }
.tb-meta .board-trader img { width:16px; height:16px; }
.tb-act { display:flex; gap:8px; }
.tb-act button { white-space:nowrap; }
.tb-more-row { margin:6px 0 0 !important; padding:0 !important; border:0 !important; justify-content:flex-start !important; }
.tb-more-row .board-details summary { font-size:11px; color:var(--ink-3); }
.tb-card .board-trade-note { margin:8px 0 0; font-size:12px; color:var(--ink-2); }
.tb-pages[hidden], .tb-example[hidden] { display:none !important; }
.tb-example { margin-top:8px; }
.tb-example .board-grid { grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.tb-example .board-example .board-status { opacity:.7; }
.tb-example-post { grid-column:1 / -1; display:flex; justify-content:center; padding:6px 0 2px; }
@media (max-width:640px) { .tb-example .board-grid { grid-template-columns:1fr; } }
.tb-step { padding:18px; margin-bottom:12px; background:var(--card); border:1px solid var(--rule); border-radius:12px; }
.tb-step h2 { display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:16px; }
.tb-step h2 span { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--paper); font-size:12px; }
.tb-who { margin:0 0 10px !important; padding:0 !important; border:0 !important; font-size:12px; }
.tb-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.tb-tools input { flex:1; min-width:160px; padding:9px 12px; border:1px solid var(--rule); border-radius:8px; background:var(--paper); color:var(--ink); font:inherit; }
.tb-how { margin:4px 0 0; }
.tb-how-list { margin:8px 0 0; padding-left:18px; font-size:13px; color:var(--ink-2); line-height:1.6; }
.tb ~ .board-footer, .tb .board-footer { font-size:11px; }
@media (max-width:640px) {
  .tb-row { grid-template-columns:auto minmax(0,1fr); }
  .tb-act { grid-column:1 / -1; }
  .tb-act button { width:100%; }
  .tb-thumb { width:44px; height:44px; }
  .tb-head h1 { font-size:22px; }
}
.tb-meta { justify-content:flex-start !important; flex-wrap:wrap; }