/* 页内块：从 miner-unsold.html / miner-buy.html <style> 抽出。原子仍走 ui.css。 */

html, body {
  margin: 0;
  height: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  background: var(--bg-page);
  color: var(--text-1);
}

#app {
  width: 100%;
  max-width: 390px;
  height: 100%;
  min-height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
}
#app > .mol-hd,
#app > .mol-banner,
#app > .mol-tabs { flex-shrink: 0; }
#app > .mol-tabs { margin-top: auto; }
#app > .screen-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.pad { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); min-height: 100% }

.sell { background: var(--bg-surface); border: var(--line) solid var(--border); border-radius: var(--radius-md); overflow: hidden }
.sell:not(:has(.sell-media)):not(:has(.sell-body)) { padding: var(--space-3) }
.sell-media { height: 160px; padding: 0; overflow: hidden; background: var(--bg-muted) }
.sell-media img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover }
.sell-body { padding: var(--space-3) }
.sell-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3) }
.sell-body .sell-head { margin-bottom: var(--space-3) }
.sell-left { min-width: 0 }
.sell-price { margin: 0; flex-shrink: 0; text-align: right; font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: var(--fw-semibold) }
.sell-price em { display: block; margin-top: var(--space-1); font-style: normal; font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--fw-regular); color: var(--text-2) }
.sell-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2) }
a.btn { text-decoration: none; }

.mol-hd .back { text-decoration: none }
.mol-hd.is-on { justify-content: space-between; padding: 0 var(--space-3) 0 var(--hit) }

.stack { display: flex; flex-direction: column; gap: var(--space-4) }

.money { background: var(--bg-surface); border: var(--line) solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3) }
.kv { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--text-2) }
.kv-k { color: var(--text-2) }
.kv-v { color: var(--text-1); text-align: right }
.kv-v em { display: block; margin-top: var(--space-1); font-style: normal; font-size: var(--fs-caption-1); line-height: var(--lh-caption-1); font-weight: var(--fw-regular); color: var(--text-2); }
.kv .num { color: var(--text-3); }
.kv span:first-child { color: var(--text-2); flex-shrink: 0 }

.confirm { background: var(--bg-surface); border: var(--line) solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.confirm-title { margin: 0; }

.sign { background: var(--bg-surface); border: var(--line) solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3) }
.sign-title { margin: 0 }
.sign-body { margin: 0; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--text-2) }

.act { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3) }
.act .lnk { align-self: center }
.act .btn { text-decoration: none; }
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.pay-v { font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: var(--fw-semibold); }
.pay-v em { margin-left: var(--space-2); font-style: normal; font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--fw-regular); color: var(--text-2); }