/* 拼图生成器：壳（所有页面共用）+ 各页。尺寸一律 calc(var(--u) * n)，--u 由 shell.js 按画面算好写进来。
   画风：整块底色 + 内侧深色窄边（inset 描边），不渐变、不高光、不做厚度；颗粒纸面。 */

:root {
  --table: #a9a088;
  --outside: #8f8770;
  --cream: #e4dcc7;
  --cream-edge: #cfc4a6;
  --paper: #ece4cf;
  --paper-edge: #cfc4a6;
  --chip: #d9cfb3;
  --chip-edge: #c4b998;
  --edge: #a89c78;
  --ink: #352e2b;
  --ink-edge: #241e1c;
  --ink-2: #6d6250;
  --red: #a56361;
  --red-edge: #8a4d4c;
  --track: #d3c8aa;

  /* 共用部件（弹窗、提示条、署名）跟着这套颜色走。 */
  --bg: var(--table);
  --surface: var(--paper);
  --surface-2: var(--cream-edge);
  --field: #f3ecd9;
  --bar: var(--ink);
  --disc: var(--cream);
  --ink-3: #9a8f78;
  --accent: var(--red);
  --on-dark: var(--cream);
}

html,
body {
  background: var(--outside) var(--grain) repeat;
}

#app {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/* ---------- 抖动（boil.js 挂上 is-boiling 才生效）---------- */
.is-boiling .boil {
  filter: url(#boil);
}

.is-boiling .boil-soft {
  filter: url(#boil-soft);
}

/* ---------- 画面框 ---------- */
.sh-frame {
  position: absolute;
  top: 0;
  overflow: hidden;
  background: var(--table) var(--grain) repeat;
  visibility: hidden;
  --tools-h: calc(var(--u) * 17);
  --peek: calc(var(--u) * 18);
}

.sh-frame.is-ready {
  visibility: visible;
}

.page {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/* 不在前面的那一页：照常排版和量尺寸，但看不见、点不到 */
.page.is-away {
  visibility: hidden;
  pointer-events: none;
}

/* ---------- 图标 ---------- */
.sh-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  height: 60%;
  pointer-events: none;
}

.sh-icon svg {
  width: 100%;
  height: 100%;
}

/* ---------- 压扁的钮：纯色平涂，没有描边、没有阴影；高度 44px 起 ---------- */
.sh-round {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 var(--btn-w);
  width: var(--btn-w);
  height: var(--btn-h);
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  border: 2px solid var(--ink-edge);
  color: var(--cream);
  background: var(--ink);
  touch-action: manipulation;
}

.sh-round .sh-icon {
  width: 54%;
  height: 54%;
}

/* 用不了的钮：底色挖空，只剩一圈清楚的边和灰一点的图标 */
.sh-round:disabled {
  border-color: var(--ink-2);
  color: var(--ink-2);
  background: transparent;
  cursor: default;
}

/* ---------- 文字按钮（圆角矩形）---------- */
.sh-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  height: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 3);
  color: var(--cream);
  font-size: calc(var(--u) * 4.6);
  font-weight: 900;
  white-space: nowrap;
  touch-action: manipulation;
}

.sh-pill-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  border: 2px solid var(--ink-edge);
  background: var(--ink);
  border-radius: calc(var(--u) * 2.6) calc(var(--u) * 3) calc(var(--u) * 2.8) calc(var(--u) * 2.4);
}

.sh-pill-text {
  position: relative;
}

.sh-pill-light {
  color: var(--ink);
}

.sh-pill-light .sh-pill-bg {
  border-color: var(--edge);
  background: var(--chip);
}

.sh-pill-red {
  color: var(--cream);
}

.sh-pill-red .sh-pill-bg {
  border-color: var(--red-edge);
  background: var(--red);
}

.sh-pill:disabled {
  opacity: 0.4;
}

/* ---------- 标题栏：一排叠着的拼图块 ---------- */
.sh-titlebar {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 7;
  height: var(--bar-h);
}

.sh-title-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.sh-title {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  cursor: pointer;
}

