/* 气球涂鸦大师：整个窗口是一块橄榄色的场景（3D 留位框），顶上条纹篷布，左右和底下是红棕色的粗边框；
   按钮、笔托、面板浮在场景上面遮盖它。所有尺寸用 calc(var(--u) * n)；--u、--btnw / --btnh（基础钮 44 × 30）、--actw / --acth（动作钮 48 × 32）、--langh / --langw / --langtop（中 / EN）、
   --bw（边框粗）、--awn（篷布最低处）、--signtop / --signh（标题牌）、--band（底边框高）、--trayh / --trayw / --tabrow / --cellw / --cellh（笔托）、
   --barh（设计页底边框里的托盘）由壳按窗口算好写进来。 */
:root {
  color-scheme: only light;
  --olive: #b2a880;
  --border: #86342d;
  --paper: #eadfc8;
  --paper-edge: #d4c6a6;
  --paper-line: #a69770;
  --title: #86342d;

  /* 共用部件（弹窗、提示条、色盘）跟着这套色 */
  --bg: #86342d;
  --surface: #f1e8d6;
  --surface-2: #d9ccae;
  --field: #f8f1e2;
  --bar: #86342d;
  --disc: #d6c4c2;
  --ink: #3b2321;
  --ink-2: #6b4a46;
  --ink-3: #a08985;
  --line: #6b2924;
  --accent: #d9a932;
  --danger: #86342d;
  --on-dark: #f3e6df;

  /* 标签页、按钮、小标题条 */
  --tab-bg: #b99794;
  --tab-edge: #a6827f;
  --tab-text: #5a3a36;
  --tab-on: #865a56;
  --tab-on-edge: #4a2e2b;
  --strip-bg: #865a56;
  --strip-edge: #4d2f2b;
  --strip-in: #6f4743;
  --strip-text: #f3e6df;
  --btn-edge: #7e5f5b;
  --btn-in: #bba5a2;
  --btn-primary: #865a56;
  --btn-primary-edge: #4a2e2b;
  --btn-primary-in: #6c4541;
  --btn-danger-edge: #4a1b17;
  --btn-danger-in: #6b2924;
  --overlay: rgba(48, 42, 40, 0.55);
}

:root[data-scheme='light'] {
  color-scheme: light;
}

/* 深色：真的做一套，不靠系统反相。画布画的件读 KK.pal 里同一张表（art/palette.js）。 */
:root[data-scheme='dark'] {
  color-scheme: dark;
  --olive: #454027;
  --border: #4f1f1b;
  --paper: #3f3230;
  --paper-edge: #4d3f3c;
  --paper-line: #1f1513;
  --title: #f0c0ae;

  --bg: #4f1f1b;
  --surface: #3a2c2b;
  --surface-2: #4d3c3a;
  --field: #2d2221;
  --bar: #a9655b;
  --disc: #5e4a48;
  --ink: #f1d6cf;
  --ink-2: #d4b3ab;
  --ink-3: #9b7f79;
  --line: #1d1010;
  --accent: #d9a932;
  --danger: #a9453b;
  --on-dark: #f6e8e2;

  --tab-bg: #38282a;
  --tab-edge: #2f2123;
  --tab-text: #e6c6bd;
  --tab-on: #a9655b;
  --tab-on-edge: #3a1b17;
  --strip-bg: #4a3231;
  --strip-edge: #1d100f;
  --strip-in: #3a2625;
  --strip-text: #f3e6df;
  --btn-edge: #241614;
  --btn-in: #6f5957;
  --btn-primary: #a9655b;
  --btn-primary-edge: #3a1b17;
  --btn-primary-in: #8d4f47;
  --btn-danger-edge: #2a0f0c;
  --btn-danger-in: #7d2f28;
  --overlay: rgba(10, 6, 6, 0.66);
}

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

/* ---------- 画面：场景 → 篷布和边框 → 页面 ---------- */
.mt-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--olive);
}

.mt-scene,
.mt-stage3d,
.mt-decor,
.mt-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.mt-stage3d {
  background-color: var(--olive);
  overflow: hidden;
  touch-action: none;
}

