/* 布料贴图机：经典黑白、以白为主，粗黑线的分格（漫画格）；深灰标题条；控件面浅灰白，选中的是黑；不抖动、不渐变、不画单独投影。
   所有尺寸用 calc(var(--u) * n)；--u、--btn（圆钮）、--chip（小钮）、--tx（文字小钮高）、--stab（大标签高）、--tfs（文字小钮字号）、--slot（格子）、--head（标题条高）、
   --m（画面左右留边）、--g（块与块的间距）由壳按窗口算好写进来。
   三种排布：.is-tall 竖屏（.is-compact 是矮竖屏）、.is-wide 电脑横屏（画布和选择区左右并排）、.is-side 手机横屏和窄的横屏；基础五钮在三种排布里都单独一行、居中在屏幕中线。 */
:root {
  --page: #e1e1e1;
  --side: #cdcdcd;
  --panel: #f6f6f6;
  --panel-edge: #e4e4e4;

  /* 共用部件（弹窗、色盘、提示条）跟着这套色 */
  --bg: #cdcdcd;
  --surface: #f6f6f6;
  --surface-2: #dedede;
  --field: #fcfcfc;
  --bar: #2b2b2b;
  --disc: #f6f6f6;
  --ink: #262626;
  --ink-2: #555555;
  --ink-3: #8c8c8c;
  --line: #262626;
  --accent: #8c8c8c;
  --danger: #262626;
  --on-dark: #f4f4f4;
  --border-w: calc(var(--u) * 0.6);
  --radius: calc(var(--u) * 2.4);
  --radius-sm: calc(var(--u) * 1.6);
}

[hidden] {
  display: none !important;
}

html,
body {
  background: var(--side);
}

/* ---------- 画面框 ---------- */
.mt-frame {
  position: absolute;
  top: 0;
  background: var(--page);
}

.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-plate {
  position: relative;
  display: block;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-weight: 800;
}

.mt-btn {
  width: var(--btn);
  height: var(--btn);
}

.mt-chip {
  width: var(--chip);
  height: var(--chip);
}

/* 文字小钮：宽跟着文字走（量尺 span 撑开），字画在画布里；点击区用透明边扩到 44。 */
.mt-txt {
  height: var(--tx);
  font-size: var(--tfs);
  padding: 0 calc(var(--u) * 2.4);
}

.mt-sizer {
  display: block;
  height: 0;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
  pointer-events: none;
}

.mt-txt::after,
.mt-tab::after,
.mt-seg::after,
.mt-range::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: -4px;
  bottom: -4px;
}

/* 基础五钮里的一格：固定尺寸，不随屏幕放大。每格高 28、宽 ≤ 48（回退、重做 36，含 1.5 像素的分隔线），图案 ≤ 18。 */
.mt-seg {
  flex: none;
  width: 48px;
  height: 28px;
  font-size: 10.5px;
}

.mt-seg::after {
  left: 0;
  right: 0;
  top: -8px;
  bottom: -8px;
}

.mt-seg.is-icon {
  width: 36px;
}

.mt-seg + .mt-seg {
  border-left: 1.5px solid var(--ink);
}

/* 大标签页的一格：整排等分。 */
.mt-tab {
  flex: 1 1 0;
  min-width: 0;
  height: var(--stab);
  font-size: var(--tfs);
}

.mt-big {
  width: 100%;
  height: calc(var(--u) * 14);
  font-size: var(--tfs);
}

/* 中 / EN：扁的小分段钮，放在标题条右端；点击区用透明边扩到 44。 */
.mt-lang {
  position: absolute;
  top: 50%;
  right: calc(var(--u) * 2.2);
  display: flex;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.mt-langbtn {
  width: 34px;
  height: 22px;
  font-size: 11px;
}

.mt-langbtn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -11px;
  bottom: -11px;
}

.mt-lang .mt-plate + .mt-plate {
  margin-left: 1px;
}

/* ---------- 标题条 ---------- */
.mt-head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--head);
  background: #474747;
  border-bottom: calc(var(--u) * 0.9) solid var(--ink);
  box-sizing: border-box;
}

.mt-title {
  margin: 0;
  padding-left: 0.06em;
  font-size: calc(var(--u) * 5);
  font-weight: var(--title-weight);
  line-height: 1;
  letter-spacing: 0.06em;
  color: #d2d2d2;
  white-space: nowrap;
}

html[lang='en'] .mt-title {
  font-size: calc(var(--u) * 3.8);
  letter-spacing: 0.02em;
}

/* ---------- 面板（漫画格） ---------- */
.mt-panel {
  position: relative;
  box-sizing: border-box;
  background: var(--panel);
  border: calc(var(--u) * 0.5) solid var(--ink);
  border-radius: calc(var(--u) * 2.4);
}

