/* DEEPMINE UI v4 — 交易 area: exchange sheet (收购 / 市场 / 挂单), TON/DMT swap sheet,
   规则 (access) sheet and the #mining-buyout native dialog.
   Every rule is scoped to an area root (.exchange, .ton-panel, .access-preview, .buyout-dialog).
   Numbers never wrap mid-number (no overflow-wrap:anywhere): they stay on one line and shrink via --len
   (character count written by the renderer) or a container-relative clamp. */
@layer pages {
  /* Area-local material: the round jade medallion behind emblems and swap arrows. */
  .exchange, .ton-panel, .access-preview, .buyout-dialog { --mk-medallion: radial-gradient(circle at 50% 32%, #2f6a50, #163b2c 75%); }

  /* ═════════════════════════ Exchange sheet ═════════════════════════ */
  .exchange { display: grid; gap: var(--s-3); min-width: 0; }
  .exchange-page { display: grid; gap: var(--s-3); min-width: 0; }
  .exchange-page > *, .exchange > * { min-width: 0; }
  .exchange .section-head { margin: 10px 2px -2px; }
  .exchange .section-head h3 { min-width: 0; }
  .exchange .section-head > span { flex: none; }

  /* Tabs: the shared .seg--tabs (glyph over label, gold underline), pinned while the page scrolls.
     Labels wrap to two lines instead of truncating (e.g. "My listings" at 320px). */
  .exchange-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    box-shadow: none;
  }
  /* Sticky stacking context: ::before is the opaque shelf that hides scrolled content around the tray,
     ::after is the tray surface itself (the .seg inset look); both sit under the tab buttons. */
  .exchange-tabs::before, .exchange-tabs::after { content: ''; position: absolute; pointer-events: none; }
  .exchange-tabs::before {
    z-index: -2;
    inset: -24px calc(var(--gutter) * -1) -10px;
    background: var(--noise), linear-gradient(180deg, #0e2820 0%, #0e2820 76%, rgb(14 40 32 / 0) 100%);
  }
  .exchange-tabs::after {
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--line-1);
    background: var(--surface-inset);
    box-shadow: inset 0 2px 6px rgb(0 0 0 / .35), 0 8px 16px -10px rgb(0 0 0 / .9);
  }
  .exchange-tab-icon { display: grid; place-items: center; height: 24px; overflow: visible; }
  .exchange-tab-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .exchange-coin-pair { display: inline-flex; align-items: center; filter: saturate(.55) brightness(.85); }
  .exchange-coin-pair .currency-icon { width: 21px; height: 21px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--surface-inset); }
  .exchange-coin-pair .currency-icon + .currency-icon { margin-left: -7px; }
  .exchange-tab-link .exchange-tab-label { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
  /* Leaves the sheet for the TON/DMT page: a small external arrow in the corner. */
  .exchange-tabs .exchange-tab-out { position: absolute; top: 5px; right: 5px; width: 11px; height: 11px; color: var(--text-3); }
  @media (hover: hover) and (pointer: fine) {
    .exchange-tabs > button:hover .gi, .exchange-tab-link:hover .exchange-coin-pair { filter: none; }
  }

  /* Notes in the exchange: tips carry a gold book glyph. */
  .exchange-note { margin: 0; }
  .exchange-tip .icon { color: var(--gold-300); }

  /* ── 收购 round hero: countdown dial + estimated reward ── */
  .exchange-round-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
    padding: 14px 16px 12px;
    background:
      radial-gradient(90% 120% at 0% 0%, rgb(80 200 140 / .12), transparent 55%),
      radial-gradient(120% 90% at 100% 0%, rgb(245 200 105 / .16), transparent 55%),
      var(--grad-panel), var(--surface-2);
  }
  .exchange-round { display: grid; }
  .exchange-round-dial { position: relative; display: grid; place-items: center; width: 112px; aspect-ratio: 1; }
  .exchange-round-dial::before {
    content: '';
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: repeating-conic-gradient(from -1deg, rgb(246 214 143 / .4) 0 2deg, transparent 2deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 4px));
    mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 4px));
  }
  .exchange-round-ring { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: rotate(-90deg); overflow: visible; }
  .exchange-ring-track { fill: rgb(4 14 10 / .6); stroke: rgb(206 228 196 / .1); stroke-width: 9; }
  .exchange-ring-fill {
    fill: none;
    stroke: var(--gold-300);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 100;
    transition: stroke var(--dur-3);
  }
  .exchange-round-time { position: relative; display: grid; justify-items: center; text-align: center; }
  .exchange-round-time strong { font: 800 30px/1 var(--font-display); color: var(--text-1); letter-spacing: .02em; text-shadow: 0 2px 6px rgb(0 0 0 / .65); white-space: nowrap; }
  /* The caption stays inside the ring interior; longer (English) captions wrap to a second line. */
  .exchange-round-time span {
    max-width: 66px;
    margin-top: 3px;
    font-size: var(--fs-11);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-3);
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  /* Ending: the ring and clock turn amber (a state change, no looping animation). */
  .exchange-round-summary.is-ending .exchange-ring-fill { stroke: #ffae5a; }
  .exchange-round-summary.is-ending .exchange-round-time strong { color: #ffc27a; }

  .exchange-estimate { container-type: inline-size; display: grid; gap: 2px; min-width: 0; }
  .exchange-estimate-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 700; color: var(--gold-200); }
  .exchange-estimate-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px; min-width: 0; }
  .exchange-estimate-value b {
    min-width: 0;
    max-width: 100%;
    font: 800 31px/1.08 var(--font-display);
    font-size: clamp(16px, calc((100vw - 190px) / var(--len, 8) * 1.75), 31px);
    font-size: clamp(16px, calc(100cqi / var(--len, 8) * 1.75), 31px);
    color: var(--gold-100);
    white-space: nowrap;
    text-shadow: 0 0 18px rgb(245 200 105 / .35), 0 2px 0 rgb(0 0 0 / .35);
  }
  .exchange-estimate-value small { font: 700 13px/1 var(--font-display); color: var(--gold-300); }
  .exchange-estimate-note { font-size: var(--fs-11); color: var(--text-3); }
  .exchange-context { margin-top: 6px; padding-top: 7px; border-top: 1px dashed var(--line-2); font-size: var(--fs-12); line-height: 1.45; color: var(--text-2); }
  .exchange-round-window {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--line-1);
    font-size: var(--fs-12);
    color: var(--text-3);
  }
  .exchange-round-window .gi { width: 18px; height: 18px; }

  /* ── Forms (交售 / 创建挂单) ── */
  .exchange-form { display: grid; gap: var(--s-3); }
  .exchange-form-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-card-title); font-weight: 800; }
  .exchange-form-title .gi { width: 30px; height: 30px; margin: -3px 0; }
  .exchange-picker { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: end; gap: var(--s-3); }
  .exchange-picker-art { width: 66px; border-radius: var(--r-md); }
  /* Compact count (1.8万 / 123.5万) stays inside the tile; the exact count is in the select and the title. */
  .exchange-picker-art .item-count { right: 4px; bottom: 7px; max-width: calc(100% - 8px); padding-inline: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .exchange .field > span:first-child { font-size: var(--fs-12); font-weight: 700; color: var(--text-3); }
  .exchange-quantity-copy { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; font-size: var(--fs-12); color: var(--text-3); }
  .exchange-quantity-copy b { font: 700 14px/1 var(--font-display); color: var(--text-1); }
  .exchange-quantity-copy .chip { white-space: normal; text-align: left; }
  .exchange input { font-family: var(--font-display); font-weight: 600; }
  .exchange input::placeholder { font-family: var(--font-ui); font-weight: 400; }
  .exchange-form .btn--lg { white-space: normal; min-height: 52px; padding-block: 8px; }
  .exchange-field-note { margin-top: -4px; font-size: var(--fs-11); line-height: 1.5; color: var(--text-3); text-align: center; text-wrap: balance; }
  .exchange-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Quick-fill (exchange-panel.mjs renderQuickFill): a plain .seg of five shares right under the quantity input; numbers in
     the display face. The 40px plates get a 44×44 hit area from the ::before extender (2px above and below, 3px to each
     side: neighbours meet in the 6px gap without overlapping); overflow: visible undoes the .seg clip that would cut it
     off (as .seg--pills does; the percent labels never need an ellipsis). */
  .exchange-fill { gap: 6px; margin-top: -4px; }
  .exchange-fill > button { position: relative; overflow: visible; padding-inline: 2px; font-family: var(--font-display); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
  .exchange-fill > button::before { content: ''; position: absolute; inset: -2px -3px; }
  .exchange-fill > button:not(:disabled):not([aria-pressed="true"]):active { background: rgb(255 255 255 / .06); }
  .exchange-fill > button:disabled { color: var(--text-4); }
  .exchange-fee-list {
    padding: 2px 12px;
    border-radius: 12px;
    background: var(--surface-inset);
    border: 1px solid var(--line-1);
    box-shadow: inset 0 2px 5px rgb(0 0 0 / .3);
  }
  .exchange-fee-list .kv { padding: 7px 0; font-size: var(--fs-12); }
  .exchange-fee-list dd { font-family: var(--font-display); font-size: var(--fs-13); }
  .exchange-fee-list .exchange-fee-net { color: var(--jade-300); }
  .exchange-form .exchange-empty { padding: 18px 12px 16px; background: var(--surface-inset); box-shadow: inset 0 2px 6px rgb(0 0 0 / .35); }

  /* ── Global round data ── */
  .exchange-cap { display: grid; gap: 10px; padding: 12px 14px; }
  .exchange-cap-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
  .exchange-cap-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 700; color: var(--text-3); }
  .exchange-cap-label .icon { width: 15px; height: 15px; color: var(--jade-300); }
  .exchange-cap-value { font: 800 22px/1 var(--font-display); color: var(--text-1); }
  .exchange-cap-value small { margin-left: 4px; font: 700 12px/1 var(--font-display); color: var(--text-3); }
  .exchange-cap-meter > span { transition: width var(--dur-4) var(--ease-out); }
  .exchange-cap p { font-size: var(--fs-12); color: var(--text-3); }
  .exchange-cap p b { font-family: var(--font-display); color: var(--text-1); }
  .exchange-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exchange-stats .stat-value { font-size: clamp(17px, 5.4vw, 21px); }
  .exchange-stats .stat-value b { font-weight: 700; }
  .exchange-stats .stat-value small { font-family: var(--font-display); font-weight: 700; }
  .exchange-stat-mine .stat-label { color: var(--gold-200); }

  /* ── Settlements ── */
  .exchange-receipts { display: grid; gap: 12px; }
  .exchange-receipt .list-icon { background: linear-gradient(180deg, #1f5a42, #164232); border-color: rgb(120 230 170 / .28); }
  .exchange-receipt .list-title { font-family: var(--font-display); font-size: var(--fs-15); }
  .exchange-receipt > b { flex: none; font: 800 15px/1 var(--font-display); color: var(--jade-300); text-align: right; }
  .exchange-receipt > b small { margin-left: 3px; font: 700 11px/1 var(--font-display); color: var(--text-3); }

  /* ── Market / orders heroes ── */
  .exchange-heading { min-height: 84px; padding: 12px 14px; }
  .exchange-heading .panel-hero-art { height: 88%; }
  [data-exchange-page="market"] .exchange-heading { --hero-art: url(/art/premium/workshop.jpg); }

  /* ── Listing cards ── */
  .exchange-listings { display: grid; gap: 10px; }
  .exchange-listing {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-color: color-mix(in srgb, var(--rarity, var(--rarity-common)) 24%, var(--line-1));
  }
  .exchange-listing-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .exchange-listing-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
  .exchange-mineral-art { flex: none; width: 58px; }
  .exchange-listing-copy { min-width: 0; display: grid; gap: 3px; }
  .exchange-listing-copy h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: var(--fs-card-title); font-weight: 800; }
  .exchange-listing-copy h4 > span:first-child { min-width: 0; overflow-wrap: break-word; }
  .exchange-listing-copy p { font-size: var(--fs-12); color: var(--text-3); }
  .exchange-listing-copy p b { font: 700 14px/1 var(--font-display); color: var(--text-1); white-space: nowrap; }
  .exchange-listing-price { flex: none; min-width: 0; max-width: 56%; display: grid; justify-items: end; gap: 3px; text-align: right; }
  /* The price stays on one line; --len (its character count) scales the type down for long prices. */
  .exchange-listing-price .price { max-width: 100%; font-size: clamp(14px, calc((100vw - 150px) / var(--len, 6) * 1.1), 21px); font-weight: 800; }
  .exchange-listing-price .price > span { min-width: 0; white-space: nowrap; }
  .exchange-listing-price > span { font-size: var(--fs-11); font-weight: 700; letter-spacing: .04em; color: var(--text-3); }
  .exchange-listing-price > small { font: 700 11px/1 var(--font-display); color: var(--gold-300); white-space: nowrap; }
  .exchange-seller { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--fs-12); color: var(--text-3); }
  .exchange-seller .icon { width: 14px; height: 14px; color: var(--text-3); }
  .exchange-seller > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .exchange-seller > span > span { color: var(--text-2); font-family: var(--font-display); font-weight: 600; }
  .exchange-buy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--line-1);
  }
  .exchange-buy-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 46px;
    padding-left: 12px;
    border-radius: 12px;
    background: var(--surface-inset);
    border: 1px solid var(--line-2);
    box-shadow: inset 0 2px 4px rgb(0 0 0 / .35);
    font-size: var(--fs-12);
    font-weight: 700;
    color: var(--text-3);
    transition: border-color var(--dur-2), box-shadow var(--dur-2);
  }
  .exchange-buy-qty:focus-within { border-color: var(--gold-300); box-shadow: inset 0 2px 4px rgb(0 0 0 / .35), 0 0 0 3px rgb(245 200 105 / .18); }
  .exchange-buy-qty > span { flex: none; }
  .exchange-buy-qty input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px 0 4px; border: 0; background: transparent; box-shadow: none; font-size: 17px; font-weight: 700; text-align: center; }
  .exchange-buy-qty input:focus { border: 0; box-shadow: none; }
  .exchange-buy .btn { min-width: 0; white-space: normal; }
  .exchange-listing.is-mine {
    border-color: var(--line-gold);
    background: linear-gradient(90deg, rgb(245 200 105 / .09), transparent 46%), var(--grad-panel), var(--surface-1);
  }
  .exchange-listing.is-mine::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--grad-gold);
    box-shadow: 0 0 8px rgb(245 200 105 / .55);
  }
  [data-exchange-page="orders"] .exchange-listing.is-mine::before { content: none; }
  .exchange-listing.is-sold-out .exchange-listing-name { opacity: .6; }
  .exchange-listing.is-selected { box-shadow: var(--hl-top), var(--sh-1), 0 0 0 2px var(--gold-300); }
  .exchange-mine-flag, .exchange-status { font-family: var(--font-ui); }
  .exchange-listing > .btn { white-space: normal; }

  /* Short / narrow screens */
  @media (max-width: 359px) {
    .exchange-tabs > button { padding-inline: 2px; }
    .exchange-coin-pair .currency-icon { width: 19px; height: 19px; }
    .exchange-round-summary { gap: 6px 12px; padding: 12px; }
    .exchange-round-dial { width: 96px; }
    .exchange-round-dial::before { inset: 13px; }
    .exchange-round-time strong { font-size: 25px; }
    .exchange-round-time span { max-width: 56px; margin-top: 2px; }
    .exchange-listing-head { align-items: flex-start; }
    .exchange-mineral-art { width: 50px; }
    .exchange-picker { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
    .exchange-picker-art { width: 58px; }
  }

  /* ═════════════════════════ TON / DMT swap sheet ═════════════════════════ */
  .ton-panel { display: grid; gap: var(--s-3); min-width: 0; }
  .ton-panel > * { min-width: 0; }
  /* Currency units next to small amounts stay readable (>= 11px). */
  .ton-panel .currency-amount small { font-size: max(11px, .72em); }

  .ton-wallet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .ton-balance {
    container-type: inline-size;
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 10px 12px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-gold);
    background: radial-gradient(120% 100% at 100% 0%, rgb(245 200 105 / .13), transparent 60%), var(--grad-panel), var(--surface-1);
    box-shadow: var(--hl-top), var(--sh-1);
  }
  .ton-balance--ton { border-color: rgb(51 166 240 / .34); background: radial-gradient(120% 100% at 100% 0%, rgb(51 166 240 / .16), transparent 60%), var(--grad-panel), var(--surface-1); }
  .ton-balance-label { display: flex; align-items: center; gap: 7px; min-width: 0; font: 800 13px/1 var(--font-display); letter-spacing: .06em; color: var(--text-2); }
  .ton-balance-label .currency-icon { filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45)); }
  .ton-balance-label small { margin-left: auto; font: 600 11px/1 var(--font-ui); letter-spacing: 0; color: var(--text-3); }
  /* One line, scaled by length; an absurdly long balance ends in an ellipsis (the exact figure is in title/aria-label). */
  .ton-balance strong { display: block; min-width: 0; font: 800 23px/1.1 var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @supports (font-size: 1cqi) {
    .ton-balance strong { font-size: clamp(11px, calc(100cqi / var(--balance-length, 1) * 1.62), 24px); }
  }

  .ton-market-status { margin: 0; }

  .ton-selling-access {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-color: rgb(255 196 92 / .34);
    background: radial-gradient(110% 120% at 0% 50%, rgb(255 196 92 / .12), transparent 60%), var(--grad-panel), var(--surface-1);
  }
  .ton-selling-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-md); background: rgb(0 0 0 / .25); border: 1px solid rgb(255 196 92 / .3); }
  .ton-selling-icon .gi { width: 30px; height: 30px; }
  .ton-selling-copy { min-width: 0; display: grid; gap: 3px; }
  .ton-selling-copy strong { font-size: var(--fs-14); font-weight: 800; color: var(--text-gold); }
  .ton-selling-fee { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; }
  .ton-selling-fee .currency-amount { font-size: var(--fs-15); color: var(--gold-100); }
  .ton-selling-fee > small { font-size: var(--fs-11); color: var(--text-3); }
  .ton-selling-free { font-size: var(--fs-11); line-height: 1.4; color: var(--text-3); }
  .ton-selling-access .btn { white-space: nowrap; }

  /* minmax(0,1fr): the single column never grows to the segment's nowrap width, so long labels ellipsize inside the card. */
  .ton-trade-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3); }
  /* A long direction label keeps the line and pushes the coin + unit onto a second line; it wraps itself only as a last resort. */
  .ton-side-tabs > button { flex-wrap: wrap; align-content: center; gap: 2px 5px; min-height: 44px; padding-block: 4px; font-size: var(--fs-15); line-height: 1.15; white-space: normal; }
  .ton-side-label { min-width: 0; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; text-align: center; }
  .ton-side-asset { flex: none; display: inline-flex; align-items: center; gap: 5px; }
  .ton-side-tabs .currency-icon { flex: none; width: 18px; height: 18px; }
  .ton-side-unit { font-family: var(--font-display); font-weight: 800; }
  .ton-side-tabs > button[data-ton-side="buy"][aria-pressed="true"] { box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 1px 0 rgb(0 0 0 / .45), 0 0 0 1px rgb(120 230 170 / .45); color: var(--jade-200); }
  .ton-side-tabs > button[data-ton-side="sell"][aria-pressed="true"] { background: linear-gradient(180deg, #5a4524, #3f3019); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 1px 0 rgb(0 0 0 / .45), 0 0 0 1px rgb(255 196 92 / .45); color: var(--gold-100); }

  .ton-swap-box {
    display: grid;
    gap: 6px;
    padding: 10px 12px 10px 14px;
    border-radius: var(--r-md);
    background: var(--surface-inset);
    border: 1px solid var(--line-2);
    box-shadow: inset 0 2px 6px rgb(0 0 0 / .4);
    transition: border-color var(--dur-2), box-shadow var(--dur-2);
  }
  .ton-swap-box:focus-within { border-color: var(--gold-300); box-shadow: inset 0 2px 6px rgb(0 0 0 / .4), 0 0 0 3px rgb(245 200 105 / .16); }
  .ton-trade-card:has(.ton-error.note--danger) .ton-swap-box { border-color: rgb(255 120 90 / .6); }
  .ton-trade-card:has(.ton-error.note--warn) .ton-swap-box { border-color: rgb(255 196 92 / .5); }
  .ton-swap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
  .ton-amount-label { flex: 0 1 auto; min-width: 0; font-size: var(--fs-12); font-weight: 700; color: var(--text-3); overflow-wrap: break-word; }
  .ton-swap-avail { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); color: var(--text-3); }
  .ton-swap-avail b { font-family: var(--font-display); font-weight: 700; color: var(--text-2); }
  .ton-amount-control { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .ton-amount-control input {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: 800 30px/1.1 var(--font-display);
    color: var(--text-1);
  }
  .ton-amount-control input:focus { border: 0; box-shadow: none; }
  .ton-asset {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 5px;
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / .06);
    border: 1px solid var(--line-2);
    font: 800 14px/1 var(--font-display);
    color: var(--text-1);
  }
  .ton-field-help { margin-top: -6px; padding: 0 4px; font-size: var(--fs-12); color: var(--text-3); }

  /* Quote is the gold action until a valid quote exists; then execute takes over and quote steps back
     to the jade plate. Gold CTAs carry text only (a re-rendered line icon is hidden). Busy state = label + disabled. */
  .ton-panel .btn { white-space: normal; }
  .ton-quote-button > .icon { display: none; }
  .ton-trade-card:has(.ton-quote-result) .ton-quote-button {
    --btn-h: 44px;
    font-size: var(--fs-14);
    color: var(--text-1);
    text-shadow: none;
    background: var(--grad-jade-plate);
    border-color: rgb(150 225 185 / .26) rgb(150 225 185 / .14) rgb(0 0 0 / .3);
    box-shadow: var(--sh-plate-jade);
  }
  .ton-error, .ton-quote-expired { margin: 0; }
  /* Inline errors sit right under the amount they describe, above the quote action. */
  .ton-error { order: 1; margin-top: -4px; }
  .ton-quote-button { order: 2; }
  .ton-quote-result, .ton-quote-expired { order: 3; }

  .ton-quote-result {
    position: relative;
    display: grid;
    gap: 10px;
    margin-top: 8px;
    padding: 20px 12px 12px;
    border-radius: var(--r-md);
    border: 1px solid rgb(120 230 170 / .28);
    background: radial-gradient(100% 70% at 50% 0%, rgb(80 200 140 / .14), transparent 70%), linear-gradient(180deg, var(--surface-1), var(--bg-2));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
  }
  .ton-swap-arrow {
    position: absolute;
    top: -17px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    border-radius: 50%;
    background: var(--mk-medallion);
    border: 1px solid var(--line-gold);
    color: var(--gold-200);
    box-shadow: 0 3px 8px rgb(0 0 0 / .5);
  }
  .ton-swap-arrow .icon { width: 17px; height: 17px; }
  .ton-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-12); font-weight: 700; color: var(--text-3); }
  /* Received amount: one line, the type scales with --len (characters) to the card width. */
  .ton-result-amount { container-type: inline-size; display: block; min-width: 0; }
  .ton-result-amount .currency-amount {
    flex-wrap: wrap;
    gap: 4px 8px;
    white-space: normal;
    font-size: 28px;
    font-size: clamp(16px, calc((100vw - 110px) / var(--len, 10) * 1.75), 28px);
    font-size: clamp(16px, calc((100cqi - 34px) / var(--len, 10) * 1.75), 28px);
    line-height: 1.1;
    color: var(--jade-200);
  }
  .ton-result-amount .currency-amount > span { font-weight: 800; white-space: nowrap; text-shadow: 0 0 16px rgb(80 200 140 / .3); }
  .ton-result-amount .currency-amount small { font: 700 14px/1 var(--font-display); color: var(--text-3); }
  .ton-quote-facts { padding: 2px 12px; border-radius: 12px; background: rgb(0 0 0 / .2); border: 1px solid var(--line-1); }
  /* A long value drops under its label instead of splitting. */
  .ton-quote-facts .kv { align-items: center; flex-wrap: wrap; gap: 2px 12px; }
  .ton-quote-facts dt { flex: none; }
  .ton-quote-facts dd { min-width: 0; margin-left: auto; font-family: var(--font-display); }
  .ton-quote-facts dd .currency-amount { justify-content: flex-end; }
  .ton-quote-facts dd .currency-amount > span { white-space: nowrap; }
  .ton-quote-facts .currency-icon { width: 16px; height: 16px; }
  .ton-fact.is-emphasis { margin: 0 -12px; padding: 9px 12px; border-top: 1px solid rgb(245 200 105 / .25); background: rgb(245 200 105 / .07); border-radius: 0 0 11px 11px; }
  .ton-fact.is-emphasis dt { color: var(--gold-200); font-weight: 800; }
  .ton-fact.is-emphasis dd { color: var(--gold-100); font-size: var(--fs-15); }
  .ton-result-note { margin: 0; }
  .ton-confirm-note { margin-top: -4px; font-size: var(--fs-11); color: var(--text-3); text-align: center; }

  .ton-reserve-card { display: grid; gap: 10px; }
  .ton-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .ton-section-heading h3 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-card-title); font-weight: 800; }
  .ton-section-heading .gi { width: 30px; height: 30px; margin: -4px 0; }
  .ton-reserve-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Long reserves (more than 13 characters) take a full row each on narrow phones rather than shrinking below 11px. */
  @media (max-width: 419px) { .ton-reserve-facts.is-long { grid-template-columns: minmax(0, 1fr); } }
  .ton-reserve-facts .ton-fact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 9px 12px 10px;
    border: 1px solid var(--line-1);
    border-radius: 12px;
    background: var(--surface-inset);
    box-shadow: inset 0 2px 5px rgb(0 0 0 / .3);
  }
  .ton-reserve-facts .ton-fact + .ton-fact { border-top: 1px solid var(--line-1); }
  .ton-reserve-facts dt { font: 700 11px/1 var(--font-display); letter-spacing: .08em; color: var(--text-3); }
  .ton-reserve-facts dd { container-type: inline-size; min-width: 0; width: 100%; margin-left: 0; justify-self: stretch; text-align: left; }
  .ton-reserve-facts .currency-amount {
    max-width: 100%;
    font-size: 17px;
    font-size: clamp(11px, calc((50vw - 64px) / var(--len, 8) * 1.8), 17px);
    font-size: clamp(11px, calc((100cqi - 26px) / var(--len, 8) * 1.8), 17px);
    color: var(--text-1);
  }
  .ton-reserve-facts .currency-amount > span { white-space: nowrap; }

  @media (max-width: 359px) {
    .ton-amount-control input { font-size: 25px; }
    .ton-selling-access { grid-template-columns: auto minmax(0, 1fr); }
    .ton-selling-access .btn { grid-column: 1 / -1; }
  }

  /* ═════════════════════════ Rules / access sheet ═════════════════════════ */
  .access-preview { display: grid; gap: var(--s-3); min-width: 0; }
  .access-permission-list { display: grid; gap: 10px; }
  .access-card { display: grid; gap: var(--s-3); min-width: 0; }
  .access-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
  .access-card-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: var(--r-md);
    background: var(--mk-medallion);
    border: 1px solid var(--line-gold);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 4px 10px -4px rgb(0 0 0 / .8);
  }
  .access-card-icon .gi { width: 34px; height: 34px; }
  .access-card-copy { min-width: 0; display: grid; gap: 4px; }
  .access-card-copy h4 { font-size: var(--fs-card-title); font-weight: 800; }
  /* The free path sits beside the 或 chip; it drops under the chip only when the chip is long (translations). */
  .access-card-free { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: var(--fs-12); line-height: 1.4; color: var(--text-3); }
  .access-card-free > span:last-child { flex: 1 1 7em; min-width: 0; overflow-wrap: break-word; }
  /* Latin/Cyrillic: the path never gets narrower than its longest word ("действительных"), so it drops under the chip
     instead of breaking that word. */
  :root:not(:lang(zh)) .access-card-free > span:last-child { min-width: auto; }
  .access-card-or { flex: none; padding: 1px 7px; border-radius: var(--r-pill); background: rgb(80 200 140 / .14); border: 1px solid rgb(80 200 140 / .3); font-size: var(--fs-11); font-weight: 800; color: var(--jade-200); }
  .access-card-price { flex: none; }
  .access-card-price .currency-amount { gap: 5px; font-size: var(--fs-20); color: var(--gold-100); }
  .access-card-price .currency-icon { width: 20px; height: 20px; }
  .access-unlock .currency-amount { font-size: inherit; }
  .access-card.is-entitled { border-color: rgb(80 200 140 / .34); }
  .access-card.is-entitled .access-card-price { opacity: .55; }
  .access-card-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    border-radius: 12px;
    background: var(--success-bg);
    border: 1px solid rgb(80 200 140 / .3);
    font-weight: 800;
    color: var(--jade-200);
  }
  .access-card-state .icon { width: 17px; height: 17px; }
  .access-card-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-card-title); font-weight: 800; }
  .access-card-title .gi { width: 28px; height: 28px; margin: -3px 0; }
  .access-fact-list { display: grid; }
  .access-fact { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 0; font-size: var(--fs-13); color: var(--text-2); }
  .access-fact + .access-fact { border-top: 1px dashed var(--line-1); }
  .access-fact > span { min-width: 0; }
  .access-fact strong {
    flex: none;
    min-width: 54px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    text-align: center;
    font: 800 15px/1.1 var(--font-display);
    color: var(--gold-100);
    background: rgb(245 200 105 / .12);
    border: 1px solid rgb(245 200 105 / .32);
  }
  .access-split { display: grid; gap: 8px; padding: 10px 12px 12px; border-radius: 12px; background: var(--surface-inset); border: 1px solid var(--line-1); }
  .access-split p { font-size: var(--fs-12); font-weight: 700; color: var(--text-2); }
  .access-split-bar { display: flex; gap: 2px; height: 24px; border-radius: var(--r-pill); overflow: hidden; box-shadow: 0 1px 0 rgb(255 255 255 / .05); }
  .access-split-bar span { display: grid; place-items: center; min-width: 0; overflow: hidden; white-space: nowrap; font: 800 11px/1 var(--font-ui); }
  .access-split-bar span:first-child { color: #07261a; background: linear-gradient(180deg, var(--jade-300), var(--jade-500)); }
  .access-split-bar span:last-child { color: var(--text-on-gold); background: var(--grad-gold); }
  .access-threshold { margin: 0; }
  .access-rules { display: grid; gap: 10px; }
  .access-rules li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-13); line-height: 1.6; color: var(--text-2); }
  .access-rules li > .gi { flex: none; width: 22px; height: 22px; margin-top: -1px; }
  .access-rules .currency-amount { vertical-align: -3px; color: var(--gold-100); }

  /* ═════════════════════════ Mining buyout dialog ═════════════════════════ */
  .buyout-dialog {
    width: min(380px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: auto;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--text-1);
    text-align: left;
    border: 2px solid transparent;
    border-radius: var(--r-xl);
    background:
      radial-gradient(120% 50% at 50% 0%, rgb(245 200 105 / .14), transparent 60%) padding-box,
      var(--noise) padding-box,
      linear-gradient(180deg, #17402f 0%, #10301f 40%, #0b2219 100%) padding-box,
      linear-gradient(180deg, var(--gold-rim) 0%, var(--gold-400) 30%, var(--gold-700) 70%, var(--gold-900) 100%) border-box;
    box-shadow: 0 0 0 1px rgb(0 0 0 / .7), 0 0 44px -8px rgb(245 190 80 / .45), 0 30px 80px -12px rgb(0 0 0 / .95);
  }
  .buyout-dialog[open] { animation: buyout-in .38s var(--ease-spring) both; }
  /* Near-opaque scrim, no backdrop blur: the field canvas keeps repainting underneath. */
  .buyout-dialog::backdrop {
    background: radial-gradient(90% 70% at 50% 45%, rgb(10 36 26 / .9), rgb(2 9 6 / .96));
  }
  .buyout-dialog[open]::backdrop { animation: buyout-fade .3s ease-out both; }
  @keyframes buyout-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
  @keyframes buyout-fade { from { opacity: 0; } to { opacity: 1; } }
  .buyout-dialog :is(h2, h3, p) { margin: 0; }
  .buyout-dialog .icon { width: 18px; height: 18px; }

  .buyout-header {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 14px 18px 16px;
    text-align: center;
    border-bottom: 1px solid rgb(242 205 128 / .24);
  }
  .buyout-header::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: calc(var(--r-xl) - 2px) calc(var(--r-xl) - 2px) 0 0;
    background:
      linear-gradient(180deg, rgb(13 36 27 / .35) 0%, rgb(15 44 33 / .82) 62%, #12382a 100%),
      url(/art/premium/workshop.jpg) center 35% / cover no-repeat;
  }
  /* One short English eyebrow (the Chinese title below says it). */
  .buyout-kicker {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 3px 11px 3px 9px;
    border-radius: var(--r-pill);
    background: rgb(6 19 14 / .72);
    border: 1px solid var(--line-gold);
    font: 700 11px/1.2 var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-200);
    white-space: nowrap;
  }
  .buyout-kicker .icon { width: 14px; height: 14px; }
  .buyout-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: rgb(6 19 14 / .72);
    border: 1px solid var(--line-2);
    color: var(--text-2);
    box-shadow: 0 2px 0 rgb(0 0 0 / .4);
    transition: transform var(--dur-1), color var(--dur-2);
  }
  .buyout-close:active { transform: scale(.92); color: var(--text-1); }
  .buyout-close .gi { width: 22px; height: 22px; }
  .buyout-emblem {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--mk-medallion);
    border: 2px solid var(--gold-300);
    box-shadow: 0 0 0 4px rgb(245 200 105 / .14), 0 0 28px rgb(245 190 80 / .4), inset 0 2px 0 rgb(255 255 255 / .16);
  }
  .buyout-emblem .gi { width: 44px; height: 44px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
  .buyout-header h2 { font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--text-1); text-shadow: 0 2px 10px rgb(0 0 0 / .7); }
  .buyout-header p { font-size: var(--fs-13); color: var(--text-2); }

  .buyout-body { display: grid; gap: 10px; padding: 12px 14px 10px; }
  .buyout-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgb(0 0 0 / .22);
    border: 1px solid var(--line-1);
    font-size: var(--fs-12);
    color: var(--text-3);
  }
  .buyout-current > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .buyout-current .gi { width: 22px; height: 22px; }
  .buyout-current strong { flex: none; font: 800 19px/1 var(--font-display); color: var(--text-1); }
  .buyout-current strong small { font: 600 12px/1 var(--font-ui); color: var(--text-3); }

  .buyout-option { position: relative; display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-lg); }
  .buyout-option-paid {
    border: 1px solid var(--line-gold-strong);
    background: radial-gradient(120% 90% at 100% 0%, rgb(245 200 105 / .18), transparent 55%), linear-gradient(180deg, #21503d, var(--surface-2));
    box-shadow: var(--hl-top), var(--sh-2), 0 0 22px -10px rgb(245 190 80 / .6);
  }
  .buyout-option-invite {
    border: 1px solid rgb(120 230 170 / .32);
    background: radial-gradient(120% 90% at 100% 0%, rgb(80 200 140 / .15), transparent 55%), linear-gradient(180deg, #1a4535, #133528);
    box-shadow: var(--hl-top), var(--sh-1);
  }
  .buyout-option-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
  .buyout-option-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: rgb(0 0 0 / .24); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
  .buyout-option-icon .gi { width: 32px; height: 32px; }
  .buyout-option-heading > div { min-width: 0; display: grid; gap: 2px; }
  .buyout-option-heading h3 { font-size: var(--fs-card-title); font-weight: 800; line-height: 1.25; }
  .buyout-option-heading p { font-size: var(--fs-12); color: var(--text-3); }
  .buyout-option-invite .buyout-option-heading p { color: var(--jade-300); font-weight: 700; }
  .buyout-badge {
    align-self: start;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--grad-gold);
    color: var(--text-on-gold);
    font-size: var(--fs-11);
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 2px 0 var(--gold-edge);
  }
  .buyout-price { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 2px 0 4px; }
  .buyout-price strong { font: 800 42px/1 var(--font-display); color: var(--gold-100); text-shadow: 0 0 22px rgb(245 200 105 / .45), 0 2px 0 rgb(0 0 0 / .4); }
  .buyout-price .currency-icon { width: 30px; height: 30px; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .5)); }
  .buyout-price small { align-self: flex-end; margin-bottom: 5px; font-size: var(--fs-12); color: var(--text-3); }
  .buyout-dialog .buyout-action { white-space: normal; }
  .buyout-option-note { font-size: var(--fs-11); line-height: 1.55; color: var(--text-3); text-align: center; }
  .buyout-divider { display: flex; align-items: center; gap: 10px; font-size: var(--fs-12); font-weight: 700; color: var(--text-3); }
  .buyout-divider::before, .buyout-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-3)); }
  .buyout-divider::after { background: linear-gradient(90deg, var(--line-3), transparent); }
  .buyout-progress-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--fs-12); color: var(--text-3); }
  .buyout-progress-label strong { font: 800 22px/1 var(--font-display); color: var(--jade-200); }
  .buyout-progress-label strong small { font: 700 14px/1 var(--font-display); color: var(--text-3); }
  .buyout-progress-track {
    position: relative;
    height: 14px;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--surface-inset);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / .7), 0 1px 0 rgb(255 255 255 / .05);
  }
  .buyout-progress-track::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--segments, 10) - 2px), var(--surface-inset) calc(100% / var(--segments, 10) - 2px) calc(100% / var(--segments, 10)));
  }
  .buyout-progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 100%; border: 0; background: transparent; color: var(--jade-400); }
  .buyout-progress::-webkit-progress-bar { background: transparent; }
  .buyout-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--jade-500), var(--jade-300)); box-shadow: 0 0 10px rgb(80 200 140 / .5); }
  .buyout-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--jade-500), var(--jade-300)); }
  .buyout-progress-note { font-size: var(--fs-12); font-weight: 700; color: var(--jade-200); text-align: center; }
  .buyout-option-invite.is-met .buyout-progress-note { color: var(--gold-200); }
  .buyout-reassurance { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-12); line-height: 1.5; color: var(--text-3); text-align: center; }
  .buyout-reassurance .icon { width: 16px; height: 16px; color: var(--jade-300); }
  .buyout-reassurance br { display: none; }
  .buyout-footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .buyout-footer .btn { min-width: 0; padding: 0 6px; font-size: var(--fs-13); white-space: normal; }
  .buyout-footer .icon { width: 15px; height: 15px; }
  .buyout-complete { justify-items: center; gap: 16px; padding: 22px 16px 18px; text-align: center; }
  .buyout-complete p { font-size: var(--fs-14); color: var(--text-2); }
  .buyout-complete strong { font: 800 24px/1 var(--font-display); color: var(--gold-100); }

  /* Wide enough: the kicker pins to the top-left corner (mirroring the close button) so the emblem leads. */
  @media (min-width: 360px) {
    .buyout-kicker { position: absolute; top: 15px; left: 14px; }
    .buyout-header { padding-top: 12px; }
    .buyout-emblem { margin-top: 0; }
  }
  @media (max-height: 640px) {
    .buyout-emblem { width: 50px; height: 50px; }
    .buyout-emblem .gi { width: 34px; height: 34px; }
    .buyout-header h2 { font-size: 22px; }
    .buyout-price strong { font-size: 36px; }
  }
  @media (max-width: 359px) {
    .buyout-body { padding-inline: 10px; }
    .buyout-option { padding: 12px; }
    .buyout-option-heading { gap: 10px; }
    .buyout-option-icon { width: 42px; height: 42px; }
  }
}