.mt-gl {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* 3D 开不了或被中断时，写在舞台中间看得见的地方（篷布下面、笔托上面） */
.mt-note {
  position: absolute;
  left: calc(var(--bw) + var(--u) * 4);
  right: calc(var(--bw) + var(--u) * 4);
  top: calc(var(--awn) + var(--u) * 32);
  padding: calc(var(--u) * 3.4) calc(var(--u) * 4);
  border: calc(var(--u) * 0.5) solid var(--paper-line);
  border-radius: calc(var(--u) * 3);
  background-color: var(--paper);
  color: var(--ink);
  font-size: calc(var(--u) * 3.8);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.mt-decor {
  pointer-events: none;
}

.mt-page {
  pointer-events: none;
}

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

/* ---------- 标题牌与中 / EN（同一排）---------- */
.mt-head {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--signtop);
  height: var(--signh);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mt-sign {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 calc(var(--u) * 2.8);
}

.mt-sign-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: calc(var(--u) * 0.45) solid var(--paper-line);
  border-radius: calc(var(--u) * 2.6) calc(var(--u) * 3.2) calc(var(--u) * 2.4) calc(var(--u) * 3);
  background-color: var(--paper);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.9) var(--paper-edge);
  -webkit-transform: rotate(-0.8deg);
  transform: rotate(-0.8deg);
}

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

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

/* 中 / EN：右上角的扁小分段钮，平涂不带边。外框是装饰（高 --langh），按钮本身 44 高，上下多出来的是点击区。 */
.mt-lang {
  position: absolute;
  z-index: 2;
  top: calc(var(--langtop) - (44px - var(--langh)) / 2);
  right: calc(var(--bw) + var(--u) * 1.6);
  display: flex;
  height: 44px;
  pointer-events: auto;
}

.mt-lang-frame {
  position: absolute;
  left: 0;
  right: 0;
  top: calc((44px - var(--langh)) / 2);
  height: var(--langh);
  box-sizing: border-box;
  border-radius: calc(var(--langh) * 0.42);
  background: var(--paper);
  pointer-events: none;
}

.mt-lang-btn {
  position: relative;
  width: var(--langw);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--langh) * 0.5);
  font-weight: 900;
  line-height: 1;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.mt-lang-btn::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc((44px - var(--langh)) / 2);
  bottom: calc((44px - var(--langh)) / 2);
  border-radius: calc(var(--langh) * 0.42) 0 0 calc(var(--langh) * 0.42);
  background: transparent;
}

.mt-lang-btn + .mt-lang-btn::before {
  border-radius: 0 calc(var(--langh) * 0.42) calc(var(--langh) * 0.42) 0;
}

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

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

.mt-lang-text {
  position: relative;
}

/* ---------- 扁钮 ---------- */
/* 基础钮 44 × 30，动作钮 48 × 32：固定大小，不跟着屏幕放大；点按区用伪元素上下各扩到 44 以上。 */
.mt-round {
  position: relative;
  flex: none;
  display: block;
  width: var(--btnw);
  height: var(--btnh);
  border-radius: calc(var(--btnh) * 0.42);
  color: var(--ink);
  pointer-events: auto;
}

.mt-round.is-big {
  width: var(--actw);
  height: var(--acth);
}

.mt-round.is-wide {
  width: calc(var(--btnw) * 1.6);
}

/* 钮里的动画示意：一块小画布（小气球做这个动作），居中，不挡点击 */
.mt-round .mt-anim {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -11px 0 0 -18px;
  pointer-events: none;
}

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

.mt-round:disabled {
  cursor: default;
}

/* 基础五钮：贴在篷布下面，一排居中。 */
.mt-basics {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.mt-basics .mt-round + .mt-round {
  margin-left: var(--btngap);
}

/* 动作钮一列：贴左边，竖着排，排在基础五钮下面。 */
.mt-stack {
  position: absolute;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.mt-stack .mt-round + .mt-round {
  margin-top: var(--btngap);
}

.mt-stack-left {
  left: calc(var(--bw) + var(--u) * 2.4);
}

.mt-corner {
  position: absolute;
  bottom: calc(var(--band) + 6px);
  display: flex;
  pointer-events: none;
}

.mt-corner-left {
  left: calc(var(--bw) + var(--u) * 2.4);
}

.mt-stack-right {
  right: calc(var(--bw) + var(--u) * 2.4);
}

.mt-hist {
  display: flex;
  pointer-events: none;
}

.mt-hist .mt-round + .mt-round {
  margin-left: var(--btngap);
}

.mt-pair {
  margin: 0 auto;
}

/* ---------- 设计页：小标题条、画区、底边框里的操作钮 ---------- */
.mt-strip {
  position: absolute;
  left: 50%;
  width: calc(var(--u) * 30);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.mt-strip-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: calc(var(--u) * 0.45) solid var(--strip-edge);
  border-radius: calc(var(--u) * 2.4) calc(var(--u) * 2) calc(var(--u) * 2.2) calc(var(--u) * 2.6);
  background-color: var(--strip-bg);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.9) var(--strip-in);
}

.mt-strip-text {
  position: relative;
  max-width: 100%;
  padding: 0 calc(var(--u) * 3);
  font-size: calc(var(--u) * 4.4);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--strip-text);
  white-space: nowrap;
}

