/* =========================================================
   PIXELFANTASIA · 地图工坊样式
   ========================================================= */

.wmain{
  padding:16px var(--gutter) 64px;
  max-width:1720px;margin:0 auto;
}

/* ---------- 种子条 ---------- */
.wseedbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px;border:1px solid var(--line);background:var(--panel);
}
.wseedbar__field{position:relative;flex:1 1 380px;min-width:0;display:flex;align-items:center;gap:8px}
.wseedbar__field .input{flex:1 1 auto;min-width:0;padding-right:70px}
.wseedbar__badge{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  padding:2px 7px;font-size:11px;letter-spacing:.06em;
  color:var(--mint);background:var(--mint-dim);border:1px solid var(--mint-line);
  pointer-events:none;
}
.wseedbar__ops{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wseedbar__ops .btn{height:40px}
.wseedbar__ops .input--xs{height:40px;min-width:104px}

/* ---------- 工具栏 ---------- */
.wtoolbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:10px;padding:8px 10px;
  border:1px solid var(--line);background:var(--panel-sunken);
}
.wtoolbar__grp{display:flex;align-items:center;gap:8px;min-width:0}
.wtoolbar__grp--end{margin-left:auto}

.wdirs{display:flex;gap:4px}
.wdir{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-width:38px;height:32px;padding:0 8px;
  font-family:var(--font-mono);font-size:11px;
  color:var(--text-muted);background:var(--chip-bg);
  border:1px solid var(--chip-line);cursor:pointer;
}
.wdir .i{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.wdir span{display:none}
.wdir:hover{color:var(--mint);border-color:var(--mint-line);background:var(--mint-dim)}
.wdir:active{transform:translateY(1px)}

/* ---------- 视口 ---------- */
.wstage-wrap{
  position:relative;margin-top:10px;
  height:clamp(420px,calc(100vh - 300px),900px);
  border:1px solid var(--line);background:var(--bg-deep);
  overflow:hidden;
}
.wstage{display:block;width:100%;height:100%;touch-action:none}
.wstage:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}

/* HUD */
.whud{
  position:absolute;left:10px;bottom:10px;
  display:flex;align-items:center;gap:2px 8px;flex-wrap:wrap;
  max-width:calc(100% - 20px);
  padding:5px 9px;
  background:rgba(7,9,17,.86);border:1px solid var(--line);
  backdrop-filter:blur(6px);pointer-events:none;
}
.whud__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint)}
.whud__v{font-size:11px;color:var(--text);white-space:nowrap}
.whud .mono{font-family:var(--font-mono)}

/* 进度 */
.wprogress{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);
  width:min(420px,calc(100% - 32px));
  padding:8px 12px;background:rgba(7,9,17,.92);
  border:1px solid var(--mint-line);
  backdrop-filter:blur(8px);
}
.wprogress__bar{height:3px;background:var(--panel-2);overflow:hidden}
.wprogress__bar i{display:block;height:100%;width:0;background:var(--mint);
  transition:width .35s ease}
.wprogress p{margin-top:6px;color:var(--mint);font-size:11px}

/* 空态 */
.wempty{
  position:absolute;left:0;right:0;top:26px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;padding:0 24px;pointer-events:none;
}
.wempty[hidden]{display:none}
.wempty__t{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint)}
.wempty__b{font-size:12px;line-height:1.8;color:var(--text-muted);max-width:440px}
.wempty__b strong{color:var(--mint);font-weight:600}

/* 提示 */
.wtoast{
  position:absolute;left:50%;bottom:64px;transform:translate(-50%,8px);
  padding:8px 14px;font-size:11px;
  background:rgba(7,9,17,.94);border:1px solid var(--line-strong);color:var(--text);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  max-width:calc(100% - 40px);text-align:center;
}
.wtoast.is-on{opacity:1;transform:translate(-50%,0)}
.wtoast.is-err{border-color:var(--danger);color:var(--danger)}

/* ---------- 说明 ---------- */
.wnotes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;
}
.wnote{padding:14px 16px;border:1px solid var(--line);background:var(--panel-sunken)}
.wnote__t{font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
.wnote__b{font-size:12px;line-height:1.85;color:var(--text-muted)}
.wnote__b strong{color:var(--mint);font-weight:600}

/* ---------- 自动扩图弹窗 ---------- */
.wcalc{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:16px;
  background:var(--line);border:1px solid var(--line);
}
.wcalc>div{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--panel)}
.wcalc b{font-size:14px;color:var(--mint)}
.warn{color:var(--warn);line-height:1.7;margin-top:12px}
.warn[hidden]{display:none}

#autoSizeLabel{margin-top:16px}
#autoModal .chip{min-width:44px}