.mt-stagepanel {
  padding: 0;
  background: #fcfcfc;
  box-shadow: none;
}

.mt-stage {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--u) * 1.6);
  -ms-touch-action: none;
  touch-action: none;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 基础五钮：一整条黑框，格子之间一道黑分隔线，单独一行，居中在屏幕中线 ---------- */
.mt-basics {
  display: flex;
  align-items: stretch;
  flex: none;
  align-self: center;
  height: 32px;
  margin: var(--g) 0 0;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: #fafafa;
}

/* ---------- 竖屏：标题条、基础钮、画布、操作面板（上下） ---------- */
.is-tall .mt-stagepanel {
  flex: 1 1 0;
  min-height: 0;
  margin: var(--g) var(--m) 0;
}

.is-tall .mt-ops {
  flex: none;
  height: auto;
  max-height: 52%;
  margin: var(--g) var(--m);
}

/* 电脑横屏：画布在左，选择区在右，跟中间这一行一样高。选择区宽度按 --u，不跟整窗拉成一条。 */
.is-wide .mt-body .mt-stagepanel {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.is-wide .mt-body .mt-ops {
  flex: none;
  align-self: stretch;
  width: calc(var(--u) * 72);
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0 0 0 var(--g);
  overflow: hidden;
}

.is-wide .mt-body .mt-panes,
.is-wide .mt-body .mt-pane,
.is-wide .mt-body .mt-subbody {
  min-width: 0;
}

.is-wide .mt-body .mt-subbody {
  overflow-x: hidden;
  overflow-y: auto;
}

.is-side .mt-sub .color-list {
  flex-wrap: wrap;
}

/* ---------- 手机横屏、窄的横屏：画布 | 操作面板 ---------- */
.mt-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  padding: var(--g) var(--m);
}

.mt-body .mt-stagepanel {
  flex: 1 1 0;
  min-width: 0;
}

.mt-body .mt-ops {
  flex: none;
  width: calc(var(--u) * 60);
  margin-left: var(--g);
}

.is-side .mt-strip {
  flex-wrap: nowrap;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
}

.is-side .mt-strip-cells {
  flex: none;
  flex-wrap: nowrap;
}

/* ---------- 操作面板：大标签页 + 小标签页 + 内容 ---------- */
.mt-ops {
  display: flex;
  flex-direction: column;
  padding: 3px calc(var(--u) * 1.4);
}

.is-compact .mt-ops {
  padding: 2px calc(var(--u) * 1.4);
}

.mt-steps {
  flex: none;
}

/* 大标签页：整排一个黑框，格子方方的，格子之间一道黑分隔线。 */
.mt-steptabs {
  display: flex;
  border: 2px solid var(--ink);
}

.mt-steptabs .mt-tab + .mt-tab {
  border-left: 1.5px solid var(--ink);
}

.mt-panes {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  margin-top: 4px;
}

.is-compact .mt-panes {
  margin-top: 2px;
}

/* 所有面板叠在同一格里，只显示当前的；其余不可见但仍占位，所以面板高度取最高的一页，切页时不变。 */
.mt-pane {
  grid-area: 1 / 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mt-pane.is-off,
.mt-sub.is-off,
.mt-colorpage.is-off {
  visibility: hidden;
  pointer-events: none;
}

/* 小标签页：一排文字，放不下可以左右滑（窄横屏和电脑横屏折行）；底下一道线把标签和内容分开；分组之间一道细竖线。 */
.mt-subtabs {
  flex: none;
  display: flex;
  align-items: flex-end;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 4px;
  border-bottom: 1px solid #d0d0d0;
}

.mt-subtabs .mt-txt {
  flex: 1 0 auto;
  height: var(--tx);
  margin-bottom: 3px;
  padding: 0 calc(var(--u) * 0.5);
}

.mt-subtabs .mt-txt.is-group-start::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 4px;
  bottom: 4px;
  width: 1.5px;
  background: #b0b0b0;
}

.is-side .mt-subtabs .mt-txt,
.is-wide .mt-subtabs .mt-txt {
  padding: 0 calc(var(--u) * 0.8);
}

.is-wide .mt-subtabs {
  flex-wrap: wrap;
  overflow: visible;
}

/* 手机横屏高度不够，小标签页一排放不下就左右滑，不折成好几行 */
.is-side .mt-subtabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.mt-subtabs .mt-txt::after {
  top: -7px;
  bottom: -7px;
}

.mt-subtabs .mt-txt + .mt-txt {
  margin-left: calc(var(--u) * 0.4);
}

.mt-subtabs .mt-txt.is-group-start {
  margin-left: 7px;
}

.mt-subbody {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  margin-top: 6px;
  padding-bottom: 4px;
}