.sh-title-words {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sh-title-word {
  position: absolute;
  color: var(--cream);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* 中 / EN：固定在画面右上角，小、扁；一个整体的二选一分段钮，两半共用外框，选中的一半填深色；平涂，没有描边。 */
.sh-lang {
  position: relative;
  display: flex;
  height: 22px;
  border-radius: 11px;
  background: var(--cream);
  font-size: 12px;
  line-height: 1;
}

.sh-lang-pos {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
}

.sh-lang-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  color: var(--ink-2);
  font-weight: 700;
  border-radius: 11px;
}

/* 触摸范围放大到 44px，外观不变；贴着画面右边的那一半不伸出画面。 */
.sh-lang-btn::after {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: 50%;
  height: 44px;
  margin-top: -22px;
}

.sh-lang-btn:last-child::after {
  right: -6px;
}

.sh-lang-btn[aria-pressed='true'] {
  color: var(--cream);
  background: var(--ink);
}

/* ---------- 一排钮：看得见的形状高 28px、宽 42px，图标 16px，点按区用伪元素扩到 44px，没有阴影 ---------- */
.pg-tools {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--bar-h);
  z-index: 6;
  height: var(--tools-h);
  box-sizing: border-box;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pg-tools .sh-round {
  pointer-events: auto;
  flex: 0 1 42px;
  width: 42px;
  height: 28px;
  min-width: 36px;
  min-height: 0;
  box-shadow: none;
}

.pg-tools .sh-round::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: -8px;
  bottom: -8px;
}

.pg-tools .sh-round .sh-icon {
  width: 16px;
  height: 16px;
}

.pg-tools .sh-round + .sh-round {
  margin-left: 4px;
}

/* 编辑页的一排：返回贴最左、导出贴最右（两个同宽），中间一组（回退、重做、清空）夹在中间，所以整组正好在画面中线上；画面窄时中间一组和各钮一起收窄 */
.pg-tools-edit {
  justify-content: space-between;
}

.pg-tools-edit > .sh-round {
  flex: 0 0 42px;
}

.pg-tools-mid {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0 4px;
}

/* ---------- 舞台：桌面和画布铺满整页，标题栏、一排钮、抽屉和面板悬浮在上面 ----------
   桌面的纹理由脚本跟着缩放平移（背景的位置和大小），板和块画在整页大的画布上。 */
.pg-desk {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--table);
  background-image: var(--grain);
  background-repeat: repeat;
  background-size: 200px 200px;
}

.pg-board {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  top: 0;
  bottom: 0;
  touch-action: none;
}

/* 随视图平移缩放的 DOM 层（编辑页的文字）的原点：本身没有大小、不挡点击 */
.pg-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  transform-origin: 0 0;
}

.pg-board-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* 还没有拼图时，空板正中的「导入拼图图片」：位置是空板的中心（板从 46px 铺到抽屉露出的那一截以上），点按区 ≥ 44px */
.pg-import {
  position: absolute;
  left: 50%;
  top: calc((100% + var(--bar-h) + var(--tools-h) - var(--u) * 26.4) / 2);
  z-index: 2;
  min-height: 44px;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 4);
  color: var(--ink-2);
  font-size: calc(var(--u) * 5.2);
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: underline dashed;
  text-underline-offset: calc(var(--u) * 1.2);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  touch-action: manipulation;
}

.pg-import:focus-visible {
  outline: 2px solid var(--ink);
}
/* ---------- 抽屉 ---------- */
.pg-drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--bar-h) + var(--tools-h) + var(--u) * 11);
  bottom: 0;
  z-index: 5;
  touch-action: none;
}

/* 手里拿起的那一块（和它的旋转圈）画在最上面的一层，不接收指针 */
.pg-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
}

.pg-drawer.is-sliding {
  transition: transform 0.28s ease-out;
}

.pg-drawer-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.pg-handle {
  position: absolute;
  left: calc(var(--u) * 8);
  top: calc(var(--u) * -8.4);
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 11.5);
  min-width: 52px;
  min-height: 44px;
  color: var(--cream);
  touch-action: none;
}

.pg-handle-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.pg-handle .sh-icon {
  position: absolute;
  left: 50%;
  top: 46%;
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  margin-left: calc(var(--u) * -3.5);
  margin-top: calc(var(--u) * -3.5);
}

.is-drawer-open .pg-handle .sh-icon {
  transform: rotate(180deg);
}

/* 打乱：只在抽屉完全拉起时显示，居中放在抽屉最下面；看得见的形状高 32px、宽 72px，点按区扩到 44px */
.pg-shuffle {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 4);
  flex: none;
  width: 72px;
  height: 32px;
  min-height: 0;
  margin-left: -36px;
  padding: 0;
  font-size: 14px;
  z-index: 6;
}

.page-main:not(.is-drawer-open) .pg-shuffle {
  display: none;
}
/* ---------- 弹窗：叠在页面上的一张纸 ----------
   拼图设置、重新开始确认和模板的导出弹窗共用同一套：整个视口的遮罩、居中、同样的宽度和纸面、右上角小 ×、底部居中的文字确认钮。 */