/* 选中确认条 */
.wpick{
  position:absolute;left:50%;bottom:56px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:8px 10px;max-width:calc(100% - 24px);
  background:rgba(7,9,17,.94);border:1px solid var(--mint-line);
  backdrop-filter:blur(8px);
}
.wpick[hidden]{display:none}
.wpick__txt{font-size:11px;color:var(--mint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* 数量步进器 */
.wnum{display:flex;align-items:center;gap:0;margin-top:8px}
.wnum__btn{
  width:38px;height:40px;flex:0 0 auto;
  font-family:var(--font-mono);font-size:16px;line-height:1;
  color:var(--text);background:var(--chip-bg);border:1px solid var(--chip-line);cursor:pointer;
}
.wnum__btn:hover{color:var(--mint);border-color:var(--mint-line);background:var(--mint-dim)}
.wnum__in{
  width:84px;height:40px;padding:0 10px;text-align:center;
  font-size:15px;color:var(--mint);
  background:var(--panel);border:1px solid var(--chip-line);border-left:0;border-right:0;
  -moz-appearance:textfield;appearance:textfield;
}
.wnum__in::-webkit-outer-spin-button,.wnum__in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wnum__unit{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 10px;font-size:11px;color:var(--text-muted);
  background:var(--panel-sunken);border:1px solid var(--chip-line);border-left:0;
}
.chips--quick{margin-top:8px;flex-wrap:wrap}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .wnotes{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wmain{padding:10px 12px 48px}
  .wseedbar{padding:10px;gap:8px}
  .wseedbar__field{flex:1 1 100%}
  .wseedbar__ops{width:100%}
  .wseedbar__ops .btn{flex:1 1 auto}
  .wtoolbar{gap:10px;padding:8px}
  .wtoolbar__grp--end{width:100%;flex-wrap:wrap;margin-left:0}
  .wtoolbar__grp--end .btn{flex:1 1 auto}
  .wstage-wrap{height:58vh;min-height:360px}
  .whud{gap:1px 6px;padding:4px 7px}
  .whud__v{font-size:11px}
  .wcalc{grid-template-columns:1fr}
  .wtoast{bottom:52px}
}

/* hidden 属性必须压过 .btn 的 display */
.wtoolbar .btn[hidden],
.wtoolbar .wdir[hidden],
.wseedbar .btn[hidden]{display:none!important}

/* 按钮内图标必须有尺寸，否则 svg 默认 300x150 把按钮撑成横条 */
.wtoolbar .btn .i,
.wseedbar .btn .i,
.modal__ft .btn .i,
.modal__hd .btn .i{width:14px;height:14px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}

/* 实心图标（星星等）走填充，不能套上面的描边规则，否则整块不可见 */
.btn .i.i--solid{fill:currentColor;stroke:none}

/* ---------- 预设模板弹窗 ---------- */
.modal__panel--wide{width:min(760px,100%);max-height:calc(100vh - 32px)}
.tintro{font-size:12px;line-height:1.7;color:var(--text-muted);margin:0 0 4px}
.tlabel{
  display:flex;align-items:center;gap:6px;
  margin:18px 0 8px;font-size:11px;letter-spacing:.08em;
  color:var(--text-muted);text-transform:uppercase;
}
.tlabel:first-of-type{margin-top:12px}
.tlabel b{
  display:inline-grid;place-items:center;width:16px;height:16px;
  font-size:11px;font-weight:600;color:var(--mint);
  background:var(--mint-dim);border:1px solid var(--mint-line);
}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tcard{
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  padding:10px 12px;text-align:left;cursor:pointer;
  background:var(--panel-sunken);border:1px solid var(--line);
  color:var(--text);transition:border-color .15s,background .15s;
}
.tcard b{font-size:12.5px;font-weight:600;line-height:1.3}
.tcard span{font-size:11px;line-height:1.5;color:var(--text-faint)}
.tcard:hover{border-color:var(--line-strong);background:var(--panel-2)}
.tcard[aria-pressed="true"]{
  border-color:var(--mint-line);background:var(--mint-dim);
}
.tcard[aria-pressed="true"] b{color:var(--mint)}
.tcard[aria-pressed="true"] span{color:var(--text-muted)}
.tstyle{margin:6px 0 0;font-size:11px;color:var(--text-faint)}
.trow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.trow__col .tlabel{margin-top:18px}
.tcount{margin:4px 0 0;text-align:right}
.tcalc{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:16px;background:var(--line);
  border:1px solid var(--line);
}
.tcalc>div{
  display:flex;flex-direction:column;gap:3px;
  padding:8px 10px;background:var(--panel-sunken);
}
.tcalc b{font-size:11.5px;color:var(--text)}
.whud__v.is-warn{color:#FFB169}
.whud__v.is-hot{color:#FF7A7A}

@media (max-width:640px){
  .tgrid{grid-template-columns:1fr 1fr}
  .trow{grid-template-columns:1fr}
  .tcalc{grid-template-columns:1fr}
  .tcalc>div{flex-direction:row;justify-content:space-between}
}