/* 二手：广场三列卡 + Builder 配件图标封面。方案详情仍用下面的库存对照。 */

body[data-page="market"] .plaza-body{padding-top:0}
/* 首屏收紧：标题块比插画矮一大截，align-items:start 会把差额全堆在
   按钮底下变成一片空白。改成居中，空白平分到上下两侧就看不出来了。 */
body[data-page="market"] .page-hero{padding:26px 0 18px}
body[data-page="market"] .page-hero h1{margin-top:0}
body[data-page="market"] .page-hero h1{font-size:clamp(26px,3.4vw,34px)}
body[data-page="market"] .page-hero .lede{margin-top:8px;font-size:14px;max-width:34rem}
body[data-page="market"] .page-hero .hero-cta{margin-top:16px}
/* 首屏收紧：标题块比插画矮一大截，align-items:start 会把差额全堆在
   按钮底下变成一片空白。改成居中，空白平分到上下两侧就看不出来了。 */
body[data-page="market"] .grain-hero{
  grid-template-columns:1fr auto;gap:28px;align-items:center
}
body[data-page="market"] .grain-hero > div{min-width:0;max-width:34rem}
/* 抠出来的小人，没有卡片边框了，所以比原来那张海报放大一档。
   aspect-ratio 跟着新图走（494×627），不再是海报的 3/4——写错了图会被压变形。
   投影收到很轻：海报有实体边框撑得住重投影，光一个人物挂重影会像贴纸。 */
.mk-hero-illu{
  display:block;width:min(170px,20vw);max-width:190px;height:auto;
  max-height:min(230px,34vh);aspect-ratio:494/627;object-fit:contain;object-position:center top;
  margin:0;justify-self:end;border:0;border-radius:0;background:transparent;
  filter:drop-shadow(0 10px 18px rgba(31,36,48,.10));
  /* 往左下挪一点，顶部跟 h1 齐平（实测差 31px）。
     用 transform 不用 margin：transform 不参与布局，左边那列的文字和按钮
     一个像素都不会动——上一版用 margin 就是因为它撑高了整个 hero 才被撤掉的。
     下移 31 之后小人底部会探进筛选行上沿 11px，但那一段是空的
     （发条求购已经挪到 hero 了），不压任何东西。 */
  transform:translate(-40px, 16px)
}
.mk-sync{margin-top:10px;font-size:13px;color:var(--ink3)}
body[data-page="market"] .card:hover{border-color:var(--p1)}
body[data-page="market"] .card .price{
  margin-top:10px;font-family:var(--num);font-size:22px;font-weight:700;color:var(--p1);line-height:1.2
}
body[data-page="market"] .card .acts,
body[data-page="inventory"] .card .acts{
  margin-top:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap
}
body[data-page="market"] .card .acts .btn,
body[data-page="market"] .card .acts .btn-ghost{
  padding:8px 16px;font-size:13px
}
.grid-3 > .note,.grid-3 > .empty{grid-column:1/-1}
.note a{color:var(--p1);font-weight:800}

.parts-board{
  aspect-ratio:4/3;
  background:#FFF4EB;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:18px 16px;
}
.part-ico{display:block;flex:none;color:var(--p1)}
.pb-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1.5px solid var(--rule);
  border-radius:14px;
  padding:10px 12px;
}
.pb-id{
  display:flex;flex-direction:column;align-items:flex-start;min-width:0
}
.pb-id b{
  font-family:var(--num);font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.2
}
.pb-row em{
  font-family:var(--num);font-style:normal;font-size:20px;font-weight:700;color:var(--p1)
}
.pb-more{
  font-size:12px;font-weight:700;color:var(--ink3);text-align:center
}
.parts-board.one .pb-row{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:8px;
  padding:16px 14px
}
.parts-board.one .pb-id{align-items:center}
.parts-board.one .pb-id b{font-size:26px}
.parts-board.one em{font-size:26px}

.ptok{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px 5px 8px;background:#fff;
  border:1.5px solid var(--rule);border-radius:999px;
  font-family:var(--num);font-size:13px;font-weight:700;line-height:1
}
.ptok .part-ico{color:var(--p1)}
.ptok em{font-style:normal;color:var(--ink3);font-weight:600;font-size:12px}