.sh-dialog {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px;
}

.sh-scrim {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(41, 35, 30, 0.62);
}

.sh-card,
.modal {
  box-sizing: border-box;
  width: calc(var(--u) * 86);
  min-width: 290px;
  max-width: 100%;
}

.sh-card {
  position: relative;
  padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 5);
  color: var(--ink);
}

.sh-card-paper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--paper) var(--grain) repeat;
  border-radius: calc(var(--u) * 2.2) calc(var(--u) * 3) calc(var(--u) * 2.6) calc(var(--u) * 2);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.9) var(--paper-edge);
}

.sh-card-body {
  position: relative;
}

/* 确认钮：居中，一个看得见的圆角矩形（宽 120px、高 40px），点按区扩到 44px */
.sh-card-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--u) * 3);
}

.sh-card-foot .sh-pill {
  flex: 0 0 auto;
  width: 120px;
  height: 40px;
  min-height: 0;
  padding: 0;
  font-size: 16px;
}

.sh-card-foot .sh-pill::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  bottom: -2px;
}
/* 右上角叠一个小 ×：看得见的是 16×16 的字形（没有底色块），距面板右、上边各 6px；触控区 44×44 用本身的大小撑出来，不占一行。 */
.sh-x {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 44px;
  height: 44px;
  color: var(--ink-2);
  touch-action: manipulation;
}

.sh-x .sh-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
}

/* ---------- 拉条 ---------- */
.sh-slider {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  --knob: calc(var(--u) * 4.2);
}

.sh-slider-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--knob);
  margin-top: calc(var(--u) * -2.1);
  border-radius: calc(var(--u) * 2.1);
  box-sizing: border-box;
  border: 2px solid var(--edge);
  background: var(--track);
  pointer-events: none;
}

.sh-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: calc(var(--u) * 2.1);
  background: var(--ink);
}

.sh-slider-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  touch-action: pan-y;
}

/* ---------- 分段钮 ---------- */
.sh-seg {
  display: flex;
  box-sizing: border-box;
  min-height: 44px;
  height: calc(var(--u) * 11);
  border: 2px solid var(--edge);
  border-radius: calc(var(--u) * 2.8);
  background: var(--chip);
}

.sh-seg-btn {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--u) * 1.2);
  color: var(--ink-2);
  font-size: calc(var(--u) * 3.7);
  white-space: nowrap;
  font-weight: 900;
  border-radius: calc(var(--u) * 2.8);
  touch-action: manipulation;
}

.sh-seg-btn[aria-selected='true'] {
  color: var(--cream);
  background: var(--ink);
}

/* ---------- 小标签（看得见的形状高 32px，点按区扩到 44px）---------- */
.sh-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 26px;
  margin-right: calc(var(--u) * 1.4);
  padding: 0 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  touch-action: manipulation;
}

.sh-chip:last-child {
  margin-right: 0;
}

.sh-chip-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  border: 2px solid var(--edge);
  background: var(--chip);
  border-radius: calc(var(--u) * 2.6) calc(var(--u) * 3) calc(var(--u) * 2.8) calc(var(--u) * 2.4);
}

.sh-chip-text {
  position: relative;
}

.sh-chip[aria-pressed='true'] {
  color: var(--cream);
}

.sh-chip[aria-pressed='true'] .sh-chip-bg {
  border-color: var(--ink-edge);
  background: var(--ink);
}

.sh-chip-plus {
  min-width: 26px;
}

.sh-chip-plus .sh-icon {
  position: relative;
  width: 16px;
  height: 16px;
}

/* 导入的字体：字体钮后面跟一个小 ×（删除），整体当作一个小标签 */
.ed-font {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-right: calc(var(--u) * 1.4);
}

.ed-font .sh-chip {
  margin-right: 0;
  padding-right: 22px;
}

.ed-font-x {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  padding: 0;
  color: var(--ink-2);
  touch-action: manipulation;
}

.ed-font .sh-chip[aria-pressed='true'] ~ .ed-font-x {
  color: var(--cream);
}

.ed-font-x .sh-icon {
  width: 100%;
  height: 100%;
}

.ed-font-x::after {
  content: '';
  position: absolute;
  left: -14px;
  right: -8px;
  top: -14px;
  bottom: -14px;
}

/* ---------- 拼图设置 ---------- */
.su-shot {
  position: relative;
  width: calc(var(--u) * 52);
  margin: 0 auto;
}