html[lang='en'] .mt-strip {
  width: calc(var(--u) * 31);
}

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

.mt-sheet {
  position: absolute;
  pointer-events: auto;
}

.ds-board {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  pointer-events: auto;
}

.ds-dock {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  pointer-events: auto;
}

.ds-dock .mt-seg.is-wide {
  width: 100%;
  height: 36px;
}

.ds-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  padding: 8px;
  border: var(--border-w) solid var(--strip-edge);
  border-top: 0;
  border-radius: 0 0 calc(var(--u) * 2.6) calc(var(--u) * 2.2);
  background: var(--surface);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.7) var(--surface-2);
}

.ds-panel > * + * {
  margin-top: 6px;
}

.ds-label {
  flex: none;
  margin-right: 8px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}

.ds-size {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
}

.ds-size.is-off {
  opacity: 0.4;
}

.ds-track {
  position: relative;
  flex: 1 1 auto;
  height: 16px;
  border: 2px solid var(--strip-edge);
  border-radius: 8px;
  background: var(--field);
  overflow: hidden;
}

.ds-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #c9473b;
}

.ds-knob {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  border: 2px solid var(--strip-edge);
  border-radius: 50%;
  background: var(--surface);
  pointer-events: none;
}

.ds-range {
  position: absolute;
  left: 0;
  top: -12px;
  width: 100%;
  height: 40px;
  margin: 0;
  opacity: 0;
}

.ds-check {
  position: absolute;
  z-index: 3;
}

.ds-corner {
  position: absolute;
}

.ds-panel .color-bar {
  width: 100%;
  min-width: 0;
}

.ds-panel .color-list {
  min-width: 0;
  overflow-x: auto;
}

.ds-panel .add-chip {
  flex: none;
}

.mt-seg {
  position: relative;
  flex: none;
  display: flex;
  width: calc(var(--btnw) * 2 + 4px);
  height: var(--btnh);
  pointer-events: auto;
}

.mt-seg.is-wide {
  width: 112px;
}

.mt-seg-btn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

.mt-seg-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  bottom: -7px;
}

.mt-bar {
  position: absolute;
  left: 50%;
  bottom: var(--traybottom);
  width: var(--trayw);
  height: var(--barh);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
}

.mt-bar-box {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.mt-bar-row {
  display: flex;
  align-items: center;
  height: var(--acth);
  pointer-events: none;
}

.mt-bar-top {
  justify-content: center;
}

.mt-bar-bottom {
  justify-content: space-between;
}

/* ---------- 笔托（底边框里，两个标签页）----------
   两行（竖屏、横屏一样）：第一行 画笔 | 动作 二分标签页 + 粗细条，第二行 笔格（横向滚动）+ 添加钮，或动作格。 */
.mt-tray {
  position: absolute;
  left: 50%;
  bottom: var(--traybottom);
  width: var(--trayw);
  height: var(--trayh);
  box-sizing: border-box;
  padding: 6px 8px 8px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: var(--tabrow) var(--cellh);
  grid-template-areas: 'tabs slot slot' 'panel panel add';
  grid-row-gap: 4px;
  grid-column-gap: 8px;
  align-items: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
}

.mt-tabs {
  grid-area: tabs;
  position: relative;
  display: flex;
  width: 120px;
  height: var(--btnh);
  border-radius: calc(var(--btnh) * 0.42);
  background: var(--tab-bg);
  pointer-events: none;
}

.mt-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: calc(var(--btnh) * 0.42);
  background: transparent;
  color: var(--tab-text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
}

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

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

.mt-panel {
  grid-area: panel;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--cellh);
  pointer-events: none;
}

.mt-pen {
  position: relative;
  flex: none;
  width: var(--penw, 34px);
  max-width: var(--cellw);
  height: var(--cellh);
  margin-right: 1.5px;
  pointer-events: auto;
}

