/* QINS Road: an old-web bazaar. Boxed page on a dusty steppe, a caravan on the road under the
   masthead, a 17th-century trade-ledger face for names, small Verdana for everything else. */
@font-face { font-family: 'Fell'; src: url('/fell.woff2') format('woff2'); font-display: swap; }
:root {
  --page: #d4d7c2;
  --box: #ffffff;
  --box-alt: #f5f6ef;
  --border: #c3c7b4;
  --border-soft: #e2e4d8;
  --text: #2b2b25;
  --muted: #6f7266;
  --green: #3d6b2a;
  --green-dark: #284a1a;
  --green-wash: #edf3e4;
  --sand: #a8742c;
  --sand-wash: #f7eedd;
  --head-top: #fbfcf7;
  --head-bot: #e3e8d6;
  --amber: #9a5b00;
  --amber-wash: #fff4d9;
  --red: #9b3324;
  --red-wash: #fbe9e7;
  --code-bg: #f8f8f2;
  --code-text: #222;
  --fell: 'Fell', Georgia, 'Times New Roman', serif;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Verdana, Geneva, Tahoma, sans-serif;
  --mono: 'Courier New', Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 12.5px/1.55 var(--sans); }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: normal; color: #222; margin: 0; line-height: 1.2; }
h1 { font-family: var(--fell); font-size: 28px; }
h2 { font-family: var(--fell); font-size: 21px; }
h3 { font-size: 15px; }
p { margin: 0; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 9; background: #fff; padding: 6px 10px; }

/* ---------- page frame ---------- */
.page { max-width: 1180px; margin: 14px auto 24px; background: var(--box); border: 1px solid #b6bba5; border-radius: 6px; box-shadow: 0 1px 0 #fff inset, 0 2px 6px rgba(50, 60, 30, 0.18); overflow: hidden; }
.top { display: flex; align-items: center; gap: 20px; padding: 16px 18px 6px; background: var(--box); flex-wrap: wrap; }
.wordmark { display: flex; align-items: center; gap: 12px; color: inherit; }
.wordmark:hover { text-decoration: none; }
.wm-glyph { width: 46px; height: 46px; background: url(/mark.svg) center / contain no-repeat; }
.wm-text { display: flex; flex-direction: column; }
.wm-name { font-family: var(--fell); font-size: 40px; line-height: 0.95; color: var(--green-dark); letter-spacing: 0.2px; }
.wm-tag { font-family: var(--fell); font-style: italic; color: var(--muted); font-size: 15px; margin-top: 2px; }
.search { display: flex; flex: 1; max-width: 400px; margin-left: auto; }
.search input { flex: 1; border: 1px solid var(--border); border-right: 0; border-radius: 3px 0 0 3px; padding: 5px 8px; font: inherit; background: #fff; }
.search button { font: inherit; border: 1px solid var(--green-dark); background: linear-gradient(#5f8c40, var(--green)); color: #fff; padding: 5px 12px; border-radius: 0 3px 3px 0; cursor: pointer; }
.account { font-size: 12px; line-height: 1.65; min-width: 170px; padding: 6px 10px; border: 1px solid var(--border-soft); border-radius: 4px; background: var(--box-alt); }
.account:empty { display: none; }
.account .who { font-weight: bold; }
.account .bal { font-weight: bold; color: var(--sand); font-variant-numeric: tabular-nums; }
.account .bal.na { color: var(--muted); font-weight: normal; }
.account b { font-family: var(--mono); font-weight: bold; }
.account.bare { border: 0; background: none; padding: 0; min-width: 0; }
/* the caravan: a road under the masthead */
.caravan { display: block; width: 100%; height: 26px; }
.caravan .road { stroke: var(--sand); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0.8; }
.caravan .cb { fill: var(--green-dark); }
.caravan .cp { fill: var(--sand); }
.caravan .cl { fill: var(--red); }
.caravan .rope { fill: none; stroke: var(--green-dark); stroke-width: 0.8; }
.nav { display: flex; flex-wrap: wrap; gap: 0; background: linear-gradient(#f7f8f2, var(--head-bot)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0 10px; }
.nav a { color: #444; padding: 7px 12px; border-right: 1px solid var(--border-soft); white-space: nowrap; }
.nav a:hover { background: #fff; text-decoration: none; }
.nav a[aria-current='page'] { background: #fff; color: var(--green-dark); font-weight: bold; box-shadow: inset 0 -2px 0 var(--sand); }
.shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 16px; }
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { order: 2; }
  .search { max-width: none; flex-basis: 100%; order: 3; }
  .wm-name { font-size: 32px; }
  .account { min-width: 0; }
}
main { min-width: 0; }
main:focus { outline: none; }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--border); background: var(--box-alt); color: var(--muted); font-size: 11.5px; }

/* ---------- boxes (sidebar + panels) ---------- */
.box { border: 1px solid var(--border); border-radius: 4px; background: var(--box); margin-bottom: 14px; overflow: hidden; }
.box > h3, .box-head { font-family: var(--sans); font-size: 12px; font-weight: bold; color: #444; padding: 6px 10px; background: linear-gradient(var(--head-top), var(--head-bot)); border-bottom: 1px solid var(--border); }
.box ul { list-style: none; margin: 0; padding: 6px 0; }
.box li a { display: flex; justify-content: space-between; gap: 6px; padding: 2px 10px; color: var(--green); }
.box li a span { color: var(--muted); }
.box li a:hover { background: var(--green-wash); text-decoration: none; }
.box .pad { padding: 8px 10px; }
.panel { border: 1px solid var(--border); border-radius: 4px; background: var(--box); padding: 14px; }

/* ---------- headings ---------- */
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dotted var(--border); }
.page-head p { max-width: 70ch; margin-top: 4px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
.section { margin-top: 22px; }
.section > h2, .split h2 { margin-bottom: 8px; }
.welcome { background: var(--green-wash); border: 1px solid #cfdcbd; border-radius: 4px; padding: 12px 14px; margin-bottom: 16px; }
.welcome h1 { font-size: 26px; margin-bottom: 4px; color: var(--green-dark); }
.welcome p { max-width: 80ch; }
.welcome .cta { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.figures { display: flex; gap: 22px; flex-wrap: wrap; margin: 10px 0 0; }
.figures div { display: flex; gap: 5px; align-items: baseline; }
.figures strong { font-size: 14px; }
.figures span { color: var(--muted); }

/* ---------- item grid ---------- */
.lattice { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.node { display: block; border: 1px solid var(--border); border-radius: 4px; background: var(--box); padding: 6px; color: inherit; position: relative; }
.node:hover { border-color: var(--green); text-decoration: none; box-shadow: 0 1px 3px rgba(79, 125, 44, 0.25); }
.node .art { aspect-ratio: 1; background: var(--box-alt); border: 1px solid var(--border-soft); display: grid; place-items: center; overflow: hidden; }
.node .art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.node .art .ph { font-family: var(--mono); color: var(--muted); padding: 6px; text-align: center; font-size: 11px; }
.node .cap { margin-top: 6px; }
.node .cap b { display: block; color: var(--green); font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node .cap span { color: var(--muted); font-size: 11px; }
.node .price { display: block; margin-top: 2px; font-weight: bold; color: var(--sand); }
.node .price.held { color: var(--amber); font-weight: normal; font-style: italic; }

/* ---------- buttons / forms ---------- */
.btn { font: inherit; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 12px; border-radius: 3px; border: 1px solid var(--border); cursor: pointer; line-height: 1.4; color: #333; background: linear-gradient(#ffffff, #e8eadf); }
.btn:hover { text-decoration: none; border-color: #999; }
.btn.primary { color: #fff; border-color: var(--green-dark); background: linear-gradient(#6b9a44, var(--green)); }
.btn.primary:hover { background: linear-gradient(#5f8d3a, var(--green-dark)); }
.btn.small { padding: 2px 8px; font-size: 11.5px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
label { display: flex; flex-direction: column; gap: 3px; font-weight: bold; }
input, select, textarea { font: 12.5px var(--sans); font-weight: normal; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 5px 7px; width: 100%; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px var(--green-wash); }
.form { display: grid; gap: 12px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.hint { font-weight: normal; color: var(--muted); font-size: 11.5px; }
.form-error { color: var(--red); min-height: 1em; }
fieldset.seg { border: 0; padding: 0; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; }
fieldset.seg legend { font-weight: bold; margin-bottom: 4px; }
fieldset.seg label { flex-direction: row; align-items: center; gap: 5px; font-weight: normal; cursor: pointer; }
fieldset.seg input { width: auto; margin: 0; accent-color: var(--green); }
.drop { border: 2px dashed var(--border); border-radius: 4px; padding: 22px; text-align: center; cursor: pointer; background: var(--box-alt); color: var(--muted); font-weight: normal; }
.drop.over { border-color: var(--green); background: var(--green-wash); color: var(--text); }
.drop input { display: none; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; border: 1px solid var(--border); background: var(--box); }
.ledger th { text-align: left; font-weight: bold; color: #444; padding: 5px 8px; background: linear-gradient(var(--head-top), var(--head-bot)); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ledger td { padding: 5px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.ledger tbody tr:nth-child(even) td { background: var(--box-alt); }
.ledger tbody tr:hover td { background: var(--green-wash); }
.ledger td.num, .ledger th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger .thumb { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; border: 1px solid var(--border-soft); background: var(--box-alt); display: inline-block; }
.ledger .namecell { display: flex; align-items: center; gap: 8px; }
.ledger .namecell a { font-weight: bold; }
.blk { font-family: var(--mono); color: var(--muted); font-size: 11.5px; }

/* activity */
.feed { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); background: var(--box); }
.feed li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--border-soft); align-items: baseline; }
.feed li:nth-child(even) { background: var(--box-alt); }
.feed li:last-child { border-bottom: 0; }
.feed .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { display: inline-block; font-size: 10.5px; border-radius: 3px; padding: 0 5px; border: 1px solid; white-space: nowrap; }
.tag.pending { color: var(--amber); border-color: #e6c27a; background: var(--amber-wash); }
.tag.final { color: var(--green-dark); border-color: #b9cfa0; background: var(--green-wash); }
.tag.rejected { color: var(--red); border-color: #e3b0a8; background: var(--red-wash); }
.tag.info { color: #555; border-color: var(--border); background: var(--box-alt); }

/* ---------- item page ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }
.stage { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--border); background: var(--box-alt); padding: 8px; }
.stage img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.stage pre { white-space: pre-wrap; overflow: auto; max-height: 100%; margin: 0; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 10px 0; padding: 8px 10px; background: var(--box-alt); border: 1px solid var(--border-soft); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.attrs { display: flex; flex-wrap: wrap; gap: 6px; }
.attrs div { border: 1px solid var(--border); background: var(--box); padding: 3px 8px; border-radius: 3px; }
.attrs div span { display: block; color: var(--muted); font-size: 10.5px; }
.address { font-family: var(--mono); font-size: 12px; }
.bigprice { font-family: var(--fell); font-size: 30px; color: var(--sand); }
.bigprice small { font-size: 14px; color: var(--muted); margin-left: 4px; }
.progress { height: 10px; background: var(--box-alt); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(#7aab51, var(--green)); }

/* ---------- steps + commands ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
.steps > li::before { content: counter(step); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: bold; font-size: 11px; border: 1px solid var(--border); background: var(--box-alt); color: #555; }
.steps > li.done::before { content: '✓'; background: var(--green-wash); border-color: #b9cfa0; color: var(--green-dark); }
.steps > li.active::before { background: var(--green); border-color: var(--green-dark); color: #fff; }
.steps > li.locked { opacity: 0.55; }
.cmd { position: relative; margin-top: 6px; }
.cmd pre { margin: 0; background: var(--code-bg); color: var(--code-text); border: 1px solid var(--border); border-left: 3px solid var(--green); font: 12px/1.5 var(--mono); padding: 8px 10px; padding-right: 64px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 220px; }
.cmd button { position: absolute; top: 5px; right: 5px; }
.cmd .copy { font: bold 11px var(--sans); background: linear-gradient(#fff, #e8eadf); border: 1px solid var(--border); border-radius: 3px; padding: 2px 8px; cursor: pointer; color: #333; }
.callout { border-radius: 3px; padding: 7px 10px; border: 1px solid; }
.callout.warn { background: var(--amber-wash); border-color: #e6c27a; }
.callout.ok { background: var(--green-wash); border-color: #b9cfa0; }
.callout.bad { background: var(--red-wash); border-color: #e3b0a8; }
.callout.info { background: #f2f5fa; border-color: #c9d3e3; }

/* studio */
.studio { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .studio { grid-template-columns: 1fr; } }
.studio-menu { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: var(--box); }
.studio-menu a { display: block; padding: 6px 10px; border-bottom: 1px solid var(--border-soft); font-weight: bold; }
.studio-menu a:last-child { border-bottom: 0; }
.studio-menu a span { display: block; font-weight: normal; font-size: 11px; color: var(--muted); }
.studio-menu a:hover { background: var(--green-wash); text-decoration: none; }
.studio-menu a[aria-current='page'] { background: var(--green-wash); box-shadow: inset 3px 0 0 var(--green); }
.out { display: grid; gap: 10px; margin-top: 14px; }
.estimate { display: flex; gap: 18px; flex-wrap: wrap; padding: 8px 10px; background: var(--box-alt); border: 1px solid var(--border-soft); }
.estimate div b { display: block; font-size: 14px; }
.estimate div span { color: var(--muted); font-size: 11px; }
details.json summary { cursor: pointer; font-weight: bold; }
details.json pre { background: var(--code-bg); border: 1px solid var(--border-soft); padding: 8px; font: 11.5px var(--mono); overflow: auto; max-height: 200px; white-space: pre-wrap; word-break: break-all; }
.filelist { max-height: 200px; overflow: auto; border: 1px solid var(--border); background: var(--box); }
.filelist div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 8px; border-bottom: 1px solid var(--border-soft); }
.filelist div:nth-child(even) { background: var(--box-alt); }

/* misc */
.empty { padding: 22px 16px; text-align: center; background: var(--box-alt); border: 1px dashed var(--border); border-radius: 4px; }
.empty h3 { font-size: 14px; }
.empty p { color: var(--muted); margin: 6px auto 10px; max-width: 52ch; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.tabs button { font: inherit; background: linear-gradient(#fff, #eceee5); border: 1px solid var(--border); border-bottom: 0; border-radius: 3px 3px 0 0; padding: 4px 10px; color: #555; cursor: pointer; margin-bottom: -1px; }
.tabs button[aria-selected='true'] { background: #fff; color: #222; font-weight: bold; border-bottom: 1px solid #fff; }
.prose { max-width: 72ch; }
.prose h2 { margin: 18px 0 6px; }
.prose p, .prose li { margin-bottom: 8px; }
.prose code { font-family: var(--mono); background: var(--code-bg); border: 1px solid var(--border-soft); padding: 0 3px; }
.dot-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5aa02c; margin-right: 6px; vertical-align: 0; }
.dot-live.off { background: #d08a00; }
.dialog { border: 1px solid var(--border); border-radius: 5px; padding: 16px 18px; width: min(460px, 92vw); background: #fff; color: var(--text); box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
.dialog::backdrop { background: rgba(40, 45, 30, 0.45); }
.dialog form { display: grid; gap: 10px; }
.dialog .actions { display: flex; justify-content: flex-end; gap: 6px; }
.toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); background: var(--green-wash); border: 1px solid #b9cfa0; color: var(--green-dark); padding: 6px 14px; border-radius: 3px; z-index: 20; font-weight: bold; }
.loading { color: var(--muted); padding: 20px 0; font-style: italic; display: flex; align-items: center; gap: 9px; }
.loading::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-soft); border-top-color: var(--green); animation: qspin .75s linear infinite; }

/* ---- escrow / moderation / numbering additions ---- */
.ph.removed { background: repeating-linear-gradient(45deg, #f4f1ea, #f4f1ea 8px, #ece7dc 8px, #ece7dc 16px); color: #8a7f6a; }
.cmd .plain { font-size: 12px; padding: 6px 8px 2px; color: var(--text, #222); }
.trust { margin-top: 10px; border-left: 3px solid #e6c27a; padding-left: 8px; }
.manual > summary, details > summary { cursor: pointer; color: var(--green-dark, #3d6122); }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 20px 0; }
h2 .more { font: 12px var(--sans); margin-left: 8px; }
.linkish { background: none; border: 0; padding: 0; color: #8a3b2e; text-decoration: underline; cursor: pointer; font: inherit; font-size: 11px; }
.seg.stack label { display: block; margin: 4px 0; }
.official { display: block; margin-top: 4px; font-size: 11px; color: #6b5d3e; }
.detail .stage .ph { padding: 24px; text-align: center; line-height: 1.6; }
/* paste-in blocks: one big copy button, the how-to, and the full text on request */
.paste { margin-top: 8px; }
.paste > .hint { margin-top: 8px; max-width: 62ch; }
.paste details.json { margin-top: 6px; }
.paste details.json pre { max-height: 320px; white-space: pre; word-break: normal; }
.textbtn { background: none; border: 0; padding: 0; color: var(--green); font: inherit; cursor: pointer; text-decoration: underline; }
.cmd .plain { padding-right: 72px; }
.walletfind { margin: 4px 0 14px; }
.walletfind .hint { margin: 8px 0 2px; }
.nw-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
/* saved wallets */
.savedw { list-style: none; margin: 4px 0 12px; padding: 0; border: 1px solid var(--border); border-radius: 3px; max-height: 180px; overflow: auto; }
.savedw li { display: flex; border-top: 1px solid var(--border-soft, #e5e5e5); }
.savedw li:first-child { border-top: 0; }
.savedw .pick { flex: 1; text-align: left; background: none; border: 0; padding: 7px 10px; cursor: pointer; font: inherit; color: inherit; }
.savedw .pick:hover, .savedw .pick:focus-visible { background: var(--code-bg, #f4f5ef); }
.savedw .forget { background: none; border: 0; padding: 0 12px; cursor: pointer; color: #8a3b2e; font-size: 16px; }
#walletSwitch { font: inherit; font-size: 12px; max-width: 220px; }
/* profile */
.profile-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; }
.profile-head .avatar { border: 1px solid var(--border); border-radius: 4px; flex: none; }
.profile-head .ph-main { flex: 1; min-width: 0; }
.profile-head h1 { font-size: 30px; color: var(--green-dark); }
.ph-addr { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ph-addr .address { overflow-wrap: anywhere; color: var(--muted); }
.small-copy { font: bold 11px var(--sans); background: linear-gradient(#fff, #e8eadf); border: 1px solid var(--border); border-radius: 3px; padding: 1px 7px; cursor: pointer; color: #333; flex: none; }
.ledgerline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 14px; border: 1px solid var(--border); border-radius: 4px; background: var(--box-alt); }
.ledgerline div { padding: 7px 10px; border-left: 1px solid var(--border-soft); }
.ledgerline div:first-child { border-left: 0; }
.ledgerline dt { color: var(--muted); font-size: 11px; }
.ledgerline dd { margin: 0; font-size: 16px; font-weight: bold; font-variant-numeric: tabular-nums; }
.ledgerline dd small { font-size: 11px; font-weight: normal; color: var(--muted); }
.ledgerline dd.bal { color: var(--sand); }
@media (max-width: 700px) { .ledgerline { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ledgerline div:nth-child(4) { border-left: 0; } .ledgerline div:nth-child(n+4) { border-top: 1px solid var(--border-soft); } }
.ptabs { flex-wrap: wrap; row-gap: 3px; }
.tabs .count { font-weight: normal; color: var(--muted); font-size: 11px; }
.box.stall h3 { background: linear-gradient(var(--sand-wash), #efe0c2); border-bottom-color: #dcc7a0; }
.ptabs button { white-space: nowrap; flex: none; }
@media (max-width: 600px) { .profile-head .avatar { width: 44px; height: 44px; } .profile-head h1 { font-size: 26px; } }
/* ---------- token market ---------- */
a.tick { font-weight: bold; font-family: var(--mono); font-size: 13px; }
.ledger td small, .ledgerline dd small { color: var(--muted); font-weight: normal; font-size: 10.5px; }
.chg { font-weight: bold; font-variant-numeric: tabular-nums; }
.chg.up { color: var(--green); }
.chg.down { color: var(--red); }
.hero h1 { font-size: 30px; }
.tk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tk-name { font-size: 44px; color: var(--green-dark); line-height: 1; }
.tk-price { text-align: right; }
.tk-price .lbl { display: block; color: var(--muted); font-size: 11px; }
.tk-price b { font-family: var(--fell); font-weight: normal; font-size: 32px; color: var(--sand); }
.tk-price small { color: var(--muted); }
.mintstrip { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 16px; border: 1px solid #cfdcbd; border-radius: 4px; background: var(--green-wash); }
.mintstrip > div { flex: 1; min-width: 220px; }
.trade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .trade { grid-template-columns: 1fr; } }
.book h2, .sellbox h2 { margin-bottom: 4px; }
.book .hint { margin-bottom: 8px; }
.book-table td.unit { font-weight: bold; color: var(--sand); }
.book-table tr.own td { background: var(--sand-wash) !important; }
.book-table tr.held td { color: var(--muted); }
.sellbox { border: 1px solid var(--border); border-radius: 4px; background: var(--box-alt); padding: 12px; position: sticky; top: 12px; }
.sellbox .form { gap: 10px; margin-top: 10px; }
.inrow { display: flex; gap: 6px; align-items: center; font-weight: normal; }
.inrow input { flex: 1; }
.sell-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 4px; background: var(--box); }
.sell-sum span { display: block; color: var(--muted); font-size: 11px; }
.sell-sum b { font-size: 14px; font-variant-numeric: tabular-nums; }
.dialog.wide { width: min(640px, 94vw); max-height: 90vh; overflow: auto; }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.lot-head .bigprice { margin-bottom: 2px; }
details.inline-cancel { text-align: left; }
details.inline-cancel[open] { min-width: 280px; }
.ledger.tokens td { padding-top: 7px; padding-bottom: 7px; }
/* prices read better in lining figures than in the old-style Fell numerals */
.tk-price b, .bigprice { font-family: var(--sans); font-weight: bold; letter-spacing: -0.5px; }
.tk-price b { font-size: 28px; }
.bigprice { font-size: 26px; }
.book-table td.num, .ledger.tokens td.num { white-space: nowrap; }
@media (max-width: 600px) { .tk-price { text-align: left; } .tk-name { font-size: 38px; } }
.seg-tabs { margin: 10px 0 0; }
.seg-tabs button { padding: 3px 9px; font-size: 11.5px; }
.lotrow { display: grid; grid-template-columns: 1fr 1fr 24px; gap: 6px; margin-bottom: 6px; align-items: center; }
.lotrow .linkish { font-size: 16px; text-decoration: none; }
details.lotlist { margin: 6px 0; }
details.lotlist table { margin-top: 6px; font-size: 11.5px; }
details.lotlist td { padding: 2px 6px; }
.lotrow.lothead { margin-bottom: 2px; font-size: 11px; color: var(--muted); font-weight: bold; }
#addLot { justify-self: start; }

/* ---------- dollar values ---------- */
.q[data-qtc] { cursor: help; white-space: nowrap; }
.q[data-qtc]:hover { text-decoration: underline dotted; text-underline-offset: 2px; }
.usd { color: var(--muted); font-size: 11px; font-weight: normal; white-space: nowrap; }
.sell-sum .usd { display: block; }
.sell-sum b .q { display: inline; font-size: inherit; color: inherit; }
.qtcpx { align-self: center; padding: 4px 10px; font-size: 12px; color: #444; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qtcpx .lbl { color: var(--muted); font-weight: bold; letter-spacing: .5px; }
.qtcpx b { font-family: var(--sans); }

/* ---------- lots in flight: reserving / reserved / paid ---------- */
.tag.busy { color: var(--amber); border-color: #e6c27a; background: var(--amber-wash); display: inline-flex; align-items: center; gap: 4px; }
.tag.busy.paid { color: var(--green-dark); border-color: #b9cfa0; background: var(--green-wash); }
.spin { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: qspin .8s linear infinite; vertical-align: -1px; flex: none; }
.callout .spin { width: 11px; height: 11px; }
@keyframes qspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }
.book-table tr.held td { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(217, 167, 82, .07) 8px 16px); }
.book-table tr.picked td { background: var(--green-wash); }
.book-table th.sel, .book-table td.sel { width: 26px; text-align: center; padding-left: 4px; padding-right: 0; }
.book-table td.sel input { margin: 0; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- sweep: buy many lots at once ---------- */
.sweep { display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; gap: 10px 14px; align-items: center; margin: 0 0 10px; padding: 10px 12px; border: 1px solid #b9cfa0; border-radius: 4px; background: linear-gradient(var(--green-wash), var(--box)); }
.sweep-slide { display: grid; gap: 2px; font-size: 11px; font-weight: bold; color: var(--green-dark); }
.sweep-slide input { width: 100%; accent-color: var(--green); }
.sweep-sum { font-size: 12px; line-height: 1.5; }
@media (max-width: 700px) { .sweep { grid-template-columns: 1fr; } }

/* ---------- lot math in the sell box ---------- */
.splitrow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: end; }
.splitrow .x { padding-bottom: 7px; color: var(--muted); font-weight: bold; }
.lotmath { margin: -2px 0 0; padding: 7px 9px; border-radius: 4px; background: var(--box); border: 1px dashed var(--border); font-size: 12px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.lotmath b { color: var(--green-dark); }
.lotmath:empty { display: none; }

/* ---------- your tokens on the Trade page ---------- */
.mine-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--sand-wash); font-size: 12px; }
.mine-strip .lbl { font-weight: bold; color: var(--green-dark); margin-right: 4px; }
.mine-strip a { padding: 2px 8px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--box); color: inherit; text-decoration: none; white-space: nowrap; }
.mine-strip a:hover { border-color: var(--sand); }
.mine-strip a small { color: var(--muted); }
.mine-strip a.all { margin-left: auto; border: 0; background: none; color: var(--green-dark); font-weight: bold; }
.trade > *, .sweep > * { min-width: 0; }
.lots-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--border-soft); border-radius: 4px; background: var(--box-alt); font-size: 12px; }

/* ---------- live block + price in the nav ---------- */
.navlive { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; }
.blklive { align-self: center; padding: 4px 10px; font-size: 12px; color: #444; white-space: nowrap; font-variant-numeric: tabular-nums; border-right: 1px solid var(--border-soft); border-radius: 3px; }
.blklive .lbl { color: var(--muted); font-weight: bold; letter-spacing: .5px; }
.blklive b { font-family: var(--sans); }
.blklive .ago { color: var(--muted); font-size: 11px; }
.blklive .dot-live { margin-right: 5px; animation: livepulse 2s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .35; } }
.blklive.flash { animation: blkflash 1.2s ease-out; }
@keyframes blkflash { from { background: rgba(217, 167, 82, .45); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .blklive .dot-live, .blklive.flash { animation: none; } }

/* ---------- network & fees (live fee tracker, priority tip) ---------- */
.netchip { align-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font: 12px var(--sans); color: #444; background: none; border: 0; border-right: 1px solid var(--border-soft); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.netchip:hover { background: var(--box-alt); }
.netchip .lbl { color: var(--muted); font-weight: bold; letter-spacing: .5px; }
.netchip .tipon { font-size: 10.5px; color: var(--amber); border: 1px solid #e6c27a; background: var(--amber-wash); border-radius: 3px; padding: 0 4px; }
.nd { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #79a35a; box-shadow: 0 0 0 2px rgba(121, 163, 90, .2); vertical-align: middle; }
.nd.busy { background: #d49a2a; box-shadow: 0 0 0 2px rgba(212, 154, 42, .22); }
.nd.congested { background: var(--red); box-shadow: 0 0 0 2px rgba(155, 51, 36, .2); }
.tipline { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-soft); }
.tipline .nd { width: 7px; height: 7px; margin-top: -2px; }
#netDialog { width: min(720px, 94vw); }
#netDialog h3 { margin: 16px 0 6px; font-family: var(--fell); font-size: 18px; }
#netDialog h3 .muted { font-family: var(--sans); font-size: 11.5px; }
.nettiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border-soft); background: var(--box-alt); margin-top: 10px; }
.nettiles div { padding: 8px 10px; border-left: 1px solid var(--border-soft); border-top: 1px solid var(--border-soft); min-width: 0; }
.nettiles div:nth-child(3n+1) { border-left: 0; }
.nettiles div:nth-child(-n+3) { border-top: 0; }
.nettiles b { display: block; font-size: 15px; font-weight: normal; font-family: var(--serif); color: #222; }
.nettiles b small { font-size: 11px; color: var(--muted); }
.nettiles b .q, .netcost .q { display: inline; font-size: inherit; color: inherit; font-family: inherit; }
.nettiles span { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; }
.netsay { margin-top: 6px; }
.netbars { margin: 12px 0 0; }
.netbars .bars { display: flex; align-items: flex-end; gap: 3px; height: 70px; padding: 0 2px; border-bottom: 1px solid var(--border); background: repeating-linear-gradient(to top, transparent 0 17px, var(--border-soft) 17px 18px); }
.netbars .bar { flex: 1; min-width: 3px; background: linear-gradient(var(--green), var(--green-dark)); border-radius: 2px 2px 0 0; position: relative; }
.netbars .bar.tipped::after, .tipdot { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--sand); }
.netbars .bar.tipped::after { position: absolute; left: 50%; top: -8px; margin-left: -2.5px; }
.netbars figcaption { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); margin-top: 3px; }
.netbars figcaption span:nth-child(2) { text-align: center; }
.netcost { width: 100%; border-collapse: collapse; font-size: 12px; }
.netcost th { text-align: left; font-weight: bold; color: var(--muted); font-size: 11px; border-bottom: 1px solid var(--border); padding: 4px 6px; }
.netcost td { border-bottom: 1px solid var(--border-soft); padding: 4px 6px; vertical-align: top; }
.netcost td:first-child { white-space: nowrap; }
.tipset { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 10px; border: 1px solid var(--border-soft); background: var(--sand-wash); border-radius: 3px; }
.tipset label { flex-direction: row; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-weight: normal; cursor: pointer; }
.tipset input[type=radio] { margin: 0; accent-color: var(--green); }
.tipset #tipCustom { width: 90px; padding: 2px 5px; border: 1px solid var(--border); border-radius: 3px; font-size: 12px; }
.tipset .btn { margin-left: auto; }
.tipwhy { display: grid; gap: 6px; margin-top: 8px; font-size: 12px; }
.tipwhy code, .btc code { font-size: 11.5px; background: var(--code-bg); padding: 0 3px; }
details.btc { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 8px; }
details.btc summary { cursor: pointer; font-weight: bold; color: var(--green-dark); }
details.btc table { margin-top: 6px; }
@media (max-width: 600px) {
  .nettiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nettiles div { border-left: 1px solid var(--border-soft) !important; border-top: 1px solid var(--border-soft) !important; }
  .nettiles div:nth-child(2n+1) { border-left: 0 !important; }
  .nettiles div:nth-child(-n+2) { border-top: 0 !important; }
  .netcost td:first-child { white-space: normal; }
  .netbars figcaption span:nth-child(2) { display: none; }
  .tipset .btn { margin-left: 0; }
  .netchip .lbl { display: none; }
}

/* ---------- live readouts in the nav ----------
   One recessed "ledger plate" on the same line as the tabs, set apart from them by a sand diamond.
   When space is short the labels go first (.live-compact); only on narrow screens does the plate
   take its own row (.live-wrapped). app.js fitNav() picks the state by measuring. */
.nav { flex-wrap: nowrap; align-items: stretch; }
.nav.live-wrapped { flex-wrap: wrap; }
.navlive { margin-left: auto; display: flex; align-items: center; gap: 12px; padding-left: 12px; flex: none; }
.navlive::before { content: ''; width: 7px; height: 7px; background: var(--sand); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(168, 116, 44, .14); flex: none; }
.navplate { display: flex; align-items: stretch; height: 25px; background: #e6e9da; border: 1px solid #ccd0bd; border-radius: 3px; box-shadow: inset 0 1px 2px rgba(50, 60, 30, .12), 0 1px 0 rgba(255, 255, 255, .8); overflow: hidden; }
.navplate > * { display: inline-flex; align-self: stretch; align-items: center; gap: 6px; margin: 0; padding: 0 11px; font: 12px/1 var(--sans); color: #3a3c33; white-space: nowrap; background: none; border: 0; border-radius: 0; font-variant-numeric: tabular-nums; position: relative; }
.navplate > [hidden] { display: none; }
.navplate > * + *::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: #c3c7b2; }
.navplate .lbl { color: var(--muted); font-weight: normal; letter-spacing: 0; }
.navplate b { font-family: var(--sans); font-weight: bold; color: #2b2b25; }
.navplate .ago { color: var(--muted); font-size: 11px; min-width: 4.6em; }
.navplate .dot-live, .navplate .nd { width: 7px; height: 7px; margin: 0; box-shadow: none; flex: none; }
.navplate .chg { font-size: 11px; }
.navplate .tipon { font-size: 10px; line-height: 14px; padding: 0 4px; }
.netchip { cursor: pointer; }
.netchip:hover, .netchip:focus-visible { background: rgba(255, 255, 255, .7); }
.blklive.flash { animation: blkflash 1.2s ease-out; }
/* tight: drop the words, keep the numbers (hover still explains each one) */
.nav.live-compact .navplate .lbl:not(.keep), .nav.live-compact .navplate .ago { display: none; }
/* narrow: the plate gets its own row under the tabs */
.nav.live-wrapped .navlive { flex-basis: 100%; justify-content: center; padding: 6px 0 7px; border-top: 1px solid var(--border-soft); margin: 0; }
.nav.live-wrapped .navlive::before { display: none; }
@media (max-width: 600px) {
  .nav.live-wrapped .navplate { width: 100%; }
  .nav.live-wrapped .navplate > * { flex: 1 1 auto; justify-content: center; padding: 0 6px; }
  .netchip .lbl { display: none; }
}

/* ---------- priority tip card (mint and buy boxes) ---------- */
.tipcard { margin: 0 0 10px; padding: 8px 10px 9px; background: var(--sand-wash); border: 1px solid #e3cfa6; border-left: 3px solid var(--sand); border-radius: 3px; }
.tipcard.on { background: #fbf1dc; border-left-color: var(--amber); }
.tipcard .tc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 5px; }
.tipcard .tc-head b { font-family: var(--fell); font-size: 16px; font-weight: normal; color: #5a3d10; }
.tc-seg { display: inline-flex; border: 1px solid #d9bf8c; border-radius: 3px; overflow: hidden; background: #fff; }
.tc-seg button { font: 12px var(--sans); padding: 3px 10px; border: 0; border-left: 1px solid #e8d6b0; background: none; color: #5a4a2a; cursor: pointer; white-space: nowrap; }
.tc-seg button:first-child { border-left: 0; }
.tc-seg button:hover { background: #fdf6e7; }
.tc-seg button[aria-checked="true"] { background: var(--sand); color: #fff; font-weight: bold; }
.tc-seg button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.tc-usd { font-size: 11px; color: var(--muted); }
.tipcard p { font-size: 12px; line-height: 1.5; color: #4a4434; }

/* ---------- your transactions in flight (dock, bottom right) and the mint page's "Your mints" ---------- */
.inflight { position: fixed; right: 16px; bottom: 16px; z-index: 15; width: min(340px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--green); border-radius: 4px; box-shadow: 0 4px 16px rgba(40, 50, 25, .22); font-size: 12px; }
.inflight[hidden] { display: none; }
.if-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--border-soft); }
.if-head b { font-family: var(--fell); font-size: 16px; font-weight: normal; color: var(--green-dark); }
.if-x { border: 0; background: none; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 2px; }
.inflight ul, .mintstat ul { list-style: none; margin: 0; padding: 0; }
.inflight ul { max-height: 50vh; overflow: auto; }
.inflight li, .mintstat li { display: flex; gap: 9px; align-items: flex-start; padding: 7px 10px; border-top: 1px solid var(--border-soft); }
.inflight li:first-child { border-top: 0; }
.if-ic { flex: none; width: 16px; height: 16px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: bold; color: #fff; }
.if-pending .if-ic { color: var(--amber); }
.if-done .if-ic { background: var(--green); }
.if-failed .if-ic, .if-warn .if-ic { background: var(--red); }
.if-warn.if-pending .if-ic { background: none; color: var(--red); }
.if-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.if-what { color: var(--text); }
.if-sub { color: var(--muted); font-size: 11px; }
.if-pending .if-sub { color: var(--amber); }
.if-warn .if-sub, .if-failed .if-sub { color: var(--red); }
.mintstat { margin-top: 14px; border: 1px solid var(--border-soft); border-radius: 3px; background: var(--box-alt); }
.mintstat h3 { padding: 8px 10px 4px; font-family: var(--fell); font-size: 17px; font-weight: normal; }
.mintstat > p { padding: 0 10px 10px; font-size: 12px; }
@media (max-width: 600px) { .inflight { right: 8px; bottom: 8px; width: calc(100vw - 16px); } }

/* drops: the mint panel on a collection page, and the issuer's upload list */
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.drop-panel { border-color: var(--green); }
.drop-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.drop-head h2 { margin: 0; }
.lattice.small { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.lattice.small .node { padding: 3px; }
.upload-bar { margin: 10px 0 4px; }

/* collection thumbnail (spec §3.13) and the Drops page */
.col-head { display: flex; gap: 16px; align-items: center; }
.col-thumb { width: 72px; height: 72px; object-fit: cover; image-rendering: pixelated; border: 1px solid var(--border); border-radius: 4px; background: var(--box-alt); flex: none; }
.drop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.drop-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 4px; background: var(--box); color: inherit; overflow: hidden; }
.drop-card:hover { border-color: var(--green); text-decoration: none; }
.drop-card .art { position: relative; aspect-ratio: 1; background: var(--box-alt); display: grid; place-items: center; border-bottom: 1px solid var(--border-soft); }
.drop-card .art img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.drop-card .art .ph { color: var(--muted); font-size: 12px; }
.drop-card .body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.drop-card .body b { color: var(--green); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.drop-card .art .tag { position: absolute; top: 6px; left: 6px; font-size: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.drop-card .figures { margin: 0; gap: 4px 10px; flex-wrap: wrap; font-size: 11px; }
.drop-card .figures > div { white-space: nowrap; }
.drop-card .figures strong { font-size: 12px; }
.drop-card .btn { align-self: flex-start; margin-top: 4px; }
@media (max-width: 560px) { .col-head { align-items: flex-start; } .col-thumb { width: 56px; height: 56px; } }

/* refresh button by the block number; Tokens | Collections switch on Trade */
/* refresh: only the icon turns (the button keeps its box), with an ease that reads as one deliberate
   turn; app.js lets the current turn finish before stopping, so it never snaps back */
.refreshbtn svg { display: block; transform-origin: 50% 50%; transition: transform .25s ease; }
.refreshbtn:hover svg { transform: rotate(40deg); }
.refreshbtn.is-loading svg { animation: refturn .8s cubic-bezier(.45, .05, .35, 1) infinite; }
.refreshbtn.is-loading { color: var(--sand); cursor: progress; }
@keyframes refturn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .refreshbtn.is-loading svg { animation-duration: 2s; animation-timing-function: linear; } .refreshbtn:hover svg { transform: none; } }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin: 0 0 14px; }
.seg a { padding: 6px 16px; color: var(--green); font-weight: bold; font-size: 13px; }
.seg a + a { border-left: 1px solid var(--border); }
.seg a[aria-selected="true"] { background: var(--green); color: #fff; }
.seg a:hover { text-decoration: none; }

/* top menu dropdowns: Trade, Mint, Help */
.dd { position: relative; display: flex; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-right: 1px solid var(--border-soft); background: none; color: #444; font: inherit; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.dd-btn:hover, .dd.open .dd-btn { background: #fff; }
.dd.on .dd-btn { background: #fff; color: var(--green-dark); font-weight: bold; box-shadow: inset 0 -2px 0 var(--sand); }
.dd .caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; opacity: .7; }
.dd.open .caret { transform: translateY(1px) rotate(225deg); }
.dd-menu { display: none; position: absolute; top: 100%; left: -1px; z-index: 50; min-width: 270px; max-width: calc(100vw - 20px); background: #fff; border: 1px solid var(--border); border-top: 2px solid var(--sand); border-radius: 0 0 6px 6px; box-shadow: 0 10px 28px rgba(40, 50, 20, .16); padding: 6px; }
.dd-menu.wide { min-width: 520px; }
.dd.open .dd-menu { display: flex; flex-direction: column; animation: ddIn .16s ease-out; }
.dd.open .dd-menu.wide { flex-direction: row; gap: 6px; }
.dd-right .dd-menu { left: auto; right: -1px; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dd-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dd-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 6px 10px 2px; }
.nav .dd-menu a { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border: 0; border-radius: 4px; color: inherit; white-space: normal; }
.nav .dd-menu a b { color: var(--green-dark); font-size: 13px; }
.nav .dd-menu a span { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.nav .dd-menu a:hover, .nav .dd-menu a:focus-visible { background: var(--green-wash); outline: none; }
.nav .dd-menu a[aria-current='page'] { background: var(--sand-wash); box-shadow: none; font-weight: normal; }
@media (prefers-reduced-motion: reduce) { .dd.open .dd-menu { animation: none; } .dd .caret { transition: none; } }
@media (max-width: 640px) {
  .dd { position: static; }
  .dd-menu, .dd-menu.wide { left: 8px; right: 8px; min-width: 0; max-width: none; top: 100%; }
  .dd.open .dd-menu.wide { flex-direction: column; }
  .nav { position: relative; }
}

/* sidebar boxes fold open and shut */
details.box > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-family: var(--sans); font-size: 12px; font-weight: bold; color: #444; padding: 6px 10px; background: linear-gradient(var(--head-top), var(--head-bot)); border-bottom: 1px solid transparent; user-select: none; }
details.box > summary::-webkit-details-marker { display: none; }
details.box > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid #777; border-bottom: 1.5px solid #777; transform: rotate(-45deg); transition: transform .18s ease; }
details.box[open] > summary { border-bottom-color: var(--border); }
details.box[open] > summary::after { transform: rotate(45deg); }
details.box[open] > .box-body { animation: boxIn .18s ease-out; }
details.box.stall > summary { background: linear-gradient(var(--sand-wash), #efe0c2); }
details.box.stall[open] > summary { border-bottom-color: #dcc7a0; }
@keyframes boxIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { details.box[open] > .box-body { animation: none; } details.box > summary::after { transition: none; } }

/* the live readout (refresh, block, fee, price) is part of the menu bar: full height, flush with the
   menu items, one thin divider between readouts, and every readout's text on one baseline */
.nav .navlive { align-self: stretch; align-items: stretch; gap: 0; padding-left: 0; margin-left: auto; }
.nav .navlive::before { display: none; }
.nav .navplate { height: auto; align-items: stretch; background: none; border: 0; border-left: 1px solid var(--border-soft); border-radius: 0; box-shadow: none; overflow: visible; }
.nav .navplate > * { display: inline-flex; align-items: baseline; align-self: center; gap: 5px; padding: 0 12px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; line-height: 1; }
.nav .navplate > * + * { border-left: 1px solid var(--border-soft); }
.nav .navplate > * + *::before { display: none; }
.nav .navplate .dot-live, .nav .navplate .nd { align-self: center; }
.nav .navplate .ago, .nav .navplate .chg { font-size: 11px; }
.nav .navplate > .refreshbtn { align-self: stretch; align-items: center; justify-content: center; width: 40px; padding: 0; color: var(--green); cursor: pointer; }
.nav .navplate > .refreshbtn:hover { background: #fff; color: var(--sand); }
.nav .navplate > .netchip { cursor: pointer; }
.nav .navplate > .netchip:hover { background: #fff; }
.nav.live-wrapped .navplate { border-left: 0; justify-content: center; }
.nav.live-wrapped .navlive { padding: 0; }
.nav.live-wrapped .navplate > * { padding-top: 7px; padding-bottom: 7px; }

/* the Mempool page, and transaction rows that open it */
.if-link { cursor: pointer; }
.if-link:hover { background: var(--green-wash); }
.if-go { margin-left: auto; align-self: center; flex: none; padding: 0 2px 0 6px; font-size: 18px; line-height: 1; color: var(--muted); text-decoration: none; }
.if-link:hover .if-go { color: var(--green); text-decoration: none; }
.nav .navplate > .blklive { cursor: pointer; }
.nav .navplate > .blklive:hover { background: #fff; }
.nettiles.mp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 4px; }
.nettiles.mp-tiles div { border-top: 0; border-left: 1px solid var(--border-soft); }
.nettiles.mp-tiles div:first-child { border-left: 0; }
@media (max-width: 600px) { .nettiles.mp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nettiles.mp-tiles div:nth-child(3) { border-left: 0; } .nettiles.mp-tiles div:nth-child(n+3) { border-top: 1px solid var(--border-soft); } }
.mp-feed .blk { white-space: nowrap; color: var(--amber); }
.mp-feed .spin { display: inline-block; width: 9px; height: 9px; vertical-align: -1px; }
.feed li.mine { box-shadow: inset 3px 0 0 var(--green); }
.feed li.hl { background: var(--sand-wash) !important; box-shadow: inset 3px 0 0 var(--sand); animation: hlpulse 1.6s ease-out 2; }
@keyframes hlpulse { 0% { background: #f3dcae; } 100% { background: var(--sand-wash); } }
@media (prefers-reduced-motion: reduce) { .feed li.hl { animation: none; } }

/* "copy, paste, press Enter" next to every command */
.runsteps { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11px; color: var(--muted); }
.runsteps li { display: inline-flex; align-items: center; gap: 5px; }
.runsteps li + li::before { content: '›'; color: var(--border); margin-right: 1px; font-size: 13px; }
.runsteps i { font-style: normal; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--green-wash); color: var(--green-dark); font-size: 10px; font-weight: bold; }
.cmd .runsteps { margin-top: 5px; }
.runbox { border: 1px solid var(--border); border-left: 3px solid var(--green); background: var(--box-alt); border-radius: 3px; padding: 10px 12px; }
.runbox-say { margin: 0 0 8px; font-size: 12px; color: var(--text); }
.runsteps.big { font-size: 13px; color: var(--text); gap: 8px 10px; margin: 0; }
.runsteps.big i { width: 20px; height: 20px; font-size: 11px; background: var(--green); color: #fff; }
.runsteps.big li + li::before { display: none; }
.runsteps.big li + li { padding-left: 4px; }
.runsteps.big .btn { margin: 0; }
@media (max-width: 560px) { .runsteps.big { flex-direction: column; align-items: flex-start; } .runsteps.big li + li { padding-left: 0; } }

/* quick prices from the floor */
.pricepicks { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.pricepicks .pick { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 3px; background: #fff; cursor: pointer; font: 11px var(--sans); color: var(--muted); line-height: 1.2; }
.pricepicks .pick b { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.pricepicks .pick:hover { border-color: var(--green); background: var(--green-wash); }
.pricepicks .pick.on { border-color: var(--green); background: var(--green-wash); box-shadow: inset 0 0 0 1px var(--green); }
.pricepicks .pick.on b { color: var(--green-dark); }
.pricepicks-none { margin: 4px 0 0; }
.fillall { margin-top: 10px; }

/* drop panel: pieces held by unpaid reservations, with a countdown */
.holdnote { display: flex; gap: 9px; align-items: baseline; margin-top: 10px; padding: 8px 11px; border: 1px solid #ecd9b0; border-left: 3px solid var(--sand); background: var(--sand-wash); border-radius: 3px; font-size: 13px; color: var(--text); }
.holdnote .spin { color: var(--sand); flex: none; }
.holdnote b[data-until] { font-variant-numeric: tabular-nums; color: var(--sand); }

/* seller-paid fee (v7): the small line under an amount in a summary */
.sell-sum div > small.muted { display: block; font-size: 11px; line-height: 1.3; margin-top: 2px; }

/* swap box on a token page: QTC in, tokens out, filled from the cheapest listings */
.swap { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #b9cfa0; border-radius: 5px; background: linear-gradient(var(--green-wash), var(--box)); display: grid; gap: 9px; }
.swap-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.swap-head b { font-family: var(--fell); font-weight: normal; font-size: 22px; color: var(--green-dark); }
.swap-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.swap-row .seg-tabs { margin: 0; }
.swap-in { flex: 1 1 220px; display: flex; align-items: center; border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 0 10px; }
.swap-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 8px 0; font-size: 18px; font-variant-numeric: tabular-nums; }
.swap-in:focus-within { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-wash); }
.swap-in span { color: var(--muted); font-weight: bold; font-size: 13px; }
.swap-slip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; }
.swap-slip label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.swap-quote { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 9px 12px; background: #fff; border: 1px solid var(--border-soft); border-radius: 4px; }
.swap-quote div > span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.swap-quote b { font-size: 18px; font-variant-numeric: tabular-nums; }
.swap-quote .arrow { font-size: 22px; color: var(--sand); }
.swap-facts { margin: 0; font-size: 12px; line-height: 1.55; }
.swap-facts b.warn { color: var(--red); }
.swap .btn { justify-self: start; }
/* curve listing: the shape picker and a preview of the lot prices */
.curve-shape { display: grid; gap: 4px; margin-top: 6px; }
.curve-shape label { font-size: 12px; }
.curve-viz { display: block; width: 100%; height: 64px; margin-top: 8px; border-bottom: 1px solid var(--border); }
.curve-viz rect { fill: var(--sand); opacity: .85; }
.curve-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
/* the global label is a column and inputs are full width: the swap and curve controls are rows */
.swap .swap-in { flex-direction: row; font-weight: normal; }
.swap .swap-in input, .swap .swap-in input:focus { width: auto; border: 0; box-shadow: none; padding: 8px 0; font-size: 18px; background: none; }
.swap-slip label, .curve-shape label { flex-direction: row; align-items: center; gap: 5px; font-weight: normal; }
.swap-slip input[type=radio], .curve-shape input[type=radio] { width: auto; margin: 0; accent-color: var(--green); }
.curve-shape label { flex-wrap: wrap; }
.curve-shape label b { font-weight: bold; }

/* ---------- charts (charts.js) ---------- */
.chart-sec h2 { margin-bottom: 4px; }
.chart { background: var(--box); border: 1px solid var(--border); padding: 10px 12px 8px; margin-top: 8px; }
.chart-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 6px; }
.chart-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.chart-seg button { font: 12px var(--sans); background: var(--box-alt); color: var(--muted); border: 0; border-right: 1px solid var(--border); padding: 4px 10px; cursor: pointer; }
.chart-seg button:last-child { border-right: 0; }
.chart-seg button[aria-pressed="true"] { background: var(--green); color: #fff; }
.chart-seg button:hover:not([aria-pressed="true"]) { background: var(--green-wash); color: var(--text); }
.chart-legend { display: inline-flex; gap: 14px; font: 12px var(--sans); color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chart-plot { position: relative; }
.chart-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-plot rect[tabindex]:focus { outline: none; }
.chart-plot rect[tabindex]:focus-visible { outline: 2px solid var(--green); }
.chart-tick { font: 11px var(--sans); fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart-end { font: bold 12px var(--sans); fill: var(--text); }
.chart-tip { position: absolute; pointer-events: none; background: var(--box); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 7px 10px; font: 12px var(--sans); color: var(--text); white-space: nowrap; z-index: 2; }
.chart-tip b { display: block; font-size: 13px; margin-bottom: 3px; }
.chart-tip span { color: var(--muted); }
.chart-tip .muted { color: var(--muted); margin-top: 3px; }
.chart-empty { color: var(--muted); font: 13px var(--sans); padding: 28px 4px; text-align: center; margin: 0; }
.chart-reset { margin-left: auto; }
.chart-reset[hidden] { display: none; }
.chart-ohlc { display: flex; flex-wrap: wrap; gap: 2px 12px; font: 12px var(--sans); color: var(--muted); min-height: 18px; margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.chart-ohlc i { font-style: normal; margin-right: 3px; }
.chart-ohlc b { font-weight: bold; color: #3d7a2a; }
.chart-ohlc b.down { color: #b5483a; }
.chart-ohlc .when { margin-left: auto; }
svg.chart-trading { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
svg.chart-trading:focus { outline: none; }
svg.chart-trading:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.chart-tag { font: bold 11.5px var(--sans); fill: #fff; font-variant-numeric: tabular-nums; }
.chart-help { margin: 4px 0 0; font: 11.5px var(--sans); color: var(--muted); }
.chart-table { margin-top: 6px; font: 12px var(--sans); }
.chart-table summary { cursor: pointer; color: var(--green); }
.chart-table .table-wrap { max-height: 280px; overflow: auto; margin-top: 6px; }

/* ---------- Send (header button + dialog) ---------- */
.sendbtn { font: bold 11px var(--sans); color: #fff; background: var(--green); border: 1px solid var(--green-dark); border-radius: 3px; padding: 1px 8px; margin-left: 4px; cursor: pointer; vertical-align: 1px; }
.sendbtn:hover { background: var(--green-dark); }
#sendDialog { width: min(560px, calc(100vw - 32px)); }
#sendDlgForm .amtrow { display: flex; gap: 6px; align-items: stretch; }
#sendDlgForm .amtrow input { flex: 1; min-width: 0; }
#sendDlgForm .amtrow .btn { flex: none; }
#sendDlgForm label[hidden] { display: none; }
#sendDlgOut .plain .mono { word-break: break-all; }

/* ---------- collection browser: filters ---------- */
.node .art { position: relative; }
.node .rank { position: absolute; top: 4px; left: 4px; font: bold 10px var(--sans); color: var(--text); background: rgba(255,255,255,.9); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; line-height: 16px; }
.cf-top { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 12px; }
.cf-top .tabs { margin: 0; }
.cf-q { flex: 1 1 200px; min-width: 160px; width: auto !important; }
.cf-sort { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; margin: 0 !important; font-size: 12px; color: var(--muted); }
.cf-sort select { width: auto; }
.cf-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.cf-panel { background: var(--box); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow: auto; }
.cf-panel > summary { font: bold 13px var(--sans); cursor: pointer; padding: 2px 0 6px; color: var(--green-dark); }
.cf-group { border-top: 1px solid var(--border-soft); padding: 8px 0; }
.cf-group h3 { font: bold 12px var(--sans); margin: 0 0 6px; }
.cf-group h3 small { font-weight: normal; color: var(--muted); }
.cf-price { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.cf-price input { width: 100% !important; min-width: 0; padding: 4px 6px; }
.cf-trait > summary { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; font-size: 12px; list-style: none; }
.cf-trait > summary::-webkit-details-marker { display: none; }
.cf-trait > summary::before { content: '▸'; color: var(--muted); margin-right: 4px; }
.cf-trait[open] > summary::before { content: '▾'; }
.cf-trait > summary b { flex: 1; text-transform: capitalize; }
.cf-trait ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow: auto; }
.cf-trait li label { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 12px; padding: 3px 2px; margin: 0 !important; cursor: pointer; font-weight: normal; }
.cf-trait li label:hover { background: var(--green-wash); }
.cf-trait li input { width: auto !important; margin: 0; }
.cf-trait .v { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-trait .n { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-find { width: 100% !important; margin-top: 6px; padding: 3px 6px; font-size: 12px; }
.cf-status { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 10px; font-size: 12px; }
.cf-status .chip { font: 11px var(--sans); background: var(--green-wash); border: 1px solid var(--border); border-radius: 12px; padding: 2px 9px; cursor: pointer; color: var(--text); }
.cf-status .chip:hover { border-color: var(--green); }
.cf-status .chip i { font-style: normal; color: var(--muted); margin-left: 2px; }
.cf-rankhint { margin-left: auto; }
.colbrowse.is-loading .cf-results { opacity: .55; transition: opacity .15s; }
@media (max-width: 760px) {
  .cf-body { grid-template-columns: 1fr; }
  .cf-panel { position: static; max-height: none; }
  .cf-rankhint { margin-left: 0; }
}
.attrs a { color: inherit; display: block; }
.attrs a:hover { text-decoration: none; border-color: var(--green); }
.attrs small { display: block; color: var(--muted); font-size: 10px; margin-top: 1px; }
/* collection list view */
.cf-view { flex: none; }
.collist td { vertical-align: middle; }
.collist tbody tr { cursor: pointer; }
.collist tbody tr:hover td { background: var(--green-wash); }
.cl-item { display: flex; align-items: center; gap: 10px; color: inherit; min-width: 180px; }
.cl-item:hover { text-decoration: none; }
.cl-item b { display: block; color: var(--green); }
.cl-item small { display: block; font-size: 11px; }
.cl-thumb { width: 40px; height: 40px; flex: none; border: 1px solid var(--border-soft); background: var(--box-alt); display: grid; place-items: center; overflow: hidden; }
.cl-thumb img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.cl-thumb .ph { font-size: 8px; padding: 2px; text-align: center; }
.cl-trait { display: inline-block; font-size: 11px; background: var(--box-alt); border: 1px solid var(--border-soft); border-radius: 3px; padding: 0 5px; margin: 1px 3px 1px 0; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.cl-trait i { font-style: normal; color: var(--muted); }
@media (max-width: 900px) { .collist .traits-col { display: none; } }

/* ---------- token page: a trading screen (trade card, chart, live activity) ---------- */
body.trading .page { max-width: 1440px; }
@media (min-width: 820px) {
  body.trading .shell { grid-template-columns: minmax(0, 1fr); }
  body.trading .sidebar { order: 2; }
}
.tk-grid { display: grid; gap: 14px; align-items: start; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'trade' 'mine' 'chart' 'side'; }
.tk-col { display: contents; }
.tk-trade { grid-area: trade; }
.tk-mine { grid-area: mine; }
.tk-chart { grid-area: chart; }
.tk-side { grid-area: side; }
.tk-grid > *, .tk-col > * { min-width: 0; }
@media (min-width: 820px) {
  .tk-grid { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: 'trade side' 'mine side' 'chart side'; }
}
/* wide: buy/sell and your listings | the chart | order book, activity, holders */
@media (min-width: 1180px) {
  .tk-grid { grid-template-columns: 330px minmax(0, 1fr) 320px; grid-template-areas: 'left mid side'; }
  .tk-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; align-self: stretch; }
  .tk-left { grid-area: left; }
  .tk-mid { grid-area: mid; }
}
.tk-trade { border: 1px solid #b9cfa0; border-radius: 6px; background: linear-gradient(var(--green-wash), var(--box) 140px); padding: 10px 12px 12px; }
.tk-tabs { display: flex; margin: 0 0 10px; }
.tk-tabs button { flex: 1; font-size: 14px; font-weight: bold; }
.tk-trade .swap { margin: 0; padding: 0; border: 0; background: none; }
.tk-trade .sellbox { position: static; border: 0; padding: 0; background: none; }
.tk-trade .sellbox h2 { display: none; }
.tk-none { padding: 10px 2px; }
.tk-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tk-chart-head h2 { margin: 0; }

/* your listings, under the trade card */
.tk-mine { border: 1px solid var(--border); border-radius: 6px; background: var(--box); padding: 10px 12px; }
.tk-mine h2 { font-size: 16px; margin: 0 0 6px; display: flex; align-items: baseline; gap: 6px; }
.tk-mine h2 .count { font: 12px var(--sans); color: var(--muted); }
.tk-mine h2 .btn { margin-left: auto; font: bold 12px var(--sans); }
.tk-mine > p { margin: 0; font-size: 13px; }
.tk-mine .linkish { font-size: 13px; color: var(--green); }
.tk-mine .lots-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.tk-mine .hint { margin: 6px 0 0; font-size: 11px; }
.my-lots { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--border-soft); }
.my-lots li { padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.my-lots li.held, .my-lots li.going { color: var(--muted); }
.ml-row { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
.ml-row > span:first-child { flex: 1 1 auto; }
.ml-total { white-space: nowrap; }
.ml-row details.inline-cancel { margin: 0 !important; }
.ml-row details.inline-cancel[open] { flex-basis: 100%; }
.ml-st { font-size: 11.5px; margin-top: 3px; }
.my-lots details.inline-cancel { margin-top: 3px; font-size: 12px; }
.my-lots details.inline-cancel[open] { min-width: 0; }

/* the order book, under the chart: a shaded bar per row for how much is for sale up to that price */
.book-sum { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.book-sum b { color: var(--text); font-variant-numeric: tabular-nums; }
.book-wrap { max-height: 420px; overflow-y: auto; }
.book-wrap thead th { position: sticky; top: 0; z-index: 1; }
.book-table tbody tr { background-image: linear-gradient(to left, rgba(181, 72, 58, 0.11) var(--d, 0%), transparent var(--d, 0%)); }
.book-table tbody tr td, .book-table tbody tr:nth-child(even) td { background: transparent; }
.book-table tbody tr:hover td { background: rgba(61, 107, 42, 0.07); }
.book-table td.unit { color: var(--down, #b5483a); }
.book-hint { margin: 6px 0 0; }

/* the side panel: order book (first), activity, holders. On wider screens it is as tall as the
   columns beside it and scrolls inside, so the page itself doesn't get longer. */
.tk-side { border: 1px solid var(--border); border-radius: 6px; background: var(--box); display: flex; flex-direction: column; height: min(560px, 80vh); }
@media (min-width: 820px) { .tk-side { align-self: stretch; height: auto; min-height: 400px; } }
.tk-side-head { display: flex; border-bottom: 1px solid var(--border); background: var(--box-alt); border-radius: 6px 6px 0 0; }
.tk-side-head button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font: bold 13px var(--sans); color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 6px 7px; cursor: pointer; white-space: nowrap; position: relative; }
.tk-side-head button:hover { color: var(--text); }
.tk-side-head button[aria-selected="true"] { color: var(--green-dark); border-bottom-color: var(--green); background: var(--box); }
.tk-side-head button:first-child { border-top-left-radius: 6px; }
.tk-side-head .count { font-weight: normal; font-size: 11px; color: var(--muted); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5aa036; box-shadow: 0 0 0 3px rgba(90, 160, 54, 0.18); }
.tk-side-head .live-dot { width: 7px; height: 7px; box-shadow: none; }
.tk-side-head button.has-new::after { content: ''; position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #d9a752; }
.tk-side-body { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 820px) { .tk-side-body { contain: size; } }
.tk-side .rail-list { overflow: visible; }
.tk-side .book-sum { padding: 7px 10px 5px; margin: 0; gap: 2px 14px; font-size: 12px; justify-content: space-between; }
.sbook { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sbook th { position: sticky; top: 0; z-index: 1; background: var(--box-alt); color: var(--muted); font-weight: normal; font-size: 11px; text-align: left; padding: 4px 10px; border-bottom: 1px solid var(--border-soft); }
.sbook td { padding: 4px 10px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.sbook .num { text-align: right; }
.sbook tbody tr { background-image: linear-gradient(to left, rgba(181, 72, 58, 0.12) var(--d, 0%), transparent var(--d, 0%)); }
.sbook.holders tbody tr { background-image: none; }
.sbook tbody tr:hover td { background: rgba(61, 107, 42, 0.07); }
.sbook td.unit { color: #b5483a; font-weight: bold; }
.sbook tr.own td { background: rgba(217, 167, 82, 0.13); }
.sbook tr.held td { color: var(--muted); }
.sbook tr.held td.unit { font-weight: normal; }
.sbook .spin { margin-right: 4px; vertical-align: -1px; }
.sbook small.you { font: bold 10px var(--sans); color: var(--sand); }
.sbook .linkish { font-size: 12px; }
.sbook a.mono { font-family: var(--mono); font-size: 11.5px; }
.side-note { padding: 6px 10px; margin: 0; font-size: 11px; }
.rail-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.rail-i { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.rail-i:last-child { border-bottom: 0; }
.rail-i.unconf { opacity: 0.8; }
.rk { font-size: 11px; font-weight: bold; text-align: center; border-radius: 3px; padding: 2px 0; border: 1px solid; }
.k-buy .rk { color: #fff; background: var(--green); border-color: var(--green-dark); }
.k-mint .rk { color: var(--green-dark); background: var(--sand-wash); border-color: #e2cfa6; }
.k-list .rk { color: #4a4d42; background: #f1f2ea; border-color: #d4d7c6; }
.k-off .rk, .k-send .rk { color: var(--muted); background: transparent; border-color: var(--border); }
.ra { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra b { font-variant-numeric: tabular-nums; }
.ra span { color: var(--sand); font-weight: bold; }
.k-mint .ra span, .k-off .ra span, .k-send .ra span { color: var(--muted); font-weight: normal; }
.ra small { display: block; color: var(--muted); font-size: 10.5px; }
.rt { text-align: right; font-size: 11px; line-height: 1.3; }
.rt a { display: block; font-family: var(--mono); font-size: 10.5px; }
.rt time { color: var(--muted); }
.rail-empty { padding: 14px 12px; color: var(--muted); }
.rail-i.fresh { animation: rail-in 1.8s ease-out; }
@keyframes rail-in { from { background: #fbe8bf; } to { background: transparent; } }

/* the pointer to the next part of the page, on phones */
.tk-cue { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 15; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--green-dark); background: var(--green); color: #fff; font: bold 13px var(--sans); box-shadow: 0 4px 14px rgba(40, 60, 20, 0.28); cursor: pointer; }
.tk-cue[hidden] { display: none; }
.tk-cue i { font-style: normal; display: inline-block; animation: cue-bob 1.1s ease-in-out 3; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .rail-i.fresh, .tk-cue i { animation: none; } }
.tk-trade .swap-head b { display: none; }
@media (max-width: 480px) {
  .ledgerline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledgerline div:nth-child(odd) { border-left: 0; }
  .ledgerline div:nth-child(even) { border-left: 1px solid var(--border-soft); }
  .ledgerline div:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
  .ledgerline dd { font-size: 15px; }
}
@media (max-width: 600px) {
  .book-table th:nth-child(4), .book-table td:nth-child(4) { display: none; }
  .book-table td, .book-table th { padding-left: 6px; padding-right: 6px; }
}

/* the token page aims to fit on one screen: a tighter head, stats, mint bar and chart heading */
body.trading .tk-head { margin-bottom: 8px; }
body.trading .tk-name { font-size: 38px; }
body.trading .ledgerline { margin-bottom: 10px; }
body.trading .ledgerline div { padding: 4px 10px; }
body.trading .ledgerline dd { font-size: 15px; }
body.trading .mintstrip { padding: 6px 12px; margin-bottom: 10px; gap: 6px 16px; }
body.trading .mintstrip .progress { margin-top: 4px !important; }
body.trading .tk-chart-head { margin-bottom: 4px; }
body.trading .tk-chart-head h2 { font-size: 18px; }
body.trading .tk-chart .chart { margin-top: 0; padding: 8px 10px 6px; }
.chart-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; margin-top: 3px; }
.chart-foot .chart-help { margin: 0; }
.chart-foot .chart-table { margin-top: 0; }
.chart-foot .chart-table[open] { flex-basis: 100%; order: 2; }
/* the stats sit in the head row, between the name and the price */
.tk-head .ledgerline { flex: 1 1 100%; order: 3; margin: 0; }
@media (min-width: 1180px) {
  body.trading .tk-head { flex-wrap: nowrap; align-items: center; gap: 14px; }
  body.trading .tk-head > div:first-child { flex: 0 0 auto; max-width: 260px; }
  body.trading .tk-head .ledgerline { order: 0; flex: 1 1 auto; }
  body.trading .tk-head .ledgerline dt { white-space: nowrap; }
  body.trading .tk-head .ledgerline dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.trading .tk-price { flex: 0 0 auto; }
  /* your listings fill the left column down to the bottom of the chart, scrolling inside */
  .tk-left .tk-mine.has-lots { flex: 1 1 0; min-height: 150px; display: flex; flex-direction: column; }
  .tk-left .tk-mine.has-lots .my-lots { flex: 1 1 0; min-height: 0; max-height: none; contain: size; }
}
body.trading .tk-head p.muted { font-size: 12px; }
/* quick amounts under the swap input: each tap adds */
.swap-quick { display: flex; gap: 6px; margin: 8px 0 2px; flex-wrap: wrap; }
.swap-quick button { flex: 1 1 0; min-width: 52px; font: bold 12.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--green-dark); background: var(--box); border: 1px solid #b9cfa0; border-radius: 4px; padding: 6px 4px; cursor: pointer; }
.swap-quick button:hover { background: var(--green-wash); border-color: var(--green); }
.swap-quick button:active { background: #d9e8c8; }
.swap-quick button.clear { flex: 0 0 auto; color: var(--muted); border-color: var(--border); font-weight: normal; padding: 6px 10px; }
/* token pages are a trading screen: no sidebar boxes under them */
body.trading .sidebar { display: none; }