.su-img {
  display: block;
  margin: 0 auto;
}

.su-ctl {
  margin-top: calc(var(--u) * 3);
}

.su-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.su-label {
  font-size: calc(var(--u) * 4.6);
  font-weight: 900;
}

.su-grid {
  font-size: calc(var(--u) * 7.4);
  font-weight: 900;
  line-height: 1.1;
}

.su-num {
  display: inline-block;
  position: relative;
  min-width: 2em;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: calc(var(--u) * 0.5) dashed var(--ink-3);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

/* 点按区扩到 44px，外观不变 */
.su-num::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: 44px;
  margin-top: -22px;
}

.su-num-input {
  width: 2em;
  min-width: 0;
  border-bottom-style: solid;
  border-bottom-color: var(--ink);
  outline: none;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.su-times {
  display: inline-block;
  margin: 0 0.25em;
}

.su-total {
  min-width: calc(var(--u) * 17);
  font-size: calc(var(--u) * 3.8);
  text-align: right;
  color: var(--ink-2);
}

.su-row {
  display: flex;
  align-items: center;
}

.su-end {
  flex: 0 0 auto;
  font-size: calc(var(--u) * 3.8);
  color: var(--ink-2);
}

.su-row .sh-slider {
  margin: 0 calc(var(--u) * 2);
}

/* ---------- 编辑页：板铺满标题以下；一排钮和标签页窗浮在板上 ---------- */
/* 板上的文字：层和板同大小。一段文字默认一行，回车另起一行，选中时套方形浅虚线，末尾一根竖线表示可以直接打字 */
.ed-layer {
  position: absolute;
  pointer-events: none;
}

.ed-text {
  position: absolute;
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.4);
  line-height: 1.25;
  white-space: normal;
  touch-action: none;
  pointer-events: auto;
  border-radius: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.ed-text.is-sel {
  border: 1px dashed var(--ink-3);
  border-radius: 0;
}

.ed-line {
  position: relative;
}

.ed-text-run,
.ed-mirror {
  display: block;
  min-height: 1.25em;
  font-weight: 900;
  white-space: nowrap;
}

.ed-text-run {
  position: relative;
  outline: none;
}

/* 随机颜色：每个字的颜色画在镜像里，输入的这一层透明、只留光标和选中的底色 */
.ed-mirror {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.ed-text:not(.is-random) .ed-mirror {
  display: none;
}

.ed-text.is-random .ed-text-run {
  caret-color: var(--ink);
}

.ed-text.is-random .ed-text-run::selection {
  color: transparent;
  background: rgba(104, 141, 150, 0.35);
}

.ed-caret {
  position: absolute;
  left: calc(var(--u) * 1.4);
  bottom: calc(var(--u) * 0.7);
  width: 1px;
  height: 1.25em;
  background: var(--ink-2);
}

.ed-scale {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  background: var(--cream);
  box-shadow: none;
  touch-action: none;
}

.ed-scale::after {
  content: '';
  position: absolute;
  left: -16px;
  top: -16px;
  right: -16px;
  bottom: -16px;
}

.page-edit .sh-panel.ed-panel {
  position: absolute;
  left: calc(var(--u) * 3);
  right: calc(var(--u) * 3);
  bottom: calc(var(--u) * 3);
  z-index: 6;
  margin: 0;
}

/* ---------- 标签页窗：纸片面板，上面一排标签，下面是调节区（高度固定三行，换标签不变高） ---------- */
.sh-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
}

.sh-panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--paper) var(--grain) repeat;
  border-radius: calc(var(--u) * 2.2) calc(var(--u) * 3) calc(var(--u) * 2.6) calc(var(--u) * 2);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.9) var(--paper-edge);
}

