/* 哐哐叠叠画：夜里的手工纸——暖奶油的桌面和面板、深李子紫的标题条和按钮、珊瑚红点缀、近黑偏紫的纸。
   所有尺寸用 calc(var(--u) * n)；--u、--tool（标签页行高）、--langh（语言钮高）、--headh（标题条高）由壳按窗口算好写进来。
   浅底只配深字，深底只配浅字（强制深色下不出现中灰底配深字）。 */
:root {
  --desk: #e6dccf;
  --desk-side: #d5c8b8;
  --bar-dark: #251d30;
  --title: #f6ddcc;
  --paper: #f5ede2;
  --paper-edge: #e2d5c4;

  /* 共用部件（弹窗、提示条）跟着这套色 */
  --bg: #d5c8b8;
  --surface: #f5ede2;
  --surface-2: #e2d5c4;
  --field: #fbf6ee;
  --bar: #3b3047;
  --disc: #f5ede2;
  --ink: #2b2433;
  --ink-2: #625670;
  --ink-3: #8a7f96;
  --line: #3b3047;
  --accent: #d9654d;
  --accent-ink: #b24a34;
  --danger: #a3392f;
  --on-dark: #f6ddcc;

  --knob: calc(var(--u) * 5.4);
}

html,
body {
  background-color: var(--desk-side);
  background-image: var(--paper-tex);
}

/* ---------- 画面框 ---------- */
.mt-frame {
  position: absolute;
  top: 0;
  background-color: var(--desk);
  background-image: var(--paper-tex);
}

.mt-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mt-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- 标题条：深李子紫一整块，底边一道更深的窄带 ---------- */
.mt-head {
  position: relative;
  flex: none;
  box-sizing: border-box;
  height: var(--headh);
  background-color: var(--bar);
}

/* 底边更深的窄带（用背景色而不是边框，强制深色时颜色保持不变） */
.mt-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 1.7);
  background-color: var(--bar-dark);
}

.mt-headrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-left: 80px;
  padding-right: 80px;
  padding-bottom: calc(var(--u) * 1.7);
}

.mt-title {
  margin: 0;
  padding-left: 0.1em;
  font-size: calc(var(--u) * 6.6);
  font-weight: var(--title-weight);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--title);
  white-space: nowrap;
  flex: none;
}

.is-land .mt-title {
  font-size: calc(var(--u) * 5.6);
}

html[lang="en"] .mt-title {
  letter-spacing: 0.02em;
  padding-left: 0;
}

/* 中 / EN：固定在画面右上角（距上、右各 6px），小、扁，平涂没有描边；两半共用外框，选中的一半填深色；触控区用伪元素扩到 44 像素。 */
.mt-lang {
  display: flex;
  height: var(--langh);
  border-radius: 11px;
  background: var(--paper);
}

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

.mt-sound-pos {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 6px;
}

.mt-sound-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
}

.mt-sound-btn .icon {
  display: block;
  width: 14px;
  height: 14px;
}

.mt-sound-btn .icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mt-sound-btn::after {
  left: -6px;
  right: -6px;
}

.mt-lang-btn {
  position: relative;
  width: 28px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink-2);
  border-radius: 11px;
}

.mt-lang-btn::after {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: 50%;
  height: 44px;
  margin-top: -22px;
}

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

.mt-lang-btn[aria-pressed='true'] {
  background: var(--bar-dark);
  color: var(--on-dark);
}

/* ---------- 基础五钮：压扁、纯色、没有描边和阴影；看得见的形状高 ≤ 32px、宽 ≤ 48px，点按区用伪元素扩到 44px；竖屏、横屏都横排一行 ---------- */
.mt-pill {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 32px;
  color: var(--on-dark);
}

.mt-pill::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: -6px;
  bottom: -6px;
}

.mt-pill:disabled {
  color: #f1eaf6;
  cursor: default;
}

.mt-pill-text {
  display: none;
  position: relative;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* 一排，整组居中于屏幕（不靠左，也不是只对画布居中），悬浮在舞台顶部；只有「图层」是字（没有图标）。这一条不接指针，空隙里按下去落在舞台上。 */
.mt-basics {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 1.8);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mt-basics .mt-pill {
  pointer-events: auto;
}

.mt-pill + .mt-pill {
  margin-left: 12px;
}

/* 极窄屏（不到 300 宽）：基础钮之间的空隙收窄，一排放得下 */
@media (max-width: 300px) {
  .mt-pill + .mt-pill {
    margin-left: 6px;
  }
}

.mt-pill[data-role='layers'] .mt-pill-text {
  display: block;
}

/* ---------- 画布：整个舞台铺满标题条下面的整块页面 ---------- */
.mt-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.mt-mid {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.mt-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-float);
  pointer-events: none;
}