/* 笔格这一排横向滚动：滚动条藏起来，最后一支笔露出一部分，提示还能往右滑 */
.mt-panel-pens {
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
  pointer-events: auto;
}

.mt-panel-pens::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.mt-tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 60px;
  height: var(--cellh);
  margin-right: calc(var(--u) * 1.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.mt-tile:last-child {
  margin-right: 0;
}

.mt-tile .mt-anim {
  position: relative;
  display: block;
  flex: none;
  margin-top: 2px;
}

.is-short .mt-tile .mt-anim {
  width: 32px !important;
  height: 25px !important;
  margin-top: 0;
}

.mt-tile-text {
  position: relative;
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--tab-text);
  white-space: nowrap;
}

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

.mt-tray .mt-add {
  grid-area: add;
  width: 36px;
  height: var(--btnh);
  pointer-events: auto;
}

.mt-slot {
  grid-area: slot;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
  pointer-events: none;
}

.mt-slider {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  max-width: calc(var(--u) * 52);
  pointer-events: auto;
}

.mt-tray[data-tab='pens'] .mt-panel-motion,
.mt-tray[data-tab='motion'] .mt-panel-pens,
.mt-tray[data-tab='motion'] .mt-slot-pens,
.mt-tray[data-tab='motion'] .mt-add {
  display: none;
}

.mt-tray[data-tab='motion'] .mt-panel-motion {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* ---------- 弹窗和提示条：同一套 ---------- */
.modal-overlay {
  background: var(--overlay);
}

.modal {
  border: calc(var(--u) * 0.6) solid var(--line);
  border-radius: calc(var(--u) * 2.4);
  background-color: var(--surface);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.9) var(--paper-edge);
}

/* 关闭：面板右上角里的一个小 ×（字 17px、视觉框 20px、距角 6px，无底色）；点击区用伪元素扩到 44 像素。 */
.modal-close {
  top: calc(6px - var(--u) * 0.6);
  right: calc(6px - var(--u) * 0.6);
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1;
}

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

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

/* 没有标题时：× 落在上边距里，不占内容的一行，也不给第一行内容留整块宽度。 */
.modal-untitled .modal-body {
  padding-top: 26px;
}

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

/* 确认类弹窗：问题一句居中，确认钮是居中的文字按钮（不撑满整行） */
.modal-untitled .modal-text {
  text-align: center;
}

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

.modal-foot .btn:only-child {
  flex: 0 1 auto;
  min-width: calc(var(--u) * 42);
  padding-left: calc(var(--u) * 4);
  padding-right: calc(var(--u) * 4);
}

.btn {
  border: 0;
  border-radius: calc(var(--u) * 2.2);
  background: var(--disc);
  color: var(--ink);
  box-shadow: none;
}

.btn-primary {
  background: var(--btn-primary);
  color: var(--on-dark);
  box-shadow: none;
}

.btn-danger {
  background: var(--danger);
  color: #f8ecea;
  box-shadow: none;
}

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

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

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

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

/* iOS（js/shell/boilBake.js 加 kk-baked-boil）：画布件的抖动已经烤进画布（每个相位一张位移后的图），烤过的元素（kk-baked）不再挂滤镜；
   SVG 滤镜在 iOS 上由 CPU 算，31 个元素叠在每帧重画的 3D 画布上，打气涂鸦页一帧 100 多毫秒。
   设计页画区的底交给 iosCanvasBoil.js 的 GPU 副本，原画布也不挂滤镜。钮里的字（动作格的小字）是页面文字，单独挂。
   标题牌、标题字、中 / EN、弹窗没有画布，仍挂滤镜（面积小）。 */
.is-boiling.kk-baked-boil .boil.kk-baked,
.is-boiling.kk-baked-boil canvas[data-kk-boil-filter],
.is-boiling.kk-baked-boil .boil-soft,
.is-boiling.kk-baked-boil .mt-sign-bg,
.is-boiling.kk-baked-boil .mt-strip-bg {
  -webkit-filter: none;
  filter: none;
}

/* 没有画布的页面元素（标题牌、标题字、中 / EN、设计页的小标题条、动作格的小字）：每个相位一个很小的整块位移加转角，
   boilBake.js 写在 --kk-j 上；标题牌自带的 -0.8 度斜放保留。 */
.is-boiling.kk-baked-boil .mt-sign-bg {
  -webkit-transform: var(--kk-j, translate(0, 0)) rotate(-0.8deg);
  transform: var(--kk-j, translate(0, 0)) rotate(-0.8deg);
  will-change: transform;
}