.is-boiling .sh-panel::before {
  filter: url(#boil);
}

.sh-panel > * {
  position: relative;
}

.sh-panel-tabs {
  flex: none;
  height: 28px;
  min-height: 0;
}

.sh-panel-tabs .sh-seg-btn {
  font-size: 13px;
}

.sh-panel-adjust {
  flex: none;
  height: 80px;
  margin-top: 4px;
}

/* 屏幕不高（横屏手机）时标签页窗再收一档 */
@media (max-height: 520px) {
  .sh-panel {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .sh-panel-tabs {
    height: 26px;
  }

  .sh-panel-adjust {
    height: 72px;
    margin-top: 4px;
  }

  .sh-row {
    height: 30px;
  }

  .sh-row-ctl .sh-chip,
  .sh-row-ctl .color-button {
    height: 24px;
  }

  .page-edit .sh-panel.ed-panel {
    bottom: 6px;
  }
}

.sh-pane {
  display: none;
}

.sh-pane.is-on {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.sh-pane-bg.is-on .sh-pill {
  align-self: flex-start;
}

.sh-pane.is-on > .sh-row + .sh-row,
.sh-pane-bg.is-on .sh-pill + .sh-row {
  margin-top: 10px;
}

.sh-pane-bg .sh-pill {
  flex: 0 0 auto;
  width: 120px;
  height: 32px;
  min-height: 0;
  padding: 0;
  font-size: 14px;
}

/* 一行调节：最左边是这一行在调什么（名字），右边是调节的东西 */
.sh-row {
  display: flex;
  flex: none;
  align-items: center;
  height: 32px;
}

.sh-row-label {
  flex: 0 0 52px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--ink-2);
}

.sh-row-ctl {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.sh-row-ctl .sh-slider {
  height: 36px;
  margin: 0;
}

@media (max-height: 520px) {
  .sh-row {
    height: 30px;
  }

  .sh-row-ctl .sh-slider {
    height: 30px;
  }
}

.sh-row-ctl .sh-slider-input {
  top: -4px;
  height: 44px;
}

/* 看得见的形状高 26–32px，点按区用伪元素扩到 44px（两行之间的重叠部分由后面的一行占） */
.sh-pill::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  bottom: -6px;
}

.sh-chip::after,
.color-button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  bottom: -9px;
}

/* 字体一排：放不下时在这一排里左右滑 */
.ed-chips {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.ed-chips::-webkit-scrollbar {
  display: none;
}

.sh-row-ctl > .sh-chip-plus {
  margin-left: calc(var(--u) * 1.4);
}

/* 颜色钮：一块 48×26 的色块，边清楚；点开是模板的小色盘。颜色一行里它是「自定义」，按下（aria-pressed）时粗边 */
.sh-row-ctl .color-button {
  flex: 0 0 48px;
  width: 48px;
  height: 26px;
  box-sizing: border-box;
  margin-right: calc(var(--u) * 1.4);
  border: 2px solid var(--edge);
  border-radius: calc(var(--u) * 2);
}

.sh-row-ctl .color-button.is-open {
  box-shadow: none;
  border-color: var(--ink);
}

.sh-row-ctl .color-button[aria-pressed='true'] {
  border-color: var(--ink);
  border-width: 3px;
}

@media (max-height: 520px) {
  .sh-row-ctl .sh-slider-input {
    top: 0;
    height: 30px;
  }

  .sh-row-ctl .color-button {
    height: 24px;
  }
}

/* ---------- 模板弹窗（导出流程）：和本作品的纸片弹窗同一套，按钮平涂 ---------- */
.modal {
  border: 0;
  background: var(--paper) var(--grain) repeat;
  border-radius: calc(var(--u) * 2.2) calc(var(--u) * 3) calc(var(--u) * 2.6) calc(var(--u) * 2);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.9) var(--paper-edge);
}

/* 关闭：面板右上角的小 ×，字形 18px、视觉框 22px、距角 6px，没有底色；触控区用伪元素扩到 44px，不占一行。 */
.modal .modal-close {
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 22px;
}

.modal-close::after {
  content: '';
  position: absolute;
  left: -18px;
  right: -4px;
  top: -4px;
  bottom: -18px;
}

.modal .modal-head {
  padding-right: 28px;
}

.modal-untitled .modal-body > :first-child:not(.modal-stack),
.modal-untitled .modal-stack > :first-child {
  max-width: calc(100% - 28px + var(--gap-3));
}

.modal .btn {
  border: 2px solid var(--edge);
  border-radius: calc(var(--u) * 2.6) calc(var(--u) * 3) calc(var(--u) * 2.8) calc(var(--u) * 2.4);
  background: var(--chip);
  color: var(--ink);
  font-weight: 900;
  box-shadow: none;
}

.modal .btn-primary {
  border-color: var(--ink-edge);
  background: var(--ink);
  color: var(--cream);
}

.modal .btn[disabled],
.modal .btn.is-off {
  background: var(--chip);
  color: var(--ink-3);
  opacity: 0.7;
}

/* ---------- 确认：一句问题，居中 ---------- */
.cf-question {
  margin: 0;
  padding: calc(var(--u) * 3) 0 0;
  font-size: calc(var(--u) * 5);
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}