.quiet,.mk-quiet{
  appearance:none;border:0;background:none;padding:8px 4px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;color:var(--ink3)
}
.quiet:hover,.mk-quiet:hover{color:var(--p1)}
.contact{
  display:inline-flex;align-items:center;padding:7px 12px;border-radius:8px;
  background:#fff;border:1.5px dashed var(--g-d);
  font-family:var(--num);font-size:13.5px;font-weight:700;color:var(--g-d)
}

.mk-want{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;
  margin:0 0 18px;padding:18px 20px 20px;background:var(--card);
  border:1.5px solid var(--rule);border-radius:18px;
  /* 顶栏是 sticky 的，滚到这儿时给它让开，不然表单标题会被压在底下 */
  scroll-margin-top:86px
}
/* 求购里的配件墙：全部类型，比库存那面长，给个上限能滚 */
.mk-want #buyPick{max-height:min(52vh,440px);overflow:auto;padding-right:4px}
.mk-want .iv-sec{margin-bottom:14px}
.mk-want .iv-sec:last-child{margin-bottom:0}
.mk-want[hidden]{display:none}
.mk-want h2{grid-column:1/-1;font-size:15px;font-weight:900;margin:0 0 4px}
.mk-want label{display:grid;gap:6px;font-size:12px;font-weight:800;color:var(--ink3);letter-spacing:.04em}
.mk-want .span{grid-column:1/-1}
.mk-want input{
  width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff
}
.mk-want input:focus{outline:none;border-color:var(--p1);box-shadow:0 0 0 3px rgba(234,88,12,.12)}
.mk-want .btn{grid-column:1/-1;justify-self:start;margin-top:4px}
.mk-want > label.span{margin-bottom:-4px}

.mk-pick{grid-column:1/-1;display:grid;gap:10px}
.mk-pick-hint{margin:0;font-size:12.5px;font-weight:600;color:var(--ink3);letter-spacing:0}
.mk-pick-cats,.mk-pick-sub{display:flex;flex-wrap:wrap;gap:8px}
.pill.slim{padding:5px 12px;font-size:12px}
.mk-pick-list{
  display:grid;gap:2px;max-height:280px;overflow:auto;
  padding:6px;border:1.5px solid var(--line);border-radius:14px;background:#fff
}
.mk-pick-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:8px 10px;border-radius:12px;cursor:pointer
}
.mk-pick-row:hover{background:#FFF4EB}
.mk-pick-row.on{background:var(--tint)}
.mk-pick-name{font-size:14px;font-weight:700;color:var(--ink);min-width:0}
.mk-pick-none{margin:8px;font-size:13px;color:var(--ink3)}
.mk-pick-sel{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mk-pick-sel-h{font-size:12px;font-weight:800;color:var(--ink3);letter-spacing:.04em}
.mk-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 8px 5px 6px;border:1.5px solid var(--rule);border-radius:999px;
  background:#fff;font-size:13px;font-weight:700
}
.mk-chip b{font-weight:700}
.mk-chip em{font-style:normal;color:var(--p1);font-family:var(--num)}
.mk-chip button{border:0;background:none;cursor:pointer;color:var(--ink3);font-size:16px;line-height:1;padding:0 2px}
.mk-chip button:hover{color:var(--p1)}
.mk-pick-err{margin:0;font-size:13px;font-weight:700;color:var(--p1)}
.mk-pick .inv-step{flex:none}

#mkReportForm .mk-reason{
  display:flex;align-items:center;gap:10px;margin:0 0 8px;
  padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;
  cursor:pointer;font-weight:700;color:var(--ink)
}
#mkReportForm .mk-reason:has(input:checked){border-color:var(--p1);background:var(--tint)}
#mkReportForm .mk-reason input{width:auto;margin:0;accent-color:var(--p1)}
#mkReportForm .go{margin-top:16px}

.inv-bin{
  margin:22px 0 12px;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--ink3)
}
.inv-bin:first-child{margin-top:0}
body[data-page="inventory"] .inv-card .parts-board{aspect-ratio:16/9;padding:14px 16px}
body[data-page="inventory"] .inv-card .parts-board.one .pb-id b{font-size:28px}
body[data-page="inventory"] .inv-card.on{border-color:var(--p1)}
body[data-page="inventory"] .inv-card .body{display:flex;flex-direction:column;gap:2px}
body[data-page="inventory"] .inv-step{margin-top:12px}