.mt-sub {
  grid-area: 1 / 1;
  min-width: 0;
}

.is-compact .mt-subbody {
  margin-top: 1px;
}

.is-compact .mt-subtabs .mt-txt {
  margin-bottom: 1px;
}

.mt-sub > * + * {
  margin-top: 6px;
}

.is-compact .mt-sub > * + * {
  margin-top: 3px;
}

.is-compact .mt-subbody .mt-txt::after,
.is-compact .mt-subbody .mt-range::after {
  top: -1px;
  bottom: -1px;
}

/* 花边缝线：宽度拉条和颜色条同一行，放不下折行；颜色条上下不留空，这一页不比别的页高。 */
.mt-lace-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.mt-lace-row .mt-feel {
  flex: 1 1 calc(var(--u) * 40);
  min-width: calc(var(--u) * 36);
  max-width: calc(var(--u) * 52);
  margin-right: 8px;
}

.mt-sub .mt-lace-row .color-bar {
  flex: 1 1 calc(var(--u) * 36);
  min-width: 0;
}

.mt-sub .mt-lace-row .color-list {
  padding-top: 0;
  padding-bottom: 0;
}

/* 一排文字小钮：整排宽度铺满，放不下折行。 */
.mt-row-chips {
  display: flex;
  flex-wrap: wrap;
  margin-right: -6px;
  margin-bottom: -6px;
}

.mt-row-chips .mt-txt {
  flex: 1 1 auto;
  margin: 0 6px 6px 0;
}

/* 粗细拉条和压感钮同一行：拉条占满剩下的宽度。 */
.mt-size-row {
  display: flex;
  align-items: center;
}

.mt-size-row .mt-feel {
  flex: 1 1 auto;
  min-width: 0;
}

.mt-size-row .mt-txt {
  flex: none;
  margin: 0 0 0 6px;
}

/* 色彩页：布料色、图案色、预设组合三个分页在上面，下面是颜色条或一排搭配色，叠在同一格里。 */
.mt-colorbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.mt-colorpage {
  grid-area: 1 / 1;
  min-width: 0;
}

.mt-upprev {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--u) * 2);
}

.mt-upimg {
  display: block;
  max-width: 100%;
  max-height: 120px;
  border: 2px solid var(--ink);
}

/* 二选一：两个小钮共用一个黑框，框住成一组。 */
.mt-pair {
  display: flex;
  border: 2px solid var(--ink);
}

.mt-pair .mt-txt {
  flex: 1 1 0;
  margin: 0;
}

.mt-pair .mt-txt + .mt-txt {
  border-left: 1.5px solid var(--ink);
}

.mt-feel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px 8px;
}

.mt-feel-one {
  grid-template-columns: 1fr;
  max-width: calc(var(--u) * 90);
}

.mt-range {
  position: relative;
  width: 100%;
  height: var(--tx);
  min-width: 0;
  font-size: var(--tfs);
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

/* 格子条：横向一排，可左右滑。 */
.mt-strip {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  padding: 0;
}

.mt-strip-cells {
  display: flex;
  align-items: flex-start;
  flex: none;
}

.mt-slot {
  position: relative;
  flex: none;
  width: var(--slot);
  height: calc(var(--slot) + 15px);
  margin-right: calc(var(--u) * 1.8);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-weight: 800;
  font-size: calc(var(--tfs) - 1px);
}

/* 颜色条：整排一行，可左右滑。 */
.mt-sub .color-bar {
  flex: none;
}

.mt-sub .color-list {
  overflow-x: auto;
  scrollbar-width: none;
}

.mt-sub .color-list::-webkit-scrollbar {
  display: none;
}

.is-side .mt-sub .color-list {
  overflow-x: auto;
  flex-wrap: nowrap;
}

/* ---------- 对话框气泡：小钮一样宽，排成整齐的几行；宽度由壳按能放几列算好，上下的尖角各占 9 ---------- */
.mt-pop {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 6px 6px 2px;
  max-width: calc(100% - var(--u) * 3);
}

.mt-pop[data-tail='top'] {
  padding-top: 15px;
}

.mt-pop[data-tail='bottom'] {
  padding-bottom: 11px;
}

.mt-pop .mt-plate {
  margin: 0 2px 4px;
}

.mt-pop .mt-txt {
  height: 34px;
  padding: 0;
  font-size: 14px;
}

/* ---------- 弹窗：和页面同一套 ---------- */
.modal-overlay {
  background: rgba(38, 38, 38, 0.62);
}

.modal {
  background: var(--panel);
  border: calc(var(--u) * 0.5) solid var(--ink);
  border-radius: calc(var(--u) * 2.4);
}

/* 关闭：面板角上的小 ×，字 18 像素、视觉框 20、离角 4 像素（加弹窗的线框 ≤ 8）；点击区用透明边扩到 44；不占标题条右侧，不给它留整块宽度。 */
.modal-close {
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.modal-head {
  padding-right: var(--gap-3);
}

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

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

.modal-untitled .modal-body {
  padding-top: 30px;
}

/* 确认类弹窗：文字和按钮都居中；按钮是文字钮，有最小宽度，不拉满整行。 */
.modal-text {
  text-align: center;
}

.modal-foot {
  justify-content: center;
}

.modal-foot .btn {
  flex: 0 1 auto;
  min-width: calc(var(--u) * 34);
}

.modal .btn {
  border-width: calc(var(--u) * 0.6);
  border-radius: calc(var(--u) * 2);
}

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

.mt-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: calc(var(--u) * 2);
}

/* 布料搜索：特点词气泡一组一块，下面是符合的布料，从左到右排满一行再换行。 */
.mt-search-label {
  margin-bottom: 4px;
  font-size: calc(var(--tfs) - 1px);
  font-weight: 800;
}

.mt-search-tags .mt-txt {
  flex: none;
}

.mt-search-empty {
  margin: 0;
  text-align: center;
  font-weight: 800;
}

.mt-strip-wrap,
.mt-strip-wrap.scroll-x {
  overflow: visible;
}

.mt-strip-wrap .mt-strip-cells {
  flex-wrap: wrap;
}

.mt-strip-wrap .mt-slot {
  margin-bottom: calc(var(--u) * 1.4);
}

/* ---------- 画布上的悬浮选择（深色小工具条，可拖走）：把手 + 两组小钮，窄屏下第二组折到第二行 ---------- */
.mt-float {
  position: absolute;
  left: calc(var(--u) * 2);
  top: calc(var(--u) * 2);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: -webkit-max-content;
  width: max-content;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.2);
  background: #2b2b2b;
  border-radius: calc(var(--u) * 2.4);
}