.is-boiling.kk-baked-boil .mt-title,
.is-boiling.kk-baked-boil .mt-lang,
.is-boiling.kk-baked-boil .mt-strip-bg,
.is-boiling.kk-baked-boil .mt-strip-text,
.is-boiling.kk-baked-boil .mt-tile-text {
  -webkit-transform: var(--kk-j, translate(0, 0));
  transform: var(--kk-j, translate(0, 0));
  will-change: transform;
}
/* 摆放图片时贴在图角上的钮：左上 ✓、右上 ×、右下旋转缩放；圆钮 30，点按区向外多 8。 */
.mt-knob {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--btn-edge);
  border-radius: 50%;
  background: var(--btn-in);
  color: var(--ink);
  touch-action: none;
  pointer-events: auto;
}

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

.mt-knob .icon,
.mt-knob .icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.mt-knob-ok {
  border-color: var(--btn-primary-edge);
  background: var(--btn-primary);
  color: var(--on-dark);
}

/* ---------- 色盘气泡、设计页的颜色条：和整体一样的手剪边（不齐的圆角 + 深色细边 + 里面一圈浅边），颜色全走主题变量 ---------- */
.popover {
  border: calc(var(--u) * 0.45) solid var(--strip-edge);
  border-radius: calc(var(--u) * 2.6) calc(var(--u) * 2.2) calc(var(--u) * 2.8) calc(var(--u) * 2.2);
  background: var(--surface);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.8) var(--surface-2);
}

.popover-grip span {
  background: var(--strip-edge);
}

.cp-bubble-title {
  margin-bottom: var(--gap-2);
  color: var(--title);
  font-size: calc(var(--u) * 3.8);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.cp-bubble-foot {
  display: flex;
  justify-content: center;
  margin-top: var(--gap-3);
}

.cp-bubble-foot .btn {
  min-width: calc(var(--u) * 30);
  min-height: var(--touch);
}

.cp-tab,
.cp-clear {
  border: calc(var(--u) * 0.4) solid var(--btn-edge);
  border-radius: calc(var(--u) * 2.2) calc(var(--u) * 1.8) calc(var(--u) * 2.4) calc(var(--u) * 2);
  background: var(--tab-bg);
  color: var(--tab-text);
}

.cp-tab.is-on {
  border-color: var(--tab-on-edge);
  background: var(--tab-on);
  color: var(--on-dark);
}

.cp-swatch,
.cp-preview,
.color-chip {
  border-color: var(--strip-edge);
}

.cp-swatch.is-selected,
.color-chip.is-on {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--strip-edge);
}

.chip {
  border: calc(var(--u) * 0.4) solid var(--btn-edge);
  border-radius: calc(var(--u) * 2.2) calc(var(--u) * 1.8) calc(var(--u) * 2.4) calc(var(--u) * 2);
  background: var(--tab-bg);
  color: var(--tab-text);
}

.chip.is-on {
  border-color: var(--tab-on-edge);
  background: var(--tab-on);
  color: var(--on-dark);
}

/* 视角工具条：悬着的一条竖窗，把手在上，移动 / 平转 / 自由旋转三个图标钮；fixed 定位，可以拖到屏幕上任何位置。
   .mt-page 自己不接指针，条要单独打开 pointer-events，否则点按会落到下面的 3D 画布上。 */
.mt-tools {
  position: fixed;
  pointer-events: auto;
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  width: 44px;
  border: 2px solid var(--strip-edge);
  border-radius: calc(var(--u) * 2.6);
  background: var(--strip-bg);
  color: var(--strip-text);
  overflow: hidden;
}

.mt-tools-grip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 16px;
  background: var(--strip-in);
  touch-action: none;
  cursor: grab;
}

.mt-tools-grip span {
  width: 14px;
  height: 2px;
  margin-top: 2px;
  border-radius: 1px;
  background: var(--strip-text);
}

.mt-tools-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--strip-edge);
  background: transparent;
  color: var(--strip-text);
  touch-action: manipulation;
}

.mt-tools-btn .icon,
.mt-tools-btn .icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

.mt-tools-text {
  display: block;
  max-width: 100%;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.mt-tools-btn[aria-pressed='true'] {
  background: var(--tab-on);
  box-shadow: inset 0 0 0 2px var(--on-dark);
}