/* ── v10 (docs/v10-systems.md §1.4, §1.6, §6.2): free trade cap meters, K13 day cap + chest carve-out on the pool card,
   材料市场 permission card and ladder, listing filter, chest/key listings (tier chip, 概率公示 link), seller ring,
   one-time 原土 notice, and the four v10 permission cards of the 规则 sheet (prerequisites as {have} / {need}). ── */
@layer pages {
  .exchange .trade-cap { display: grid; gap: 8px; padding: 12px 14px; }
  .exchange .trade-cap-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; }
  .exchange .trade-cap-head h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-14); color: var(--text-1); }
  .exchange .trade-cap-head h4 .icon { width: 15px; height: 15px; color: var(--gold-200); }
  .exchange .trade-cap-head small { font-size: var(--fs-11); color: var(--text-3); }
  .exchange .trade-cap-meter { display: grid; gap: 4px; }
  .exchange .trade-cap-meter-label { font-size: var(--fs-12); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
  .exchange .trade-cap-meter.is-warn .meter > span { background: linear-gradient(90deg, #c9871f, var(--warn)); }
  .exchange .trade-cap-meter.is-full .meter > span { background: linear-gradient(90deg, var(--danger-strong), var(--danger)); box-shadow: none; }
  .exchange .trade-cap.is-warn { border-color: rgb(255 196 92 / .32); }
  .exchange .trade-cap.is-full { border-color: rgb(255 120 90 / .4); }
  .exchange .trade-cap-note { margin: 0; font-size: var(--fs-12); color: var(--warn); }
  .exchange .trade-cap.is-full .trade-cap-note { color: var(--danger); }
  .exchange .exchange-daycap p { margin: 0; font-size: var(--fs-12); line-height: 1.5; color: var(--text-2); }
  .exchange .exchange-daycap .exchange-daycap-rule { color: var(--text-3); }
  .exchange .exchange-chest-reserve,
  .exchange .exchange-carveout { display: flex; align-items: flex-start; gap: 6px; }
  .exchange .exchange-chest-reserve .icon,
  .exchange .exchange-carveout .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--gold-200); }
  .exchange .exchange-dirt-confirm { display: grid; gap: 10px; }
  .exchange .exchange-dirt-confirm p { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
  .exchange .exchange-dirt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .exchange .exchange-dirt-actions .btn { flex: 1 1 120px; min-width: 0; }

  .exchange .market-permission { display: grid; gap: 10px; padding: 12px 14px; border-color: var(--line-gold); }
  .exchange .market-permission-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
  .exchange .market-permission-emblem { width: 56px; height: 56px; object-fit: contain; border-radius: var(--r-md); }
  .exchange .market-permission.is-compact .market-permission-head { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .exchange .market-permission.is-compact .market-permission-emblem { width: 40px; height: 40px; }
  .exchange .market-permission-copy { min-width: 0; }
  .exchange .market-permission-copy h4 { margin: 0; font-size: var(--fs-15); color: var(--text-1); }
  .exchange .market-permission-copy p { margin: 2px 0 0; font-size: var(--fs-12); line-height: 1.45; color: var(--text-3); }
  .exchange .market-permission-price { white-space: nowrap; color: var(--gold-100); }
  .exchange .market-permission-ladder { display: grid; gap: 6px; }
  .exchange .market-permission-ladder progress { width: 100%; height: 8px; appearance: none; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-inset); }
  .exchange .market-permission-ladder progress::-webkit-progress-bar { background: var(--surface-inset); }
  .exchange .market-permission-ladder progress::-webkit-progress-value { background: linear-gradient(90deg, var(--jade-500), var(--jade-300)); }
  .exchange .market-permission-ladder progress::-moz-progress-bar { background: linear-gradient(90deg, var(--jade-500), var(--jade-300)); }
  .exchange .market-permission-ladder p,
  .exchange .market-permission-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--fs-12); line-height: 1.5; color: var(--text-2); }
  .exchange .market-permission-note .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--text-3); }
  .exchange .market-permission-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .exchange .market-permission-actions .btn { flex: 1 1 130px; min-width: 0; }

  .exchange .exchange-tier-chip { margin-left: 6px; font-size: var(--fs-10); }
  .exchange .exchange-listing.is-vault .item-tile img { object-fit: contain; }
  .exchange .exchange-odds-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: var(--fs-12); color: var(--text-3); }
  .exchange .exchange-odds .icon { width: 14px; height: 14px; }
  .exchange .exchange-seller-ring { width: 18px; height: 18px; flex: none; object-fit: contain; }
  .exchange .exchange-legacy { margin: 8px 0 0; }

  .access-preview .access-card-emblem { width: 40px; height: 40px; object-fit: contain; }
  .access-preview .access-reqs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .access-preview .access-req { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-13); color: var(--text-2); }
  .access-preview .access-req > span { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
  .access-preview .access-req .icon { width: 14px; height: 14px; flex: none; color: var(--text-3); }
  .access-preview .access-req.is-met .icon { color: var(--jade-300); }
  .access-preview .access-req b { flex: none; font-variant-numeric: tabular-nums; color: var(--text-1); white-space: nowrap; }
  .access-preview .access-card-step { display: flex; align-items: center; gap: 6px; margin: 0; }
}