.mt-stage {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- 文字标签页（平涂：浅底托着，选中的一格填深色，没有描边和阴影）---------- */
.mt-tabs {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: calc(var(--u) * 0.7);
  border-radius: calc(var(--u) * 2.6) calc(var(--u) * 2.3) calc(var(--u) * 2.7) calc(var(--u) * 2.4);
  background-color: var(--surface-2);
}

.mt-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--u) * 1);
  color: var(--ink-2);
}

.mt-tab-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: calc(var(--u) * 1.9) calc(var(--u) * 1.7) calc(var(--u) * 2) calc(var(--u) * 1.8);
  pointer-events: none;
}

.mt-tab[aria-selected='true'] {
  color: var(--on-dark);
}

.mt-tab[aria-selected='true'] .mt-tab-bg {
  background-color: var(--bar);
}

.mt-tab-text {
  position: relative;
  font-size: var(--m13-3_9);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

/* 图案：尺寸由各处的类定；图案自带形状，不裁圆角 */
.mt-swatch {
  display: block;
  flex: none;
}

span.mt-swatch {
  border-radius: 22%;
}

.mt-tab-swatch {
  position: relative;
  width: var(--m26-8);
  height: var(--m26-8);
  margin-right: calc(var(--u) * 1.4);
}

/* ---------- 工具面板：悬浮在舞台底部（横向时在右边），实心底色，里面是工具标签页 + 穿透层数 + 粗细 ---------- */
.mt-dock {
  position: absolute;
  left: calc(var(--u) * 1.6);
  right: calc(var(--u) * 1.6);
  bottom: calc(var(--u) * 1.6);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2.4) calc(var(--u) * 2.1) calc(var(--u) * 2.5) calc(var(--u) * 2.2);
  background-color: var(--paper);
}

.mt-low {
  flex: none;
}

.mt-pierce {
  display: flex;
  align-items: center;
  margin-top: calc(var(--u) * 1.2);
}

.mt-pierce-label {
  flex: none;
  margin-right: calc(var(--u) * 1.6);
  font-size: var(--m12-3_4);
  font-weight: 900;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}

/* 自动 / 手动：比工具标签页矮一圈，触控区用伪元素扩到 44 */
.mt-mode {
  flex: none;
  padding: 2px;
}

.mt-mode .mt-tab {
  flex: none;
  min-height: 32px;
  min-width: 44px;
  padding: 0 calc(var(--u) * 1.6);
}

.mt-mode .mt-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  bottom: -6px;
}

.mt-mode .mt-tab-text {
  font-size: var(--m12-3_6);
}

/* 当前穿透层数：纸色底 + 深色数字（页面元素，强制深色时底和字一起反相） */
.mt-val {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  height: var(--m32-8);
  padding: 0 8px;
  white-space: nowrap;
  border-radius: calc(var(--u) * 2);
  background-color: var(--surface-2);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}

/* 拉条 */
.mt-slider {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 44px;
  margin-left: calc(var(--u) * 2.2);
  margin-right: calc(var(--u) * 2.2);
}

.mt-track {
  position: relative;
  width: 100%;
  height: calc(var(--u) * 2.8);
  border-radius: 999px;
  background: var(--surface-2);
}

.mt-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--bar);
}

.mt-knob {
  position: absolute;
  top: 50%;
  width: var(--knob);
  height: var(--knob);
  margin-top: calc(var(--knob) / -2);
  border-radius: 50%;
  background: var(--accent);
}

.mt-range {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  touch-action: none;
}

/* ---------- 横向（手机横屏和电脑）：标题条横贯，下面整块是舞台，基础钮悬浮在顶部居中，工具面板悬浮在右边（撑满高度的纸面板） ---------- */
.is-land .mt-dock {
  left: auto;
  top: calc(var(--u) * 1.6);
  width: var(--m164-32);
  padding: calc(var(--u) * 1.6);
}