.mt-fmain {
  display: flex;
  align-items: center;
}

.mt-fextra {
  min-width: calc(var(--u) * 52);
  margin-top: calc(var(--u) * 0.8);
}

.mt-fextra .mt-feel {
  max-width: none;
}

.mt-frow {
  display: flex;
  align-items: center;
}

.mt-frow:empty {
  display: none;
}

.mt-frow + .mt-frow:not(:empty) {
  margin-left: calc(var(--u) * 1.4);
  padding-left: calc(var(--u) * 1.4);
  border-left: 2px solid #8a8a8a;
}

.mt-float.is-two .mt-fmain {
  flex-direction: column;
  align-items: flex-start;
}

.mt-float.is-two .mt-frow + .mt-frow:not(:empty) {
  margin: calc(var(--u) * 0.8) 0 0;
  padding: calc(var(--u) * 0.8) 0 0;
  border-left: 0;
  border-top: 2px solid #8a8a8a;
}

.mt-fgroup {
  display: flex;
  align-items: center;
}

.mt-fgroup + .mt-fgroup {
  margin-left: calc(var(--u) * 1.4);
  padding-left: calc(var(--u) * 1.4);
  border-left: 2px solid #8a8a8a;
}

.mt-float .mt-txt {
  height: calc(var(--tx) - 4px);
  padding: 0 calc(var(--u) * 1.4);
  margin-left: calc(var(--u) * 0.8);
}

.mt-float .mt-txt::after {
  top: -7px;
  bottom: -7px;
  left: -2px;
  right: -2px;
}

.mt-grip {
  position: relative;
  flex: none;
  width: 24px;
  height: calc(var(--tx) - 6px);
  padding: 0;
  border: 0;
  background: none;
  touch-action: none;
  cursor: -webkit-grab;
  cursor: grab;
}

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

@media (max-width: 520px) {
  .mt-fgroup + .mt-fgroup {
    flex-basis: 100%;
    margin-left: 24px;
    margin-top: 2px;
    padding-left: 0;
    border-left: 0;
  }
}

/* 窄的横屏：操作面板只有 ~270 宽，文字小钮字小一点、边距小一点，标签不换行 */
.is-side .mt-tab,
.is-side .mt-row-chips .mt-txt,
.is-side .mt-pair .mt-txt {
  font-size: 12px;
}

.is-side .mt-row-chips .mt-txt {
  padding: 0 calc(var(--u) * 1.6);
}

/* ---------- 摆放覆盖图：贴在图角上的圆钮（确定、取消、旋转缩放） ---------- */
.mt-knob {
  position: absolute;
  z-index: 6;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ink);
  -ms-touch-action: none;
  touch-action: none;
}

.mt-knob[hidden] {
  display: none;
}

.mt-knob::before {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: -8px;
  bottom: -8px;
  border-radius: 50%;
}