/* ── v10.1 (docs/v10-1-reveal-swap-excitement.md D3, D4): the 市场 / 挂单 progress card before 20,000 mined items
   (exchange-panel.mjs marketProgressCard; no permission, no price) and the 兑换 sell-side gap (ton-panel.mjs). ── */
@layer pages {
  .exchange .market-progress { display: grid; gap: 10px; padding: 12px 14px; border-color: var(--line-2); }
  .exchange .market-progress-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--s-3); }
  .exchange .market-progress-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--surface-inset); border: 1px solid var(--line-1); }
  .exchange .market-progress-icon .gi { width: 34px; height: 34px; }
  .exchange .market-progress-copy { min-width: 0; margin: 0; font-size: var(--fs-14); font-weight: 700; line-height: 1.5; color: var(--text-1); overflow-wrap: break-word; }
  .exchange .market-progress-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .exchange .market-progress-meter b { font: 800 var(--fs-13)/1 var(--font-display); color: var(--text-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .exchange .market-progress-meter small { font-size: var(--fs-11); color: var(--text-3); }

  .ton-panel .ton-first-sale { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--fs-12); line-height: 1.5; color: var(--text-3); }
  .ton-panel .ton-first-sale .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }
  .ton-panel .ton-quote-button.is-short:disabled { color: var(--text-2); }
  .ton-panel .ton-guest { align-items: center; gap: 10px; }
  .ton-panel .ton-guest-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: rgb(0 0 0 / .2); border: 1px solid rgb(120 196 255 / .26); }
  .ton-panel .ton-guest-icon .currency-icon { width: 28px; height: 28px; }
  .ton-panel .ton-guest p { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-1); text-wrap: pretty; }
  .ton-panel .ton-guest .btn { flex: none; min-height: 44px; }
}