* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
#app { display: flex; flex-direction: column; height: 100vh; font-family: system-ui, sans-serif; }
.topbar { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 16px; background: #1f2937; color: #fff; flex: 0 0 auto; }
.tpl-select select { padding: 6px 10px; border-radius: 6px; border: 0; min-width: 320px; }
.download-btn { padding: 8px 16px; border: 0; border-radius: 6px; background: #10b981;
  color: #fff; cursor: pointer; }
.download-btn:disabled { background: #6b7280; cursor: not-allowed; }
.tools { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.tools .cbx { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.tools .rng { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tools .rng.off { opacity: .45; }
.tools .rng input[type="number"] { width: 64px; padding: 4px 6px; border-radius: 5px; border: 0; }
.tools .rng input[type="range"] { width: 96px; }
.tools select { padding: 4px 6px; border-radius: 5px; border: 0; }
.ghost-btn { padding: 8px 14px; border: 1px solid #4b5563; border-radius: 6px;
  background: transparent; color: #fff; cursor: pointer; }
.ghost-btn:hover { background: #374151; }
.ghost-btn:disabled { opacity: .5; cursor: not-allowed; }
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid;
  place-items: center; z-index: 1000; }
.modal { width: min(680px, 92vw); max-height: 88vh; overflow: auto; background: #1f2937;
  color: #e5e7eb; border-radius: 10px; }
.modal-head { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; font-weight: 600; border-bottom: 1px solid #374151; }
.modal-head .x { background: transparent; border: 0; color: #e5e7eb; font-size: 22px; cursor: pointer; }
.modal-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.modal-body .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.modal-body .rng { display: flex; align-items: center; gap: 6px; }
.stitch-inputs { display: flex; flex-wrap: wrap; gap: 8px; }
.stitch-inputs .si { position: relative; }
.stitch-inputs .si img { height: 72px; border-radius: 5px; border: 1px solid #374151; display: block; }
.stitch-inputs .si .del-btn { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  padding: 0; border-radius: 50%; line-height: 18px; }
.stitch-result { border-top: 1px solid #374151; padding-top: 12px; display: flex;
  flex-direction: column; gap: 10px; }
/* 棋盘格底纹，便于看出拼接图的透明区域 */
.sr-preview { border-radius: 6px; padding: 8px; text-align: center;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.sr-preview img { max-width: 100%; max-height: 320px; }
.workspace { flex: 1 1 auto; display: flex; min-height: 0; }
.gallery { flex: 0 0 200px; overflow-y: auto; background: #111827; color: #e5e7eb;
  padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.gallery-head { font-size: 13px; font-weight: 600; position: sticky; top: -12px;
  background: #111827; padding: 4px 0; }
.gallery-hint { display: block; font-weight: 400; font-size: 11px; color: #9ca3af; margin-top: 2px; }
.gallery-empty { font-size: 12px; color: #9ca3af; }
.grp { display: flex; flex-direction: column; gap: 10px; }
.grp + .grp { margin-top: 6px; border-top: 1px solid #374151; padding-top: 12px; }
.grp-actions { display: flex; gap: 6px; }
.act-btn { flex: 1; text-align: center; font-size: 12px; padding: 6px 4px; border-radius: 5px;
  background: #374151; color: #fff; cursor: pointer; }
.act-btn:hover { background: #4b5563; }
.act-btn.danger { background: #7f1d1d; }
.act-btn.danger:hover { background: #991b1b; }
.pair { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid #374151;
  border-radius: 6px; background: #0b1220; }
.pair + .pair { margin-top: 4px; }
.pair-title { font-size: 12px; color: #9ca3af; }
.gallery-item { display: flex; flex-direction: column; gap: 4px; }
.thumb { position: relative; background: #fff; border: 1px solid #374151; border-radius: 6px;
  overflow: hidden; display: grid; place-items: center; height: 110px; }
.thumb img { max-width: 100%; max-height: 110px; object-fit: contain; display: block; }
.thumb .idx { position: absolute; top: 2px; left: 2px; background: rgba(17,24,39,.8);
  color: #fff; font-size: 11px; padding: 1px 5px; border-radius: 3px; }
.item-actions { display: flex; gap: 4px; }
.rep-btn { flex: 1; text-align: center; font-size: 12px; padding: 5px 8px; border-radius: 5px;
  background: #3b82f6; color: #fff; cursor: pointer; }
.rep-btn:hover { background: #2563eb; }
.del-btn { flex: 0 0 auto; font-size: 12px; padding: 5px 8px; border: 0; border-radius: 5px;
  background: #4b5563; color: #fff; cursor: pointer; }
.del-btn:hover { background: #b91c1c; }
.preview-wrap { flex: 1 1 auto; position: relative; background: #f3f4f6; overflow: hidden; }
.preview { width: 100%; height: 100%; border: 0; background: #fff; }
.hint { position: absolute; inset: 0; display: grid; place-items: center; color: #6b7280; }