/* 右栏：工具标签页（矮屏是两行两列，大屏是竖着排撑满），下面是穿透层数和粗细 */
.is-land .mt-low {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.is-land .mt-tools {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: 44px;
  grid-gap: calc(var(--u) * 0.8);
}

.is-land .mt-tools .mt-tab {
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

.is-land .mt-tools .mt-tab-swatch {
  width: 22px;
  height: 22px;
  margin: 0 0 2px;
}

.is-land .mt-tools .mt-tab-text {
  font-size: 12px;
}

.is-land .mt-pierce {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-top: calc(var(--u) * 1.2);
}

.is-land .mt-pierce-label {
  grid-area: 1 / 1 / 2 / 3;
  margin-right: 0;
}

.is-land .mt-mode {
  grid-area: 2 / 1 / 3 / 3;
  display: flex;
  margin-top: calc(var(--u) * 0.6);
}

.is-land .mt-mode .mt-tab {
  flex: 1 1 0;
}

/* 拉条和它当前的位置（最多 / 固定 N 层）在同一行，紧挨着 */
.is-land .mt-slider {
  grid-area: 3 / 1 / 4 / 2;
  margin-left: 0;
  margin-right: 6px;
}

.is-land .mt-val {
  grid-area: 3 / 2 / 4 / 3;
  height: 30px;
  padding: 0 6px;
  font-size: 13px;
}

/* 大屏横向（电脑）：工具标签页很高，图案占位放大、竖着排在字上面 */
@media (min-width: 700px) and (min-height: 600px) {
  .is-land .mt-tools {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .is-land .mt-tools .mt-tab {
    flex: 1 1 0;
    min-height: 0;
  }

  .is-land .mt-tools .mt-tab + .mt-tab {
    margin-top: calc(var(--u) * 0.8);
  }

  .is-land .mt-tools .mt-tab-swatch {
    width: calc(var(--u) * 8.6);
    height: calc(var(--u) * 8.6);
    margin: 0 0 calc(var(--u) * 1.2);
  }

  .is-land .mt-tools .mt-tab-text {
    font-size: var(--m15-4_4);
  }
}

/* ---------- 弹窗和提示条：同一套手剪纸片 ---------- */
.modal {
  border: calc(var(--u) * 0.6) solid var(--line);
  border-radius: calc(var(--u) * 1.4);
  background-color: var(--surface);
  background-image: var(--paper-tex);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.9) var(--paper-edge);
}

/* 关闭：面板右上角的小 ×，字形 18px、视觉框 22px、距角 6px，没有底色；触控区用伪元素扩到 44 像素，不占标题条右侧。 */
.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;
}

/* 弹窗里不叠第二层抖动（弹窗整体已经带轻抖） */
.is-boiling .modal .boil,
.is-boiling .modal .boil-soft {
  filter: none;
}

/* 弹窗里的确认：文字按钮，居中，不撑满一整行 */
.modal-foot {
  justify-content: center;
  border-top: 0;
  padding-top: 0;
}

.modal-foot .btn {
  flex: 0 0 auto;
  min-width: calc(var(--u) * 38);
  min-height: 44px;
  padding: 0 calc(var(--u) * 6);
  border-radius: 999px;
  font-size: calc(var(--u) * 4.2);
}

.modal-untitled .modal-body {
  padding-top: calc(var(--u) * 7);
}

.modal-untitled .modal-text {
  text-align: center;
}

.modal-untitled .modal-body > :first-child:not(.modal-stack),
.modal-untitled .modal-stack > :first-child {
  max-width: none;
}

/* 弹窗里的按钮：平涂，没有描边和阴影；确认钮是深色底。 */
.btn {
  border: 0;
  border-radius: calc(var(--u) * 1.6);
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 900;
  box-shadow: none;
}

.btn-primary {
  background: var(--bar);
  color: var(--on-dark);
}

.btn-danger {
  background: var(--danger);
  color: #fbeee6;
}

.btn.is-off,
.btn[disabled] {
  color: var(--ink-3);
}

.toast {
  border-radius: calc(var(--u) * 1.4);
}

/* ---------- 图层弹窗 ---------- */
.mt-dlg-tabs {
  margin-bottom: calc(var(--u) * 2.4);
}

.mt-dlg-tabs .mt-tab-text {
  font-size: var(--m15-4_4);
}

.mt-lrow {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--m56-14_5);
  padding: calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 0.4);
  border-radius: calc(var(--u) * 2);
  background-color: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}

.mt-lrow + .mt-lrow {
  margin-top: calc(var(--u) * 1.4);
}

.mt-lrow[aria-selected='true'] {
  background-color: var(--bar);
  color: var(--on-dark);
}

.mt-grip {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  color: var(--ink-2);
  touch-action: none;
  cursor: grab;
}

.mt-lrow[aria-selected='true'] .mt-grip {
  color: #cdbfd6;
}

.mt-grip svg {
  display: block;
  width: calc(var(--u) * 6);
  min-width: 20px;
  height: calc(var(--u) * 6);
  min-height: 20px;
}

.mt-grip-blank {
  cursor: default;
}

.mt-lrow + .mt-lrow-bg {
  margin-top: calc(var(--u) * 2.4);
}