.inv-step{
  display:flex;align-items:center;gap:0;background:#fff;
  border:1.5px solid var(--line);border-radius:999px;overflow:hidden;width:max-content
}
.inv-step button{
  width:36px;height:36px;border:0;background:transparent;cursor:pointer;
  font-size:18px;font-weight:700;color:var(--ink2)
}
.inv-step button:hover{color:var(--p1);background:var(--tint)}
.inv-step input{
  width:44px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;padding:8px 0;background:transparent;font-family:var(--num);font-weight:700
}
.inv-step input:focus{outline:none}

body[data-page="inventory"] .inv-bar{
  flex-direction:column;align-items:stretch;gap:12px;margin-top:28px
}
body[data-page="inventory"] .inv-bar[hidden]{display:none}
.inv-dock-main{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}
.inv-dock-main span{font-size:14px}
.inv-dock-main b{margin-left:auto;font-family:var(--num);font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--p1)}
.inv-dock-main label{display:flex;align-items:center;gap:8px;font-size:13px;margin-left:auto}
.inv-dock-main input{
  width:108px;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--num);font-weight:700
}
.inv-sheet{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 12px;width:100%;
  padding-top:12px;border-top:1px dashed var(--line)
}
.inv-sheet label{display:grid;gap:6px;font-size:12px;font-weight:700;color:var(--ink3)}
.inv-sheet input{
  width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:10px;background:#fff
}
.inv-sheet input:focus{outline:none;border-color:var(--p1);box-shadow:0 0 0 3px rgba(234,88,12,.12)}
.inv-sheet p{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--ink3)}

.mine-list{margin-top:8px}
.mine-list h2{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--ink3);margin:0 0 12px}
/* 卖那一段和求购那一段之间要看得出断开，不然两组挂单连成一长串 */
.mine-list h2 + h2,.mine-row + h2{margin-top:34px}
.mine-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  padding:12px 0;border-bottom:1px dashed var(--line)
}
.mine-row .sub{margin-left:auto;font-size:12.5px;color:var(--ink3)}

#schemeExtras{margin-top:22px;padding-top:4px}
#schemeExtras .quiet,#schemeExtras .mk-quiet{padding-left:0}
.mk-stock{margin-top:18px}
.mk-stock h2{font-size:15px;font-weight:900;margin:0 0 6px}
.mk-stock > .sub{font-size:13.5px;color:var(--ink2);margin:0 0 12px}
.mk-stock-row{
  display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px
}
.mk-stock-row .n{font-family:var(--num);font-weight:700;color:var(--ink3);font-size:13px}
.mk-stock-row .ok{color:var(--g-d);font-weight:800;font-size:13px}
.mk-stock-row .miss{color:var(--p1);font-weight:800;font-size:13px}
.mk-checked{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 8px}

@media (max-width:900px){
  body[data-page="market"] .grain-hero{grid-template-columns:1fr}
  /* 窄屏直接不要小麦：两列塌成一列之后它只是占掉一屏高度，
     把真正要看的东西（切换条、配件墙）全推下去。 */
  body[data-page="market"] .mk-hero-illu{display:none}
}
@media (max-width:720px){
  .mk-want,.inv-sheet{grid-template-columns:1fr}
  .mk-want .span{grid-column:auto}
  .mk-stock-row{grid-template-columns:1fr auto;gap:4px 10px}
  .inv-dock-main b,.inv-dock-main label{margin-left:0}
  .inv-dock-main .btn{width:100%}
  .inv-step{width:100%}
  .inv-step input{flex:1}
}

/* 下架时的成交回执。三选一，问完就走，不做弹窗——
   为了一个数字弹个框，用户下次就不点「卖掉了」了。 */