.mt-thumb {
  width: var(--m40-10);
  height: var(--m40-10);
  margin-right: calc(var(--u) * 2.2);
}

.mt-linfo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mt-lname,
.mt-pname {
  font-size: var(--m15-4_6);
  font-weight: 900;
  line-height: 1.2;
}

.mt-ltag {
  margin-top: 2px;
  font-size: var(--m12-3_2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent-ink);
}

.mt-lrow[aria-selected='true'] .mt-ltag {
  color: #f2b8a6;
}

.mt-lreplace {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px;
  margin-left: calc(var(--u) * 1.4);
  padding: 0 calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2);
  background: rgba(43, 36, 51, 0.1);
  color: inherit;
}

.mt-lrow[aria-selected='true'] .mt-lreplace {
  background: rgba(246, 221, 204, 0.2);
}

.mt-lreplace .icon {
  display: block;
  width: var(--m18-5);
  height: var(--m18-5);
  margin-right: calc(var(--u) * 1.2);
}

.mt-lreplace .icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mt-lreplace-text {
  font-size: var(--m13-3_6);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* 添加图层：和层行同款的一整行，居中放加号和字 */
.mt-lrow-add {
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 calc(var(--u) * 2);
  font-weight: 900;
}

.mt-lrow-add[disabled] {
  opacity: 0.45;
  cursor: default;
}

.mt-lrow-add .icon {
  display: block;
  width: var(--m18-5);
  height: var(--m18-5);
  margin-right: calc(var(--u) * 1.2);
}

.mt-lrow-add .icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mt-ladd-text {
  font-size: var(--m15-4_4);
  line-height: 1.2;
}

/* 行尾的小 ×：去掉图片、删除这一层；看得见的只有图标，点按区扩到 44 */
.mt-licon {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 44px;
  margin-left: 2px;
  color: inherit;
  opacity: 0.7;
}

.mt-licon .icon {
  display: block;
  width: var(--m18-5);
  height: var(--m18-5);
}

.mt-licon .icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 预设：一种一行——几块纸片占位色块 + 名字 + 一句说明 */
.mt-prow {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--m64-17);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2);
  background-color: var(--surface-2);
  color: var(--ink);
  text-align: left;
}

.mt-prow + .mt-prow {
  margin-top: calc(var(--u) * 1.4);
}

.mt-prow[aria-pressed='true'] {
  background-color: var(--bar);
  color: var(--on-dark);
}

.mt-pstrip {
  flex: none;
  display: flex;
  margin-right: calc(var(--u) * 2.4);
}

.mt-pswatch {
  width: var(--m20-5_2);
  height: var(--m28-7_2);
  border-radius: 12%;
}

.mt-pswatch + .mt-pswatch {
  margin-left: calc(var(--u) * 0.8);
}

.mt-pdesc {
  margin-top: 3px;
  font-size: var(--m12-3_3);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-2);
}

.mt-prow[aria-pressed='true'] .mt-pdesc {
  color: #d6c8de;
}

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

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

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

/* ---------- 粗细大小：和穿透层数同款——名字、拉条、数字框；竖屏一行，横向右栏里名字单独一行 ---------- */
.mt-size {
  display: flex;
  align-items: center;
  margin-top: calc(var(--u) * 0.4);
}

.mt-numbox {
  flex: none;
  box-sizing: border-box;
  width: 52px;
  height: var(--m32-8);
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: calc(var(--u) * 2);
  background-color: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  -webkit-user-select: text;
  user-select: text;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.mt-numbox:focus-visible {
  background-color: var(--paper);
  box-shadow: inset 0 0 0 2px var(--bar);
}

.mt-size.is-off {
  opacity: 0.45;
}

.is-land .mt-size {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-top: calc(var(--u) * 0.4);
}

.is-land .mt-size .mt-pierce-label {
  grid-area: 1 / 1 / 2 / 3;
  margin-right: 0;
}

.is-land .mt-size .mt-slider {
  grid-area: 2 / 1 / 3 / 2;
  margin-left: 0;
  margin-right: 6px;
}

.is-land .mt-size .mt-numbox {
  grid-area: 2 / 2 / 3 / 3;
  width: 44px;
  height: 30px;
  font-size: 13px;
}

/* ---------- 逻辑阶段补的样式 ---------- */
canvas.mt-thumb {
  border-radius: calc(var(--u) * 1.4);
  background-color: var(--surface-2);
}

.mt-lrow.is-shift {
  transition: transform 0.14s;
}

.mt-lrow.is-drag {
  position: relative;
  z-index: 3;
  opacity: 0.94;
}