.mk-sold{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.mk-sold .sub{margin-right:4px}
.mk-sold .quiet{padding:6px 10px;border:1.5px solid var(--line);border-radius:999px;background:#fff}
.mk-sold .quiet:hover{border-color:var(--p1);color:var(--p1)}
/* 「成了」是三个里唯一会动库存的，描一下边，别让人误点 */
.mk-sold .quiet.go{border-color:var(--sell);color:var(--sell);font-weight:700}
.mine-row[data-kind="buy"] .mk-sold .quiet.go{border-color:var(--buy);color:var(--buy)}
/* 勾选框摆在按钮边上，不藏起来：替人改库存之前得先让人看见改成什么 */
.mk-sync{
  display:inline-flex;align-items:center;gap:6px;margin-left:6px;
  font-size:12.5px;color:var(--ink3);cursor:pointer;white-space:nowrap
}
.mk-sync input{accent-color:var(--p1);width:14px;height:14px;cursor:pointer}
.mine-row[data-kind="buy"] .mk-sync input{accent-color:var(--g)}
@media (max-width:560px){ .mk-sync{margin-left:0;width:100%} }

/* ── 供需对撞 ──────────────────────────────────────────────
   在卖 / 求购 原来是两个标签页，把一件事劈成了两半：永远只看得到半个
   场子。现在同一种零件左右对摆，中间那条给判断——多 6 件还是缺 4 件。
   顶上的「我想买 / 我想卖」只决定哪一侧变亮，另一侧就是竞争对手情报。 */
.mt-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.mt-tools .mt-sp{flex:1}
.mt-tools .mt-sp{flex:1}
.mt-side{display:flex;padding:3px;border:1.5px solid var(--line);border-radius:999px;background:#fff;gap:2px}
.mt-side button{
  appearance:none;border:0;background:transparent;border-radius:999px;padding:7px 17px;
  font:inherit;font-size:13px;font-weight:700;color:var(--ink3);cursor:pointer
}
.mt-side button.on{background:var(--tint);color:var(--p1)}
.mt-side button.on[data-side="sell"]{background:var(--g-t);color:var(--g-d)}
.mt-hint{font-size:12.5px;color:var(--ink3);margin:0 0 14px}

.mt-cols{
  display:grid;grid-template-columns:1fr 152px 1fr;gap:0 16px;align-items:center;
  padding:0 0 9px;margin-bottom:4px;border-bottom:1.5px solid var(--rule)
}
.mt-cols span{font-size:11.5px;font-weight:800;letter-spacing:.12em}
.mt-cols .l{text-align:right;color:var(--p1)}
.mt-cols .c{text-align:center;color:var(--ink3)}
.mt-cols .r{color:var(--g-d)}

.lane{
  display:grid;grid-template-columns:1fr 152px 1fr;gap:10px 16px;align-items:center;
  padding:16px 0;border-bottom:1px dashed var(--line)
}
.lane:last-child{border-bottom:0}
.lane-l{display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:0}
.lane-r{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}

/* 中间的脊：这一件到底是多了还是抢手 */
.spine{
  display:grid;place-items:center;gap:5px;text-align:center;padding:10px 6px;
  background:var(--card);border:1.5px solid var(--rule);border-radius:14px
}
.spine b{font-family:var(--num);font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.spine .nm{font-size:11px;color:var(--ink3);line-height:1.3}
.spine .bal{display:flex;width:100%;height:6px;border-radius:99px;overflow:hidden;background:var(--line);margin-top:3px}
.spine .bal i{display:block;height:100%}
.spine .bal .s{background:var(--p1)}
.spine .bal .d{background:var(--g)}
.spine .cnt{font-size:11px;color:var(--ink3);line-height:1.3}
.verdict{font-family:var(--num);font-size:11.5px;font-weight:700}
.verdict.over{color:var(--p1)}
.verdict.under{color:var(--g-d)}
.verdict.even{color:var(--ink3)}
.lane.hot .spine{border-color:var(--p1);box-shadow:0 0 0 3px rgba(234,88,12,.1)}

/* 一条挂牌 */
.bid{
  display:flex;align-items:center;gap:9px;width:100%;max-width:400px;padding:8px 13px;border-radius:12px;
  background:#fff;border:1.5px solid var(--line);cursor:pointer;text-align:left;font:inherit;
  transition:border-color .16s,box-shadow .16s,opacity .16s
}
.bid:hover{border-color:var(--p1)}
.bid .q{font-family:var(--num);font-size:15px;font-weight:700;color:var(--p1);flex:none}
.bid .mid{min-width:0;flex:1}
.bid .mid b{display:block;font-size:13px;font-weight:800;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bid .mid span{display:block;font-size:11.5px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bid .p{font-family:var(--num);font-size:13.5px;font-weight:700;color:var(--ink2);flex:none}
.bid.ask{border-style:dashed}
.bid.ask .q{color:var(--g-d)}
.bid.ask:hover{border-color:var(--g)}
/* 变暗的那一侧不是没用，是"另一批人"——竞争对手情报，点得开但不抢眼 */
.bid.dim{opacity:.45}
.bid.dim:hover{opacity:.85}
.bid.act{border-color:var(--p1);box-shadow:0 8px 22px -14px rgba(234,88,12,.8)}
.bid.ask.act{border-color:var(--g);box-shadow:0 8px 22px -14px rgba(31,168,90,.8)}
.bid.mine{border-style:solid;border-color:var(--border);background:var(--tint)}

.lane-none{font-size:12px;color:var(--ink3);padding:6px 2px}
.lane-l .lane-none{text-align:right}

.pop{
  margin-top:8px;padding:12px 14px;background:var(--card);border:1.5px solid var(--rule);
  border-radius:14px;font-size:13px;max-width:400px;width:100%
}
.lane-l .pop{margin-left:auto}
.pop .row{display:flex;gap:10px;padding:5px 0;font-size:12.5px;align-items:flex-start}
.pop .row > span:first-child{width:52px;flex:none;color:var(--ink3)}
.pop .acts{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.pop .sub{font-size:12px;color:var(--ink3)}

@media(max-width:860px){
  .mt-cols{display:none}
  .lane{grid-template-columns:1fr;gap:8px}
  .lane-l,.lane-r{align-items:stretch}
  .lane-l .pop{margin-left:0}
  .lane-l .lane-none{text-align:left}
  .bid{max-width:none}
  .pop{max-width:none}
  /* 一列变一列之后得说清哪几条是在卖、哪几条是在找 */
  .lane-l::before,.lane-r::before{
    content:attr(data-lbl);font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--ink3)
  }
  .lane-l::before{color:var(--p1)}
  .lane-r::before{color:var(--g-d)}

  /* 手机上脊放最上面，先说清这是哪一件、行情如何 */
  .spine{order:-1;display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 10px;text-align:left;justify-content:flex-start}
  .spine .bal{width:100%;order:9}
}

/* ── 挂我的零件：配件墙 ────────────────────────────────────
   原来是一个零件一张带 4:3 封面的大卡片，一屏只看得到三四种，
   而封面写的还是标题已经写过的东西。现在压成小方块，一屏全看见。

   每块上三样常驻，都不能藏：
     家里 N   —— 挂多少的唯一参照，藏了等于让人凭记忆拨数
     步进器   —— 要 12 个不用点 12 下
     已挂角标 —— 只在挂了的时候出现，不然墙面太花
   点方块 +1 和直接拨数字两种输入都在，不做二选一。 */
body[data-page="inventory"] .plaza-body{padding-top:8px}

.iv-sum{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:12px 16px;margin:0 0 16px;border-radius:14px;
  background:var(--card);border:1.5px solid var(--rule);font-size:13.5px
}
/* display:flex 会盖掉浏览器默认的 [hidden]{display:none}，得自己写一条 */
.iv-sum[hidden]{display:none}
.iv-sum b{font-family:var(--num);font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--p1)}
.iv-sum .sp{flex:1}
.iv-sum .sub{font-size:12.5px;color:var(--ink3)}

.iv-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.iv-tools .sp{flex:1}
.iv-mini{
  appearance:none;border:1.5px solid var(--line);background:#fff;border-radius:999px;
  padding:6px 13px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer
}
.iv-mini:hover{border-color:var(--p1);color:var(--p1)}
.iv-hint{font-size:12.5px;color:var(--ink3);margin:0 0 16px}

.iv-sec{margin:0 0 18px}
.iv-sec-h{
  display:flex;align-items:baseline;gap:9px;margin:0 0 9px;
  font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--p1)
}
.iv-sec-h .n{font-family:var(--num);font-size:11.5px;color:var(--ink3);letter-spacing:0;white-space:nowrap}
.iv-sec-h::after{content:"";flex:1;height:1px;background:var(--border)}

.iv-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.iv-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 6px 10px;border-radius:12px;background:var(--card);
  border:1.5px solid var(--rule);cursor:pointer;text-align:center;
  transition:border-color .15s,background .15s,transform .12s
}
.iv-tile:hover{border-color:var(--p1);transform:translateY(-1px)}
.iv-tile.on{background:#fff;border-color:var(--p1);box-shadow:0 0 0 3px rgba(234,88,12,.12)}
/* 拨到家里的总数就封顶，边框变虚线告诉你到头了 */
.iv-tile.full{border-style:dashed}
.iv-tile .part-ico{color:var(--p1)}
.iv-tile .nm{
  font-size:12px;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
/* 价格这一格按步进器的高度预留：hover 时两者互换位置，
   不预留的话步进器会顶到名字上去（实测顶了 8px）。 */
.iv-tile .have{
  font-family:var(--num);font-size:11px;color:var(--ink3);line-height:1.3;
  min-height:24px;display:flex;align-items:center;justify-content:center
}
.iv-tile .have b{font-weight:700;color:var(--ink2)}
.iv-tile.on .have b{color:var(--p1)}
.iv-tile.full .have,.iv-tile.full .have b{color:var(--g-d)}

.iv-badge{
  position:absolute;top:-7px;right:-7px;min-width:23px;height:23px;padding:0 6px;
  display:grid;place-items:center;border-radius:99px;
  background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff;
  font-family:var(--num);font-size:12px;font-weight:700;
  box-shadow:0 3px 8px -2px rgba(234,88,12,.6)
}

/* 方块里的步进器收窄一点，不然一行放不下几个 */
/* 步进器压在方块底部、悬停才浮出来。用绝对定位而不是显示/隐藏：
   占着流的话一 hover 整面墙都会重排跳一下。 */
.iv-tile .inv-step{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:auto;opacity:0;pointer-events:none;
  transition:opacity .14s;box-shadow:0 2px 10px -3px rgba(31,36,48,.3)
}
.iv-tile .inv-step button{width:22px;height:22px;font-size:14px}
.iv-tile .inv-step input{width:30px;padding:2px 0;font-size:12px;flex:none}
.iv-tile .inv-step button:disabled{opacity:.3;cursor:not-allowed}

/* 加减号已经在了，原生那对上下箭头是多余的，还会把输入框挤窄 */
.inv-step input::-webkit-outer-spin-button,
.inv-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inv-step input{-moz-appearance:textfield;appearance:textfield}

@media (hover:hover){
  /* focus-within 不能少：不然键盘 Tab 进输入框时它是隐形的 */
  .iv-tile:hover .inv-step,
  .iv-tile:focus-within .inv-step{opacity:1;pointer-events:auto}
  /* 浮出来的时候把价格让开，两行叠在一起会糊 */
  .iv-tile:hover .have,
  .iv-tile:focus-within .have{opacity:0}
  .iv-tile .have{transition:opacity .14s}
}
/* 触屏没有 hover，藏起来等于永远输不了数字：那里一直摆着 */
@media (hover:none){
  .iv-tile .inv-step{
    position:static;transform:none;opacity:1;pointer-events:auto;
    margin-top:4px;box-shadow:none
  }
}

@media (max-width:520px){
  .iv-wall{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
  .iv-tile{padding:10px 5px 8px}
}

/* 三个视图齐平的切换条。跟顶栏那级导航区分开：这是页内的，
   所以用下划线而不是胶囊——胶囊会跟下面「我想买/我想卖」那排撞脸。 */
.vw-tabs{
  display:flex;gap:4px;align-items:center;margin:0 0 18px;
  border-bottom:1.5px solid var(--rule);scroll-margin-top:86px
}
/* 作者写的 display:flex 会盖掉浏览器默认的 [hidden]{display:none}，
   所以进任务态时光设 hidden 属性收不起来，得自己写一条。 */
.vw-tabs[hidden]{display:none}
.vw-tabs button{
  appearance:none;border:0;background:none;cursor:pointer;font:inherit;
  font-size:14.5px;font-weight:700;color:var(--ink3);
  padding:9px 14px;border-bottom:3px solid transparent;margin-bottom:-1.5px
}
.vw-tabs button:hover{color:var(--p1)}
.vw-tabs button.on{color:var(--p1);border-bottom-color:var(--p1)}
body[data-page="market"] [data-view][hidden]{display:none}
/* 求购表单现在是独立视图，不再是就地展开的一块，边框收掉 */
body[data-page="market"] [data-view="want"] .mk-want{
  margin:0;padding:0;background:none;border:0;border-radius:0
}
body[data-page="market"] [data-view="mine"] .lede{margin-top:0;margin-bottom:12px}
@media (max-width:520px){
  .vw-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .vw-tabs button{padding:9px 11px;font-size:13.5px;white-space:nowrap}
}

/* ── 托盘：挑了什么、一共多少 ────────────────────────────
   放在墙的正上方。点上面的芯片是把件还回去——跟点墙上的方块正好反向，
   加和减都在手边，不用去找步进器。 */
.pk-tray{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 14px;margin:0 0 14px;border-radius:14px;
  background:var(--tint);border:1.5px solid var(--border)
}
.pk-tray[hidden]{display:none}
.pk-n{font-size:13.5px;color:var(--ink2);white-space:nowrap}
.pk-n b{
  display:inline-block;font-family:var(--num);font-size:20px;font-weight:700;
  letter-spacing:-.02em;color:var(--p1)
}
.pk-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.pk-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 9px;
  background:#fff;border:1.5px solid var(--border);border-radius:999px;
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;color:inherit
}
.pk-chip:hover{border-color:var(--p1);color:var(--p1)}
.pk-chip .part-ico{color:var(--p1)}
.pk-chip em{font-style:normal;font-family:var(--num);color:var(--p1)}

/* 角标：挂零件显示「还剩几个」，减到 0 变灰；求购显示「要几个」 */
.iv-badge.zero{
  background:var(--line);color:var(--ink3);box-shadow:none
}

/* 一加一减要看得见。两个方向分开，颜色不同，扫一眼就知道是加还是减。 */
@keyframes pk-up{
  0%{transform:scale(1)}
  35%{transform:scale(1.45);filter:brightness(1.15)}
  100%{transform:scale(1)}
}
@keyframes pk-down{
  0%{transform:scale(1)}
  35%{transform:scale(.6)}
  100%{transform:scale(1)}
}
.bump-up{animation:pk-up .4s cubic-bezier(.34,1.56,.64,1)}
.bump-down{animation:pk-down .4s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){
  .bump-up,.bump-down{animation:none}
}

/* 结算条：原来挂在 body[data-page="inventory"] 上，页面并进交易页之后
   那个选择器全失效，它就裸着渲染、把墙挡住了。改成按视图选。 */
[data-view="mine"] .inv-bar{
  position:sticky;bottom:0;z-index:20;
  flex-direction:column;align-items:stretch;gap:10px;
  margin-top:20px;padding:14px 16px;
  background:rgba(255,252,249,.97);backdrop-filter:blur(14px);
  border:1.5px solid var(--rule);border-radius:16px;
  box-shadow:0 -10px 30px -22px rgba(31,36,48,.4)
}
[data-view="mine"] .inv-bar[hidden]{display:none}
/* 联系信息不急着摆出来：先让人把件挑完，点了「上架」再问。 */
[data-view="mine"] .inv-sheet[hidden]{display:none}

/* 求购和库存的结算条跟「我的零件」同一套 */
[data-view="want"] .inv-bar,
[data-view="stock"] .inv-bar{
  position:sticky;bottom:0;z-index:20;
  flex-direction:column;align-items:stretch;gap:10px;
  margin-top:20px;padding:14px 16px;
  background:rgba(255,252,249,.97);backdrop-filter:blur(14px);
  border:1.5px solid var(--rule);border-radius:16px;
  box-shadow:0 -10px 30px -22px rgba(31,36,48,.4)
}
[data-view="want"] .inv-bar[hidden],
[data-view="stock"] .inv-bar[hidden],
[data-view="want"] .inv-sheet[hidden]{display:none}
/* 这里那个空的 <b> 不是忘了填：.inv-dock-main b{margin-left:auto} 才是
   把保存按钮顶到右边的东西，别的视图里它装的是价钱。留着当撑杆。 */
[data-view="stock"] .inv-dock-main b{
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink3)
}
[data-view="want"] #buyPick{max-height:none;overflow:visible;padding-right:0}

/* 补充信息展开时不再吸底：小屏上四个字段竖排比视口还高，
   吸在底部会把上半截连同第一个输入框一起挤出屏幕。
   摊开跟着页面滚，才填得完。 */
[data-view="mine"] .inv-bar.sheet-open,
[data-view="want"] .inv-bar.sheet-open{
  position:static;box-shadow:0 18px 40px -32px rgba(31,36,48,.28)
}

/* ── 一卖一买，两种颜色 ──────────────────────────────────────
   「在卖」和「求购」在这一页到处成对出现（广场的左右两列、我的挂单的
   两段、hero 的两个按钮）。原来全是同一个橙，靠文字分辨——扫一眼
   分不出哪半边是哪件事。
   卖用品牌橙，买用禾绿：不是随便挑的两个颜色，橙是"我有货"的主动作，
   绿是"我要货"，和站里别处「够 / 缺」的用法对得上（--g-d 就是「够」）。 */
:root{ --sell:var(--p1); --sell-t:var(--tint); --sell-b:var(--border);
       --buy:var(--g-d);  --buy-t:var(--g-t);  --buy-b:var(--g-border) }

body[data-page="market"] .btn-sell{background:linear-gradient(135deg,var(--p1),var(--p2))}
body[data-page="market"] .btn-buy{
  background:none;color:var(--buy);border:1.5px solid var(--buy-b);box-shadow:none
}
body[data-page="market"] .btn-buy:hover{background:var(--buy-t);border-color:var(--buy)}
/* 正待在这个任务里：按钮标出来，因为页签这时候是收起来的，
   不标的话页面上没有任何地方说明"你现在在挂零件"。 */
body[data-page="market"] .hero-cta .going{outline:2px solid var(--p1);outline-offset:3px}
body[data-page="market"] .hero-cta .btn-buy.going{outline-color:var(--buy)}

/* ── 任务态：带返回的一件事 ──────────────────────────────────
   页签收起来之后，这条是唯一说明"你在哪、怎么回去"的东西，所以它
   必须在最上面，而且返回要比标题显眼——人进来是为了做事，做完就想走。 */
.task-top{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 16px;padding-bottom:12px;border-bottom:1.5px solid var(--rule)
}
.task-top h2{margin:0;font-size:19px;font-weight:900}
.task-back{
  appearance:none;cursor:pointer;font:inherit;font-size:13px;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:99px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink2)
}
.task-back:hover{border-color:var(--p1);color:var(--p1)}
[data-task="buy"] .task-back:hover{border-color:var(--buy);color:var(--buy)}
[data-task="buy"] .task-top{border-bottom-color:var(--buy-b)}

/* 我的挂单：卖的一段和买的一段各自上色，左边一条竖杠一眼分开 */
.mine-list h2[data-side]{display:flex;align-items:center;gap:8px}
.mine-list h2[data-side]::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--sell)}
.mine-list h2[data-side="buy"]::before{background:var(--buy)}
.mine-row{padding-left:12px;border-left:3px solid transparent;border-radius:0 8px 8px 0}
.mine-row[data-kind="sell"]{border-left-color:var(--sell-b)}
.mine-row[data-kind="buy"]{border-left-color:var(--buy-b)}
.mine-row[data-kind="sell"]:hover{background:rgba(234,88,12,.04)}
.mine-row[data-kind="buy"]:hover{background:rgba(31,168,90,.05)}
.mine-row .st{
  font-size:11.5px;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:99px;
  border:1px solid var(--sell-b);background:var(--sell-t);color:var(--sell)
}
.mine-row[data-kind="buy"] .st{border-color:var(--buy-b);background:var(--buy-t);color:var(--buy)}
.mine-row.done .st{border-color:var(--line);background:transparent;color:var(--ink3)}
.mine-row.done{opacity:.62;border-left-color:var(--line)}

/* 结算条里的要价框。原来挂一种零件这儿是个只读的 <b>，卖家改不了。 */
.inv-dock-main .px{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.inv-dock-main .px input{
  width:7.5em;padding:7px 10px;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--num);font-size:15px;font-weight:700;background:#fff
}
.inv-dock-main .px input:focus{outline:none;border-color:var(--p1);box-shadow:0 0 0 3px rgba(234,88,12,.12)}
/* 建议价是提示不是主角：比输入框轻，且把按钮顶到右边 */
.inv-dock-main .sug{margin-right:auto;font-size:12.5px;color:var(--ink3)}

/* 挂单里就地改价 */
.mk-reprice{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.mk-reprice label{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--ink3)}
.mk-reprice input{
  width:6.5em;padding:5px 8px;border:1.5px solid var(--line);border-radius:8px;
  font-family:var(--num);font-size:14px;font-weight:700;background:#fff
}
.mk-reprice input:focus{outline:none;border-color:var(--sell);box-shadow:0 0 0 3px rgba(234,88,12,.12)}
.mk-reprice .quiet{padding:6px 10px;border:1.5px solid var(--sell);border-radius:999px;background:#fff;color:var(--sell);font-weight:700}
@media (max-width:560px){
  .inv-dock-main .sug{margin-right:0;width:100%}
  .inv-dock-main .px input{width:100%}
}