* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ===== 设计令牌（Design Tokens）：现代化靛蓝/紫罗兰配色，变量驱动明暗双主题 ===== */
:root {
  /* —— 主色：靛蓝 → 紫罗兰，更现代柔和 —— */
  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --accent-soft: #eef2ff;
  --accent-glow: rgba(99, 102, 241, 0.35);
  --accent-ring: rgba(99, 102, 241, 0.20);
  --accent-2: #8b5cf6;                  /* 紫罗兰辅色，用于渐变收尾 */

  /* —— 渐变：按钮 / 标题 / 滑块统一复用 —— */
  --gradient-accent: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --gradient-accent-soft: linear-gradient(180deg, #818cf8 0%, #6366f1 100%);
  --gradient-title: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);

  /* —— 表面分层：HCDRAW 极简纯白风格 —— */
  --bg: #ffffff;                        /* 画布外层纯白（HCDRAW 风格） */
  --surface-glass: #ffffff;             /* 纯白不磨砂 */
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f4f4f5;
  --surface-elev: #ffffff;              /* 浮起面板 */

  /* —— 边框：极细灰，轻盈 */
  --border: #e5e5e5;
  --border-strong: #d4d4d4;
  --border-soft: #f3f4f6;

  /* —— 文字层级：深色为主（HCDRAW）—— */
  --text-1: #1b1b1f;                    /* HCDRAW 深灰黑 */
  --text-2: #52525b;
  --text-3: #a1a1aa;

  /* —— 圆角体系：HCDRAW 统一 8px 小方角 —— */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-card: 8px;                   /* HCDRAW 小方角 */
  --radius-pill: 8px;                   /* 非胶囊，小方角 */

  /* —— 阴影：HCDRAW 软浮起（多层软阴影，无主色微染）—— */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-3: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.08);
  --shadow-elev: 0 16px 40px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.06);

  /* —— HCDRAW 胶囊卡片：顶部工具栏专用 —— */
  --card-bg: #ffffff;                   /* 纯白不透明 */
  --card-bg-solid: #ffffff;
  --card-border: transparent;           /* 无线框 */
  --card-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --card-shadow-hover: 0 4px 10px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.08);
  --card-inset: none;                   /* 无内高光 */
  --module-gap: 2px;                    /* 组内超紧凑（HCDRAW 按钮间距） */

  /* —— 选中态：浅紫/浅靛背景（HCDRAW ToolIcon--checked）—— */
  --selected-bg: rgba(100, 126, 234, 0.18);
  --selected-fg: #5e6ad2;

  /* —— 焦点环 —— */
  --ring: 0 0 0 2px var(--accent-ring);

  /* —— 间距系统：基准 4px —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;

  /* —— 过渡曲线：快出（HCDRAW 灵动）—— */
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== 暗黑主题：HCDRAW 暗黑覆盖变量 ===== */
body.dark-theme {
  --accent: #6366f1;
  --accent-strong: #818cf8;
  --accent-soft: #1e1b4b;
  --accent-glow: rgba(129, 140, 248, 0.40);
  --accent-ring: rgba(129, 140, 248, 0.30);
  --accent-2: #a78bfa;

  --bg: #1e1e21;                        /* HCDRAW 暗黑板 */
  --surface-glass: #2a2a2f;
  --surface: #2a2a2f;
  --surface-2: #33333a;
  --surface-3: #3c3c43;
  --surface-elev: #2a2a2f;

  --border: #3a3a40;
  --border-strong: #4a4a52;
  --border-soft: #33333a;

  --text-1: #e8e8ea;
  --text-2: #b0b0b8;
  --text-3: #6b6b73;

  --card-bg: #2a2a2f;
  --card-bg-solid: #2a2a2f;
  --card-border: transparent;
  --card-shadow: 0 2px 6px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.30);
  --card-shadow-hover: 0 4px 10px rgba(0,0,0,0.25), 0 12px 32px rgba(0,0,0,0.35);
  --card-inset: none;

  --selected-bg: rgba(129, 140, 248, 0.28);
  --selected-fg: #a5b4fc;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.40);
  --shadow-3: 0 4px 12px rgba(0,0,0,0.40), 0 16px 40px rgba(0,0,0,0.45);
  --shadow-elev: 0 16px 40px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.40);

  /* —— 兼容遗留变量名：画布右键菜单(.ctx-menu) / 元素属性胶囊(.hc-prop-*) 早期直接以
        --text-color / --hover-bg / --active-bg / --border-color 取色。暗黑下若缺失将
        落入浅色兜底（深底浅字/浅底浅字）导致看不清，故在此统一映射到暗黑令牌。 —— */
  --text-color: var(--text-1);
  --hover-bg: #33333a;                 /* = surface-2，比卡片略亮的分隔感 */
  --active-bg: rgba(129, 140, 248, 0.28);
  --border-color: #4a4a52;             /* = border-strong，暗底上轮廓清晰 */
}

html, body {
  width: 100%;
  height: 100%;
  /* 移动端 dynamic viewport height，避免手机地址栏收起/弹出造成画布抖动 */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  background: var(--bg);
}

.logo {
  display: none;
}
.logo-svg {
  width: 30px;
  height: 30px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(99,102,241,0.35));
}
.logo-text {
  font-size: 14px;
  background: linear-gradient(90deg, #6366f1, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ===== HCDRAW 风格：原 .toolbar 隐藏（内容由 JS 移动到 HCDRAW 容器） ===== */
.toolbar {
  display: none;                        /* 桌面端隐藏；移动端独立控制 */
  visibility: hidden;
}
.toolbar-row,
.toolbar-group,
.grp-sep { display: none; }
#showToolbarBtn, #toolbarCurtainBtn { display: none !important; }

/* ===== HCDRAW 风格：顶部居中白胶囊工具栏 ===== */
.ex-topwrap {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0;                           /* 组内无间隙，组间 4px 由 .ex-group 控制 */
  padding: 4px;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  max-width: calc(100% - 24px);
}
/* 顶部胶囊内的工具 group：HCDRAW 分组视觉（4px 小格线） */
.ex-topwrap .ex-group {
  display: inline-flex;
  align-items: center;
  gap: var(--module-gap);
  padding: 0 2px;
  position: relative;
}
.ex-topwrap .ex-group + .ex-group::before {
  content: '';
  position: absolute;
  left: -2px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--border-soft);
}
/* 胶囊内菜单/按钮：统一 HCDRAW 扁平方块 */
.ex-topwrap .btn,
.ex-topwrap .menu-item > .btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: var(--text-1);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
  position: relative;
}
.ex-topwrap .btn:hover,
.ex-topwrap .menu-item:hover > .btn { background: var(--border-soft); }
.ex-topwrap .btn:active,
.ex-topwrap .menu-item:active > .btn { background: var(--selected-bg); color: var(--selected-fg); transform: scale(0.96); }
/* 选中态：.menu-open / .menu-sticky / hover 时浅紫背景 */
.ex-topwrap .menu-item.menu-open > .btn,
.ex-topwrap .menu-item.menu-sticky > .btn {
  background: var(--selected-bg);
  color: var(--selected-fg);
}
/* 常驻生效高亮（tool-sel）：在笔刷/工具/背景下拉中选定了某一项后，即使菜单已收回，
   一级按钮仍以浅蓝背景高亮标注"该栏目当前生效"，点击同一浅蓝 = 与展开时视觉一致（同 selected-bg） */
.ex-topwrap .menu-item > .btn.tool-sel {
  background: var(--selected-bg);
  color: var(--selected-fg);
}
/* 胶囊内图标：居中 */
.ex-topwrap .btn svg,
.ex-topwrap .menu-item > .btn svg {
  width: 18px; height: 18px;
  margin: 0;
}
.ex-topwrap .btn .menu-label { display: none; }  /* 顶部纯图标，不显示文字 */
.ex-topwrap .menu-item > .btn::after { display: none; }  /* 去掉下拉箭头 */

/* 胶囊内颜色块：小圆形 */
.ex-topwrap #penColorLabel { padding: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.ex-topwrap #penColor { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-strong); box-shadow: none; }
.ex-topwrap #penColor::-webkit-color-swatch { border: 0; border-radius: 50%; }

/* 胶囊内 select：变图标按钮样式 */
.ex-topwrap select {
  height: 36px;
  min-width: 60px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--text-1);
  border-radius: var(--radius-md);
  font-size: 13px;
  outline: none;
}
.ex-topwrap select:hover { background: var(--border-soft); }

/* 胶囊内 input range：极细，贴合背景 */
.ex-topwrap input[type="range"] { width: 92px; height: 36px; accent-color: var(--selected-fg); }
.ex-topwrap .size-opacity-group {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 4px; border: 0; background: transparent; box-shadow: none; border-radius: 0;
}
.ex-topwrap .size-opacity-group .menu-label { display: none; }

/* 胶囊内橡皮擦滑块：简化为按钮（三合一），外框高度 38、长度 110（加宽以让「画笔/橡皮擦」居中不被滑块遮挡） */
.ex-topwrap .multi-slide-container {
  min-width: 110px;
  width: 110px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--border-soft);
  box-shadow: none;
  border: 0;
  padding: 0 8px;
  box-sizing: border-box;
}
.ex-topwrap .multi-slide-container .slide-knob {
  width: 28px; height: 28px;
}
.ex-topwrap .multi-slide-container .slide-knob > svg {
  width: 18px; height: 18px;
}
.ex-topwrap .multi-slide-container .status-text {
  font-size: 11px;
}

/* 胶囊内分隔 */
.ex-topwrap .grp-sep {
  display: inline-flex;
  width: 1px; height: 24px;
  background: var(--border-soft);
  align-self: center;
  margin: 0 2px;
}

/* ===== HCDRAW 风格：左侧竖排工具图标带（按用户需求已移除，默认不显示） ===== */
.ex-leftbar { display: none !important; }

/* ===== 二级视图栏（白胶囊正下方）：viewMenu + zoomControls 独立一行 ===== */
.ex-subbar {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 40px);
  width: auto;
  padding: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  z-index: 11;
}

/* 坐标栏：底部居中（不占 toolbar） */
.coord-bar {
  position: fixed;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 10px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--text-3);
  font-size: 11px;
  gap: 10px;
  z-index: 5;
}

/* ===== 底部居中主工具栏（ex-bottombar，ex-group 下放位置） ===== */
.ex-bottombar {
  position: fixed !important;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: calc(100% - 40px) !important;
  width: auto !important;
  padding: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  z-index: 12;
  flex-wrap: nowrap;
  justify-content: center;
}
.ex-bottombar .ex-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px;
  position: relative;
}
.ex-bottombar .ex-group + .ex-group::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border);
  opacity: 0.8;
}
/* 底栏按钮 */
.ex-bottombar .btn,
.ex-bottombar .menu-item > .btn {
  width: 36px; height: 36px;
  min-width: 36px; min-height: 36px;
  padding: 0;
  border-radius: var(--radius-md);
  background: transparent;
  border: 0;
  color: var(--text-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  gap: 0;
  font-size: 0;
}
.ex-bottombar .btn:hover { background: var(--border-soft); }
.ex-bottombar .btn:active,
.ex-bottombar .btn.active,
.ex-bottombar .menu-item.menu-open > .btn {
  background: var(--selected-bg);
  color: var(--selected-fg);
}
.ex-bottombar .btn svg,
.ex-bottombar .menu-item > .btn svg,
.ex-bottombar .submenu-icon { width: 18px; height: 18px; margin: 0; display: initial; }
.ex-bottombar .btn .menu-label { display: none; }
.ex-bottombar .menu-item > .btn::after { display: none; }
/* 颜色块 24px */
.ex-bottombar #penColorLabel {
  width: 36px; height: 36px; padding: 0;
}
.ex-bottombar #penColor {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
}
/* range 92px */
.ex-bottombar input[type="range"] { width: 92px; }
/* 橡皮擦 multi-slide 外框 110×38 限制（加宽以让「画笔/橡皮擦」居中不被滑块遮挡） */
.ex-bottombar .multi-slide-container {
  min-width: 110px;
  width: 110px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--border-soft);
  box-shadow: none;
  border: 0;
  padding: 0 8px;
  box-sizing: border-box;
}
.ex-bottombar .multi-slide-container .slide-knob {
  width: 28px; height: 28px;
}
.ex-bottombar .multi-slide-container .slide-knob > svg {
  width: 18px; height: 18px;
}
.ex-bottombar .multi-slide-container .status-text {
  font-size: 11px;
}
.ex-bottombar .size-opacity-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  min-width: 184px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.ex-bottombar .zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
}
.ex-bottombar .zoom-controls .btn {
  min-width: 30px; width: 30px; height: 30px;
  font-size: 13px; font-weight: 700;
}
.ex-bottombar .zoom-controls .btn .menu-label { display: none; } /* 纯图标按钮：任何情况下都不显示文字标签 */
/* ex-bottombar 子菜单方向：从底栏上方弹出（避免被屏幕下边缘裁掉，因为在底部） */
/* 距离与顶栏弹窗一致：.menu-item 有 8px hover 安全区 padding-bottom，bottom 从 padding-box 底缘起算会抵消它，
   顶栏 top:calc(100%+6px) 实际距胶囊边缘 10px，这里需 6px+8px=14px 才能对齐同样的 10px 视觉距离 */
.ex-bottombar .menu-item .submenu {
  top: auto;
  bottom: calc(100% + 14px);
  left: 0;
  right: auto;
}
/* —— 三点折叠按钮：在 zoom-controls（重置 SVG 图标）之后，默认显示 —— */
.ex-bottombar .ex-more-toggle {
  width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  padding: 0; border: 0; background: transparent; color: var(--text-1);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--radius-md);
  transition: background 0.12s ease, transform 0.1s ease;
}
.ex-bottombar .ex-more-toggle:hover { background: var(--border-soft); }
.ex-bottombar .ex-more-toggle:active { transform: scale(0.96); background: var(--selected-bg); color: var(--selected-fg); }
.ex-bottombar .ex-more-toggle svg { width: 18px; height: 18px; margin: 0; }
/* 隐藏分组：默认 display:none；ex-bottombar 加 .ex-more-open 后才显示 */
.ex-bottombar .ex-more-group { display: none !important; }
.ex-bottombar.ex-more-open .ex-more-group { display: inline-flex !important; }
/* 展开态：三点按钮高亮（与 .menu-open 风格一致） */
.ex-bottombar.ex-more-open .ex-more-toggle { background: var(--selected-bg); color: var(--selected-fg); }
/* 三点按钮左侧分隔小竖线 */
.ex-bottombar .ex-more-toggle::before {
  content: ''; display: inline-block; width: 1px; height: 20px;
  background: var(--border-soft); margin-right: 2px; vertical-align: middle;
}
/* 背景栏目与缩放控件之间不再显示分隔竖线（背景前保留 ex-group 相邻分隔线即可）*/

/* ===== HCDRAW 风格：子菜单默认样式（顶部胶囊和左侧通用） ===== */
.menu-item .submenu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--card-bg);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow-hover);
  z-index: 9999;
  padding: 6px;
  max-height: 72vh;
  overflow-y: auto;
  transform-origin: top left;
  animation: submenuIn 140ms var(--ease-out);
}
.menu-item:hover > .submenu,
.menu-item.menu-open > .submenu,
.menu-item.menu-sticky > .submenu { display: block; }
/* 桌面端单列下拉（项目 / 视图 / 扩展，即 submenu-mgrid 与强制单列的项目菜单）：
   展开时按 flex 单列排布并留 2px 行距，与「更多」双排菜单的白色间距一致。
   原因：原先 display:block 下 .btn 是 inline 级元素，行与行间距为 0（实测 0.0px），
   底色调深后相邻按钮贴死 → 看上去像叠在一起、分不清是几个按钮。 */
.menu-item:hover > .submenu:not(.submenu-grid):not(.submenu-2col):not(.submenu-cols),
.menu-item.menu-open > .submenu:not(.submenu-grid):not(.submenu-2col):not(.submenu-cols),
.menu-item.menu-sticky > .submenu:not(.submenu-grid):not(.submenu-2col):not(.submenu-cols) {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* HCDRAW 子菜单按钮：默认浅灰底（--surface-3 = #f4f4f5 / 深色 #3c3c43），比 --surface-2 明显一档；
   按下为 --accent-soft 高亮、当前选中项（.active）为 --selected-bg 高亮 */
.menu-item .submenu .btn {
  background: var(--surface-3);
  border: 0;
  box-shadow: none;
  border-radius: 6px;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--text-1);
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}
.menu-item .submenu .btn:hover { background: var(--border-soft); }
.menu-item .submenu .btn:active { background: var(--selected-bg); color: var(--selected-fg); }
.menu-item .submenu svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* 需求3：强制所有二级子菜单项（.submenu 内 .btn）按 SVG图标+文字 并排显示，禁止被其它 CSS 隐藏或变成纯图标 */
.menu-item .submenu .btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  min-width: auto !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  text-align: left !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
.menu-item .submenu .btn .menu-label {
  display: inline-block !important;
  color: var(--text-1, #111) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  overflow: visible !important;
}
/* 菜单/功能项右侧快捷键提示：追加在菜单文字后、靠右显示（JS 按快捷键总表同步注入，语言切换不受影响） */
.menu-kbd {
  margin-left: auto;
  flex: 0 0 auto;
  padding-left: 14px;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .3px;
  white-space: nowrap;
  color: var(--text-2, #666);
  opacity: .75;
}
body.dark-theme .menu-kbd { color: var(--text-2, #9aa4b2); }
/* —— 移动端 / APK：菜单文字后的快捷键字母「默认不显示」——
   触屏设备没有物理键盘，字母提示无操作意义且占用宽度（APK 下菜单文字本身已隐藏，只剩字母更显突兀）。
   快捷键仍完整保留在「快捷键总表」（<kbd> 键帽行）与元素 title 悬浮提示中，桌面端不受影响。
   如确需在触屏端显示，给 body 加类 show-menu-kbd 即可覆盖本规则。 */
@media (max-width: 768px) {
  body:not(.show-menu-kbd) .menu-kbd { display: none !important; }
}
body.apk:not(.show-menu-kbd) .menu-kbd,
body.apk-kiosk-ui:not(.show-menu-kbd) .menu-kbd { display: none !important; }
.menu-item .submenu .btn .submenu-icon,
.menu-item .submenu .btn svg,
.menu-item .submenu .btn .menu-top-icon {
  display: inline-flex !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin-right: 0 !important;
  color: var(--text-1, #111) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* HCDRAW .menu-item：容器无框 */
.menu-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* ===== HCDRAW 风格：通用 .btn 扁平无框 ===== */
.btn {
  height: 34px;
  min-height: 34px;
  min-width: 34px;
  padding: 0 12px;
  touch-action: manipulation; /* 消除触屏 300ms/双击缩放延迟：快速二次点击(如点开菜单后立即点子项)不被吞成双击 */
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--border-soft); }
.btn:active { background: var(--selected-bg); color: var(--selected-fg); transform: scale(0.96); }
.btn .submenu-icon { width: 16px; height: 16px; margin-right: 4px; flex: 0 0 16px; }
.btn .menu-label { display: inline; }
/* 按钮内的 SVG/图标把鼠标事件让给父级按钮：保证悬浮 SVG 区域也会显示按钮的 title 工具提示 */
.btn svg,
.btn .submenu-icon { pointer-events: none; }
/* 弹窗内 btn 有 label 时允许文字 + 图标；focus 环 */
.btn:focus-visible { box-shadow: var(--ring); outline: none; }
/* 暗黑主题：统一扁平覆盖旧渐变 hover */
body.dark-theme .btn:hover:not(:disabled) {
  background-image: none;
  background: var(--border-soft);
  border-color: transparent;
  color: var(--text-1);
  box-shadow: none;
}
body.dark-theme .btn:active { background: var(--selected-bg); color: var(--selected-fg); }
/* 组内独立分隔竖线（已由 HCDRAW 分组竖线替代，隐藏） */
.toolbar-group .grp-sep { display: none; }
/* 单元素卡片：隐藏（HCDRAW 扁平无卡片） */
.toolbar-group:has(> *:only-child) { display: none; }

/* 线宽 + 透明组（HCDRAW 扁平：去框去阴影，小而紧凑） */
.size-opacity-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  height: 36px;
  min-height: 36px;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.size-opacity-group .opacity-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 0;
}
.size-opacity-group > label {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  align-items: center;
}
.size-opacity-group label {
  font-size: 12px;
  gap: 0;
}
#penSizeLabel, #brushOpacityLabel {
  height: 18px;
  min-height: 18px;
  flex: 0 0 auto;
  box-sizing: border-box;
  display: none;  /* HCDRAW 紧凑扁平：不显示线宽/透明文字 */
}
.size-opacity-group .submenu-icon { margin-right: 0; display: none; }
.toolbar .size-opacity-group label { gap: 0; }
.size-opacity-group input[type="range"] {
  width: 64px;
}

/* ===== 浮动面板（软键盘/计算器） ===== */
.float-panel {
  position: fixed;
  top: 90px;
  right: 24px;
  z-index: 900;
  background: var(--card-bg-solid);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-inset), var(--shadow-elev);
  padding: 12px;
  width: 320px;
  user-select: none;
}
.float-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  padding: 2px 4px 8px;
  cursor: move;
}
.float-panel-close {
  cursor: pointer;
  color: #999;
  font-size: 18px;
  line-height: 1;
}
.float-panel-close:hover { color: #ff4d4f; }

/* ===== 倒计时器面板 ===== */
#countdownDisplay {
  font-size: 44px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text-1, #111827);
  letter-spacing: 2px;
  margin: 6px 0 10px;
}
#countdownDisplay.countdown-danger { color: #ef4444; animation: countdownPulse 1s infinite; }
@keyframes countdownPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
#countdownControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-2, #374151);
}
#countdownControls input[type="number"] {
  width: 56px;
  height: 32px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
}
#countdownControls input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
#countdownKeys {
  display: flex;
  gap: 8px;
  justify-content: center;
}
#countdownKeys .btn { min-width: 88px; }

/* ===== 智能点名面板（居中弹窗，宽度由 .sig-dialog 内联控制） ===== */
#rollcallDisplay {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: break-all;
  padding: 10px;
  font-size: 38px;
  font-weight: 700;
  color: #111827;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border-radius: 12px;
  margin-bottom: 6px;
  user-select: none;
}
#rollcallDisplay.rolling { animation: rollcallPulse 0.12s infinite ease-in-out; color: #4f46e5; }
#rollcallDisplay.winner { animation: rollcallPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; color: #dc2626; }
@keyframes rollcallPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}
@keyframes rollcallPop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
#rollcallStatus { text-align: center; font-size: 14px; color: #6b7280; margin-bottom: 10px; }
#rollcallKeys { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
#rollcallKeys .btn { min-width: 96px; }
#rollcallKeys .btn.danger { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
#rollcallOpts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 14px;
  color: #374151;
  margin-bottom: 10px;
}
#rollcallOpts label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
#rollcallOpts input[type="checkbox"] { accent-color: #3b82f6; }
#rollcallSpeed {
  width: 52px;
  height: 32px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
}
#rollcallSpeed:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.rollcall-section { border-top: 1px solid #f3f4f6; padding-top: 8px; margin-bottom: 8px; }
.rollcall-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
.rollcall-section-title .tools { display: flex; gap: 10px; font-weight: 400; }
.rollcall-section-title .tools a { color: #6b7280; cursor: pointer; }
.rollcall-section-title .tools a:hover { color: #3b82f6; }
.rollcall-section-title .tools a.clear { color: #ef4444; }
#rollcallAddRow { display: flex; gap: 6px; margin-bottom: 8px; }
#rollcallNameInput {
  flex: 1;
  height: 32px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
}
#rollcallNameInput:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
/* 输入框收窄（不再独占整行余量），把更多宽度留给后面的「添加姓名」按钮，便于点按 */
#rollcallAddBtn { min-width: 68px !important; padding: 0 10px !important; font-size: 12px; }
#rollcallNameList {
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 8px;
}
.rollcall-name-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 14px;
  color: #1f2937;
}
.rollcall-name-item:hover { background: #f9fafb; }
.rollcall-name-item .rm { color: #d1d5db; cursor: pointer; font-size: 14px; visibility: hidden; padding: 0 4px; }
.rollcall-name-item:hover .rm { visibility: visible; color: #ef4444; }
#rollcallHistory { max-height: 92px; overflow-y: auto; }
.rollcall-hist-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 4px 6px;
  border-bottom: 1px dashed #f3f4f6;
}
.rollcall-hist-item b { color: #111827; font-weight: 600; }
.rollcall-hist-item span { color: #9ca3af; font-family: monospace; }
#rollcallFileInput { display: none; }

/* ===== 多人协作面板（居中弹窗，宽度由 .sig-dialog 内联控制） =====
   行结构：昵称行 / 房间行各自单独一行；每行 = 文字标签(昵称：/房间：) + 输入框 + 「确认」按钮；
   「加入 / 断开」两个操作按钮单独一行；宽屏不再左右双栏并排 */
#collabUserRow, #collabRoomRow { display: flex; align-items: center; gap: 7px; margin: 0; }
#collabUserRow { margin-bottom: 8px; }
#collabRoomRow { margin-bottom: 6px; }
#collabActionRow { display: flex; gap: 7px; margin: 0 0 8px; }
#collabActionRow .btn { flex: 1 1 auto; }
.collab-row-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text, #1f2937);
  user-select: none;
}
.collab-row-label svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin: 0;
}
body.dark-theme .collab-row-label { color: var(--text-1, #f1f5f9); }
#collabUserRow input, #collabRoomRow input {
  flex: 1 1 128px;
  min-width: 0;
  height: 36px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 15px;
  background: #fff;
  color: inherit;
  box-sizing: border-box;
}
#collabRoom { text-transform: uppercase; }
#collabUserRow input:focus, #collabRoom:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
#collabRoom:disabled { background: #f9fafb; }
#collabUserRow .btn, #collabRoomRow .btn {
  flex: 0 0 auto;
  min-width: 66px;
  height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}
#collabNameOkBtn, #collabRoomOkBtn { min-width: 66px; }
#collabJoinBtn, #collabLeaveBtn { min-width: 96px; height: 36px; }
#collabStatus { font-size: 13px; color: #6b7280; margin: 2px 0 5px; }
#collabPeers {
  font-size: 13px;
  color: #374151;
  background: #f9fafb;
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 8px;
  word-break: break-all;
  overflow-wrap: anywhere;
}
#collabTip { font-size: 13px; color: #9ca3af; line-height: 1.7; }
#collabPanel .sig-dialog-body {
  display: flex;
  flex-direction: column;
  max-height: min(74vh, 620px);
  overflow-y: auto;
}
/* 极窄屏：文字标签换到行首上方独占一行，输入框+确认按钮自然换到下一行，避免挤压 */
@media (max-width: 400px) {
  #collabUserRow, #collabRoomRow { flex-wrap: wrap; row-gap: 4px; }
  .collab-row-label { flex-basis: 100%; }
}

/* ===== 云端存储面板（OneDrive，居中弹窗，宽度由 .sig-dialog 内联控制） ===== */
#cloudCidRow { display: flex; gap: 6px; margin-bottom: 8px; }
#cloudClientId {
  flex: 1;
  height: 32px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 8px;
  font-size: 14px;
  font-family: monospace;
}
#cloudClientId:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
#cloudStatus { font-size: 14px; color: #6b7280; margin-bottom: 8px; word-break: break-all; }
#cloudKeys { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
#cloudKeys .btn { flex: 1 1 40%; }
#cloudList {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 8px;
}
.cloud-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 6px;
  border-bottom: 1px dashed #f3f4f6;
  font-size: 14px;
}
.cloud-name { color: #1f2937; word-break: break-all; flex: 1; }
.cloud-ops { white-space: nowrap; }
.cloud-ops a { margin-left: 8px; cursor: pointer; color: #3b82f6; }
#cloudTip { font-size: 14px; color: #9ca3af; line-height: 1.7; }

#softKeyboardInput {
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
  margin-bottom: 8px;
  background: #fff;
  color: #111827;
  outline: none;
}
#softKeyboardInput:focus { border-color: var(--accent); box-shadow: var(--ring); }
#softKeyboardKeys {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
#softKeyboardKeys button {
  height: 34px;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  font-size: 14px;
  border-radius: 6px;
}
#softKeyboardKeys button.wide { grid-column: span 2; }
#softKeyboardKeys button.space { grid-column: span 4; }
#softKeyboardKeys button.full { grid-column: 1 / -1; }

#calcDisplay {
  height: 44px;
  background: #1f2937;
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
  overflow: hidden;
  white-space: nowrap;
}
#calcKeys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
#calcKeys button {
  height: 42px;
  min-height: 42px;
  min-width: 0;
  padding: 0;
  font-size: 16px;
  border-radius: 8px;
}
#calcKeys button.op { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
#calcKeys button.eq { background: var(--accent); border-color: var(--accent-strong); color: #fff; }

/* ===== 聚光灯 ===== */
#spotlightLayer {
  position: fixed;
  inset: 0;
  z-index: 930;
  cursor: none;
  background: radial-gradient(circle 160px at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.90) 100%);
}

/* ===== 拉幕布 ===== */
#curtainLayer {
  position: fixed;
  inset: 0;
  z-index: 935;
  overflow: hidden;
  cursor: ns-resize;
}
#curtainCloth {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(180deg, #1e293b 0%, #334155 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
#curtainTip {
  /* R12+ 拉幕布把手：仅显示「向上拉」图标，贴近屏幕最下沿，避免压住/遮挡底部胶囊工具栏 */
  position: absolute;
  bottom: max(2px, env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  color: #fff;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  pointer-events: none;
}
#curtainTip svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ===== 放大镜 ===== */
#magnifierLens {
  position: fixed;
  z-index: 940;
  border-radius: 50%;
  border: 3px solid var(--accent);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 0 2px #fff inset;
  pointer-events: none;
  background: #fff;
}

/* ===== 屏幕批注层 ===== */
#annotateLayer {
  position: fixed;
  inset: 0;
  z-index: 960;
  background: transparent;
  pointer-events: none; /* R9：视觉透明：仅批注画布接受画笔；其余区域透传 → 但浏览器仍不能透到桌面，需 EXE 桌面版实现真穿透 */
}
#annotateLayer #annotateCanvas,
#annotateLayer #annotateBar,
#annotateLayer .annot-hint {
  pointer-events: auto;
}
.annot-hint {
  position: fixed;
  /* 显示在底部胶囊工具栏（ex-bottombar，bottom 40px + 高约 46px）上方，避免打开时被遮挡 */
  bottom: max(96px, calc(96px + env(safe-area-inset-bottom, 0px)));
  left: 50%;
  transform: translateX(-50%);
  z-index: 970;
  padding: 10px 16px 12px;
  font-size: 14px;
  line-height: 1.55;
  background: rgba(255, 80, 80, 0.94);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  pointer-events: auto;
  max-width: min(86vw, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  user-select: none;
}
/* “接受”/“切换底衬”按钮：接受独立一行位于提示文字上方居中；切换底衬排在最下方 */
.annot-hint .annot-hint-close,
.annot-hint .annot-hint-glass {
  height: 26px;
  min-height: 26px;
  padding: 2px 16px;
  font-size: 13px;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s ease, transform 0.1s ease;
}
.annot-hint .annot-hint-close { order: -1; }
.annot-hint .annot-hint-glass { order: 2; }
.annot-hint .annot-hint-close:hover,
.annot-hint .annot-hint-glass:hover { background: rgba(255, 255, 255, 0.3); }
.annot-hint .annot-hint-close:active,
.annot-hint .annot-hint-glass:active { transform: scale(0.95); }
.annot-hint .annot-hint-msg { max-width: 100%; }
.annot-hint b { color: #ffe3e3; }
#annotateCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
#annotateBar {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  box-shadow: var(--shadow-2);
}
/* 批注栏拖拽把手：桌面鼠标与移动端触屏统一经 pointer 事件拖动 */
#annotateBar .annot-drag-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 22px;
  width: 22px;
  color: var(--text-2, #8b93a7);
  border-right: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  margin-right: 2px;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 4px;
}
#annotateBar .annot-drag-grip svg { width: 16px; height: 16px; }
#annotateBar .annot-drag-grip:hover { color: var(--text-1, #e5e9f0); background: rgba(127, 127, 127, 0.12); }
#annotateBar .annot-drag-grip:active { cursor: grabbing; }
/* 批注模式底衬分两种，由 body.annotating.hc-annot-glass 切换（提示条「切换底衬」按钮，选择会记住）：
   ① 默认「画布底衬」：保留主画布内容、不铺任何底色。
      原因：浏览器顶层窗口本身不透明，页面透明只会露出**窗口背衬**（Chrome/系统窗口多为白色），
      既透不出桌面、又把白板内容藏起来 —— 观感就是"点了批注变成一片白"。所以浏览器/APK 默认保留画布。
   ② body.annotating.hc-annot-glass「透明底衬」：隐藏主画布 + 页面全透明，
      适用于真能透出下层的宿主：桌面 EXE（宿主透明覆盖层 / 桌面快照）、OBS 浏览器源（勾选透明背景）、
      透明窗口壳、透明 iframe 嵌入等。
   注意：原生 WebView2 宿主会在 body 上以内联 important 铺「桌面快照」背景图，内联优先级更高，不受影响。 */
body.annotating.hc-annot-glass #canvas {
  visibility: hidden;
  background-color: transparent !important;
}
html:has(body.annotating.hc-annot-glass),
body.annotating.hc-annot-glass,
body.annotating.hc-annot-glass.dark-theme { background-color: transparent !important; }
/* 批注模式：批注画布画笔统一「点」游标 → 隐藏系统光标，交由 #eraserGuide.brush-dot DOM 圆点呈现；
   橡皮擦/点删同样隐藏系统光标由擦除圈呈现；编辑工具态指针已透传主画布，不受影响 */
body.annotating #annotateCanvas { cursor: none !important; }
/* 移动端/APK 去黑边修复：沉浸式全屏或 APK 环境状态栏已隐藏，顶部胶囊不再叠加系统安全区（避免胶囊下移） */
@media (max-width: 1023.98px) {
  body.apk .ex-topwrap,
  body.no-inset .ex-topwrap { top: 8px !important; }
}

/* 批注 画笔「点」游标：批注画笔统一改用实心圆点预览（#eraserGuide 兼任，
   附加 .brush-dot → 圆环变实心、随滚轮/线宽同步缩放），区别于主画布各笔刷 SVG 图标光标；
   电子签名不再走这里，改用模块内 body 级自绘游标 #sigCursor（点/圈 + 滚轮调粗细） */
#eraserGuide.brush-dot svg .eg-ring { fill: currentColor; fill-opacity: 1; stroke: rgba(255,255,255,0.9); stroke-width: 1; }
#eraserGuide.brush-dot .eg-dot { display: none; } /* 与电磁笔一致的实心点：去掉中心白点/空心感 */
body.dark-theme #eraserGuide.brush-dot svg .eg-ring { fill: currentColor; fill-opacity: 1; stroke: rgba(0,0,0,0.6); }
@media (hover: hover) {
  /* 批注橡皮擦 + 批注/电子签画笔点：都隐藏系统光标，由 #eraserGuide DOM 元素呈现 */
  #canvas.cc-eraser, #annotateCanvas.cc-eraser { cursor: none !important; }
  #annotateCanvas.cc-brushdot, #sigCanvas.cc-brushdot { cursor: none !important; }
  /* 电子签名橡皮擦：由模块内 #sigCursor 圆环接管，隐藏系统图标光标避免双光标 */
  #sigCanvas.cc-eraser { cursor: none !important; }
}
/* 电子签名画布自绘游标：画笔=当前笔色实心点、橡皮=灰色圆环（同 电磁笔 pt-cursor / 网页批注 wb-cursor 风格）。
   改挂 #sigCanvasWrap 内部、absolute 定位（原挂 body + fixed）：
   ① 原生全屏时浏览器只渲染全屏元素及其子树，挂在 body 的游标整层被隐藏 → 全屏下“游标消失”；
   ② absolute 同样适配 .sig-fs-css 的 CSS 回退全屏，坐标相对书写区（含 1px 边框）换算；
   ③ 不受祖先 transform（.sig-dialog 拖动位移）影响，坐标不会漂移。
   z-index 高于画布与右上角关闭按钮；pointer-events:none 不挡书写 */
#sigCursor { position: absolute; left: 0; top: 0; z-index: 2147483645; width: 0; height: 0;
  border-radius: 50%; pointer-events: none; box-sizing: border-box;
  transform: translate(-50%, -50%); opacity: 0; }
#sigCursor.on { opacity: 1; }
#sigCursor.dot { background: currentColor; }
#sigCursor.ring { border: 1px solid #e3e6ea; }

/* 批注栏圆形选色板（不在 .toolbar 内，单独应用圆形风格） */
#annotateBar input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
#annotateBar input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
#annotateBar input[type="color"]::-webkit-color-swatch {
  border: 2px solid #e5e7eb;
  border-radius: 50%;
}
#annotateBar input[type="color"]::-moz-color-swatch {
  border: 2px solid #e5e7eb;
  border-radius: 50%;
}
@media (hover: hover) {
  #annotateBar input[type="color"]:hover {
    transform: scale(1.1);
    box-shadow: var(--ring);
  }
}
#captionBar {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 985; /* 高于批注层(960)，批注模式下字幕/提示仍可见 */
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--shadow-2);
  color: #fff;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2px;
  padding: 8px 16px;
  border-radius: 18px;
  max-width: 70vw;
  text-align: center;
  pointer-events: none;
}
/* 常驻进度提示（保存画布 / 保存视频）：[转圈] [百分比] 提示语 —— 一直显示到写盘完成才消失 */
#captionBar.hc-sticky {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px 8px 14px;
}
#captionBar .hc-cap-spin,
#shareNoTip.hc-share-prog .hc-cap-spin {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: hcCapSpinW 0.8s linear infinite;
}
/* 百分比：等宽数字 + 半透明胶囊底，实时跳动时宽度不抖动 */
#captionBar .hc-cap-pct {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1;
  min-width: 42px;
  text-align: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
#captionBar .hc-cap-pct[hidden],
#shareNoTip.hc-share-prog .hc-cap-pct[hidden] { display: none; }
#captionBar .hc-cap-text { white-space: nowrap; }
@keyframes hcCapSpinW { to { transform: rotate(360deg); } }

/* 页面管理列表 */
#pageList .page-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #eef0f4;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 14px;
}
/* —— 画布尺寸控件：顶部预设条 + 每页行内宽高（跟随主题变量，适配暗黑） —— */
.cbx-csbar {
  color: var(--text-2, #6b7280);
}
.cbx-csbar select,
.cbx-csbar input[type='number'],
.cs-wh {
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #d0d7de);
  color: var(--text-1, #1f2937);
}
.cbx-csbar select:disabled,
.cbx-csbar input[type='number']:disabled,
.cs-wh:disabled { opacity: .5; }
/* 自定义宽高：默认隐藏（hidden 生效）；显示时独立成行、行内居中 */
#pgCsCustom, #swCsCustom { display: none; }
#pgCsCustom:not([hidden]),
#swCsCustom:not([hidden]) {
  display: inline-flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
/* —— 页面管理行内的「画布尺寸」条：位于页面名下方、紧贴缩略图之后 —— */
#pageList .cs-strip { color: var(--text-2, #6b7280); }
#pageList .cs-strip .cs-wh { box-sizing: border-box; }
#pageList .cs-strip .cs-wh.cs-free { color: var(--text-2, #6b7280); font-style: italic; border-style: dashed; }
.dark-theme #pageList .cs-strip .cs-wh.cs-free { color: var(--text-3, #b0b0b8); }
.dark-theme #pageList .cs-strip { color: var(--text-3, #b0b0b8); }
.dark-theme #pageList .cs-wh,
.dark-theme .cbx-csbar select,
.dark-theme .cbx-csbar input[type='number'] {
  background: var(--surface-3, #3c3c43);
  border-color: var(--border-strong, #5a5a64);
  color: var(--text-1, #e8e8ea);
}
#pageList .page-item.current { border-color: var(--accent); background: var(--accent-soft); }
#pageList .page-item .page-name { flex: 1; font-weight: 600; }
#pageList .page-item .btn { min-height: 30px; height: 30px; padding: 0 10px; font-size: 14px; }

/* 新建/切换弹窗列表（与页面管理同款风格） */
#switchPageList .page-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #eef0f4;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 14px;
}
#switchPageList .page-item.current { border-color: var(--accent); background: var(--accent-soft); }
#switchPageList .page-item .page-name { flex: 1; font-weight: 600; }

/* ===== 历史记录弹窗（与页面管理同款风格） ===== */
#historyList {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #eef0f4;
  border-radius: 10px;
  background: #fafbfc;
  text-align: left;
}
/* ===== 图层管理列表 ===== */
#layersList {
  border: 1px solid #eef0f4;
  border-radius: 10px;
  background: #fafbfc;
  text-align: left;
}
.layer-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px;
  border-bottom: 1px dashed #e5e7eb;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.layer-row:last-child { border-bottom: none; }
.layer-row:hover { background: #f1f5f9; }
.layer-row.current { background: #dbeafe; box-shadow: inset 3px 0 0 #3b82f6; }
.layer-row.current .layer-name { font-weight: 600; color: #1d4ed8; }
.layer-row.current .layer-meta { color: #3b82f6; }
.layer-row .layer-eye {
  border: none; background: transparent; cursor: pointer;
  font-size: 16px; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.layer-row .layer-eye:hover { background: #e2e8f0; }
.layer-row .layer-name { flex: 1; font-size: 14px; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-row .layer-meta { font-size: 12px; color: #9ca3af; }
.layer-row .layer-op {
  border: none; background: transparent; cursor: pointer;
  font-size: 12px; width: 24px; height: 24px; border-radius: 7px; color: #64748b;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px;
}
.layer-row .layer-op:hover { background: #e2e8f0; color: #1f2937; }
.layer-row .layer-op:disabled { opacity: 0.3; cursor: not-allowed; }
/* ===== 对齐弹窗：sig-modal 风格 + 按钮按方向 3×3 方位放置 =====
 *  左对齐 / 水平居中 / 右对齐 放在 上排（水平轴）
 *  上对齐 / 垂直居中 / 下对齐 放在 下排（垂直轴）
 *  每个按钮根据 data-align 做 text-align，模拟"按钮内容按方向图标位置"的视觉效果
 */
.align-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 8px;
}
#alignPanel .btn { min-height: 38px; height: 38px; padding: 0 10px; font-size: 13px; }
.align-grid .align-btn[data-align="left"]    { text-align: left;   justify-content: flex-start; padding-left: 12px; }
.align-grid .align-btn[data-align="right"]   { text-align: right;  justify-content: flex-end;   padding-right: 12px; }
.align-grid .align-btn[data-align="hcenter"] { text-align: center; justify-content: center; }
.align-grid .align-btn[data-align="top"]     { text-align: center; justify-content: center; }
.align-grid .align-btn[data-align="vcenter"] { text-align: center; justify-content: center; }
.align-grid .align-btn[data-align="bottom"]  { text-align: center; justify-content: center; }
.history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px dashed #e5e7eb;
  font-size: 14px;
  line-height: 1.5;
}
.history-item:last-child { border-bottom: none; }
.history-item:hover { background: #eef3ff; }
.history-no {
  flex: none;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.history-time { flex: none; color: #6b7280; font-family: monospace; font-size: 14px; }
.history-desc { flex: 1; color: #1f2937; word-break: break-all; }
#historyList .history-empty { color: #9ca3af; font-size: 14px; padding: 12px; text-align: center; }

/* 新分享平台图标色 */
.share-icon.qrcode { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.share-icon.baidupan { background: linear-gradient(135deg, #2932e1, #4a6cf7); }
.share-icon.email { background: linear-gradient(135deg, #16a34a, #22c55e); }
.share-icon.moments { background: linear-gradient(135deg, #fa9d3b, #fbbf24); }
.share-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  color: #555;
  text-decoration: none;
  margin: 6px 8px;
  cursor: pointer;
}

#showToolbarBtn {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 20;
  display: none;
}

/* —— 隐藏工具栏（body.toolbar-hidden）：所有 HCDRAW 浮动容器隐藏，仅留画布 + 左上角显示按钮 —— */
body.toolbar-hidden .ex-topwrap,
body.toolbar-hidden #hintViewer,
body.toolbar-hidden .ex-bottombar,
body.toolbar-hidden .ex-leftbar,
body.toolbar-hidden .ex-subbar,
body.toolbar-hidden .coord-bar,
body.toolbar-hidden #toolbarCurtainBtn,
body.toolbar-hidden .m-side-toolbar,
body.toolbar-hidden .m-more-trigger,
body.toolbar-hidden .bs-capsule,
body.toolbar-hidden .bs-capsule-rail {
display: none !important;
}
body.toolbar-hidden #showToolbarBtn {
  display: flex !important;
  left: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  color: var(--text-1);
  cursor: pointer;
}
body.toolbar-hidden #showToolbarBtn svg { width: 18px; height: 18px; display: initial; }

/* 批注模式（含全屏签批）下保留顶部拉幕布按钮：菜单栏展开/隐藏两种状态都可收起/展开菜单栏 */
body.annotating #toolbarCurtainBtn {
  display: block !important;
  z-index: 987; /* 高于批注层(960)与菜单栏(986)，全屏签批/菜单展开态均可点 */
  opacity: 0.6;
}
body.annotating #showToolbarBtn {
  display: flex !important;
  left: 10px;
  top: 10px;
  z-index: 970; /* 高于批注层(960)，保证批注中可点击 */
}
/* 批注模式下展开菜单栏：抬升到批注层之上，保证全屏批注中可见可点（不退出全屏）；
   并高于聚光灯/拉幕布/放大镜层(985)，避免遮罩开启后盖住菜单栏导致"点不到/关不掉" */
body.annotating .toolbar {
  z-index: 986;
}
/* 批注模式下 HCDRAW 新工具栏（ex-topwrap/ex-bottombar/ex-subbar）同步抬升到批注层(960)之上，
   与 .toolbar 同层级(986)，保证「显示工具栏」展开后画布菜单栏可点（含关闭/隐藏按钮） */
body.annotating .ex-topwrap,
body.annotating .ex-bottombar,
body.annotating .ex-subbar {
  z-index: 986;
}

/* 批注模式下教学工具提升到批注层(960)之上：
   聚光灯/拉幕布/放大镜原来(930/935/940)会被批注画布遮挡而不可用 */
body.annotating #spotlightLayer,
body.annotating #curtainLayer,
body.annotating #magnifierLens {
  z-index: 985;
}
/* 批注模式下隐藏左下角徽章组（锁定/页面/图层信息），避免遮挡批注视野；退出批注自动恢复 */
body.annotating #canvasBadges {
  display: none !important;
}

/* ===== 拉幕布式菜单栏开关：顶部居中小手柄，点击收起/展开菜单栏（全屏下同样生效） ===== */
#toolbarCurtainBtn {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  min-width: 64px;
  height: 20px;
  min-height: 20px;
  padding: 0 18px;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-2);
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-2);
  opacity: 0.6; /* 60% 不透明度：低调悬浮，不遮挡画布内容 */
  transition: color 0.2s, background-color 0.2s, height 0.2s, opacity 0.2s;
}
#toolbarCurtainBtn:hover {
  color: var(--accent);
  background: var(--surface);
  height: 26px;
  opacity: 1;
}

.toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-1);
  white-space: nowrap;
}

.toolbar select,
.toolbar input[type="text"] {
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text-1);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 70px;
}

/* 圆形选色板：无边框圆点，色块填满整圆 */
.toolbar input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.toolbar input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.toolbar input[type="color"]::-webkit-color-swatch {
  border: 2px solid #e5e7eb;
  border-radius: 50%;
}
.toolbar input[type="color"]::-moz-color-swatch {
  border: 2px solid #e5e7eb;
  border-radius: 50%;
}
@media (hover: hover) {
  .toolbar input[type="color"]:hover {
    transform: scale(1.1);
    box-shadow: var(--ring);
  }
}

.toolbar select:focus,
.toolbar input[type="color"]:focus,
.toolbar input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.toolbar input[type="text"] {
  cursor: text;
  width: 130px;
}

.toolbar input[type="range"] {
  width: 80px;
  accent-color: var(--accent);
}

.btn {
  height: 36px;
  min-height: 44px;       /* 移动端触控友好最小高度 */
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--card-inset), var(--card-shadow);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), box-shadow 180ms ease, background-color 180ms ease,
              border-color 180ms ease, color 180ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  touch-action: manipulation; /* 禁用双击缩放干扰按钮 */
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
}

@media (hover: hover) {
  .btn:hover:not(:disabled) {
    background: var(--card-bg);
    border-color: var(--accent);
    color: var(--accent-strong);
    transform: translateY(-2px);
    box-shadow: var(--card-inset), var(--card-shadow-hover), 0 4px 12px var(--accent-glow);
  }
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: var(--card-shadow);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.4);
  transform: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* 弹窗内按钮与输入框等高（32px）：文字输入框与紧随其后的按钮尺寸统一；工具栏按钮保持 44px 触控高度 */
/* 同时恢复弹窗按钮外框（确认/取消/登录等），避免被通用 .btn{border:0} 抹掉 */
/* 注：使用 var(--border) 而非 var(--card-border)（后者为 transparent，会导致按钮无线框） */
.sig-dialog .btn,
.share-modal-content .btn,
.hcd-dialog .btn,
.sig-modal .btn:not(.sig-modal-close) {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-md);
}
/* 弹窗内选中态按钮：恢复蓝底白字（覆盖上方 .sig-modal .btn 的 card-bg 白底，
   避免 .active 的 color:#fff 落在白底上导致选中文字看不见；优先级 (0,4,0) 同时覆盖通用与暗黑态）*/
.sig-modal .btn.active:not(.sig-modal-close) {
  background: var(--accent);
  background-image: var(--gradient-accent-soft);
  color: #fff;
  border-color: var(--accent-strong);
  box-shadow: var(--card-inset), 0 2px 8px var(--accent-glow);
}
/* 弹窗主操作按钮（确认/保存/登录等）蓝色填充 */
.sig-dialog .btn-primary,
.share-modal-content .btn-primary,
.hcd-dialog .btn-primary,
.sig-modal .btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.sig-dialog .btn:hover,
.share-modal-content .btn:hover,
.hcd-dialog .btn:hover,
.sig-modal .btn:not(.sig-modal-close):hover {
  background: var(--border-soft);
}
.sig-dialog .btn-primary:hover,
.share-modal-content .btn-primary:hover,
.hcd-dialog .btn-primary:hover,
.sig-modal .btn-primary:hover {
  background: var(--accent-strong, var(--accent));
}

/* 批注栏操作按钮（保存/退出批注）：补回可见外框（通用 .btn{border:0} 把外框抹掉了） */
#annotateBar .btn {
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
#annotateBar .btn:hover { background: var(--border-soft); }

/* 明亮主题下批注栏/电子签名弹窗内的三合一滑块：
   基础边框 var(--card-border) 为透明，导致「点击前看不到外框、激活后才冒出」；
   此处让外框始终可见，激活(橡皮擦)/警示(右滑将清空)时边框随状态变色给出反馈
   （暗色主题已有 body.dark-theme .multi-slide-container 规则保证外框可见，不重复处理） */
body:not(.dark-theme) #annotateBar .multi-slide-container,
body:not(.dark-theme) #sigModal .multi-slide-container {
  border-color: var(--border);
}
body:not(.dark-theme) #annotateBar .multi-slide-container.active,
body:not(.dark-theme) #sigModal .multi-slide-container.active {
  border-color: #93c5fd;
}
body:not(.dark-theme) #annotateBar .multi-slide-container.armed,
body:not(.dark-theme) #sigModal .multi-slide-container.armed {
  border-color: #fca5a5;
}

.btn.active,
.btn.recording,
.btn.replaying {
  background-image: var(--gradient-accent-soft);
  background-color: var(--accent);
  color: #fff;
  border-color: var(--accent-strong);
  box-shadow: var(--card-inset), 0 2px 8px var(--accent-glow);
}

/* 退出屏幕批注后高亮主画布「批注」按钮：提示批注内容已回主画布、可再次点击进入。
   复用 .btn.active 的高亮视觉，独立类名避免被工具切换的 .active 管理误清。 */
#annotateBtn.hc-annot-ready {
  background-image: var(--gradient-accent-soft);
  background-color: var(--accent);
  color: #fff;
  border-color: var(--accent-strong);
  box-shadow: var(--card-inset), 0 2px 8px var(--accent-glow);
}

.btn.recording,
.btn.replaying {
  background-image: linear-gradient(180deg, #ff7875 0%, #ff4d4f 100%);
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  box-shadow: 0 2px 6px rgba(255, 77, 79, 0.35);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 77, 79, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
  }
}

/* ============ 三合一滑动按钮（笔刷/橡皮擦/清空画布） ============ */
/* 点击容器 = 切换笔刷/橡皮擦；按住滑块右滑到底 = 清空整个画布（可撤销） */
.multi-slide-container {
  position: relative;
  height: 36px;
  min-height: 36px;        /* 高度统一 36px（与 .btn 桌面端一致，原 44px 改 36） */
  flex-shrink: 0;          /* 防止在 flex 容器中被挤压导致宽度自动缩小 */
  min-width: 144px;        /* 缩短，避免擦除模块过宽（原 176px） */
  padding: 3px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background-color: var(--card-bg);
  background-image: var(--card-inset);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--card-inset), var(--card-shadow);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;      /* 拖动滑块时不触发页面滚动 */
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  display: inline-flex;
  align-items: center;     /* 滑块(30px)在容器(min-height 44px)内上下居中 */
  vertical-align: middle;
  align-self: center;      /* 工具栏行内垂直居中，不随换行贴顶/贴底 */
}

/* 滑块：纯视觉元素（pointer-events:none），拖动统一由容器接管 */
.slide-knob {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 30px; /* 行高与圆同高：抵消字形 metrics 造成的上下偏移，保证图标垂直居中 */
  color: #fff;
  background-image: var(--gradient-accent);
  box-shadow: 0 2px 6px var(--accent-glow);
  /* 滑块可接收指针事件：点击/拖拽逻辑绑在容器上，事件冒泡即可；保留可点性便于自动化与直接交互 */
  /* 释放回弹采用过冲曲线，产生 Q 弹手感 */
  transition: transform 0.45s var(--ease-spring),
              background-image 0.3s ease, box-shadow 0.3s ease;
}
.slide-knob > svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}
/* 任务1：主画布三合一按钮「初始（默认笔刷）状态」把笔形图标换成 logo 徽标。
   hcLogo 底图为「紫色圆形 + 白色笔触」的整圆图形（hcdraw.png 生成，本身即一个圆），
   因此去掉原白底圆框与内缩，让 logo 的 svg 尺寸正好等于外圈（圆钮）直径，无留白 */
.slide-knob.logo-knob,
.ex-topwrap .multi-slide-container .slide-knob.logo-knob,
.ex-bottombar .multi-slide-container .slide-knob.logo-knob,
.wb-bar .multi-slide-container .slide-knob.logo-knob,
#ptFsTools .multi-slide-container .slide-knob.logo-knob,
body.dark-theme .slide-knob.logo-knob {
  background: transparent;
  background-image: none;
  box-shadow: none;
}
.slide-knob.logo-knob > svg,
.ex-topwrap .multi-slide-container .slide-knob.logo-knob > svg,
.ex-bottombar .multi-slide-container .slide-knob.logo-knob > svg,
.wb-bar .multi-slide-container .slide-knob.logo-knob > svg,
#ptFsTools .multi-slide-container .slide-knob.logo-knob > svg,
body.dark-theme .slide-knob.logo-knob > svg {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
}
/* 品牌 logo 的暗色白底变体开关：同一 <svg> 始终内置两个 <use> —— #hcLogo（浅色）与 #hcLogoW（白底暗色变体），
   由 body.dark-theme 通过纯 CSS 决定显示哪个，主题「切换 / 初始化」即时生效，不依赖 JS 逐个刷新 href */
.logo-use-d { display: none; }
body.dark-theme .logo-use-l { display: none; }
body.dark-theme .logo-use-d { display: inline; }
/* 状态指示文字 */
.status-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #6b7280;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.status-text > svg.slide-status-icon {
  width: 14px;
  height: 14px;
  flex: none;
}

/* 拖动中：滑块即时跟手（关闭过渡）+ 容器内凹按压反馈 */
.multi-slide-container.dragging {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 3px 7px rgba(0, 0, 0, 0.12);
}
.multi-slide-container.dragging .slide-knob {
  transition: background-image 0.3s ease, box-shadow 0.3s ease;
}

/* 橡皮擦激活态（点击切换后）：容器淡蓝 + 滑块变红 */
.multi-slide-container.active {
  border-color: #93c5fd;
  background-color: #dbeafe;
  background-image: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
}
.multi-slide-container.active .slide-knob {
  background-image: linear-gradient(135deg, #ff7875, #ff4d4f);
  box-shadow: 0 2px 5px rgba(255, 77, 79, 0.35);
}
.multi-slide-container.active .status-text {
  color: #1d4ed8;
}

/* 右滑警示态：滑过 80% 行程，即将清空（触发一次红色光晕脉冲） */
.multi-slide-container.armed {
  border-color: #fca5a5;
  background-color: #fee2e2;
  background-image: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
  animation: armed-flash 0.45s ease-out;
}
.multi-slide-container.armed .slide-knob {
  background-image: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 2px 5px rgba(234, 88, 12, 0.4);
}
.multi-slide-container.armed .status-text {
  color: #b91c1c;
}

/* 清空成功反馈态：绿色 + ✓（容器绿色光晕扩散一次） */
.multi-slide-container.clearing {
  border-color: #6ee7b7;
  background-color: #d1fae5;
  background-image: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  animation: clear-glow 0.7s ease-out;
}
.multi-slide-container.clearing .slide-knob {
  background-image: linear-gradient(135deg, #34d399, #059669);
  box-shadow: 0 2px 5px rgba(5, 150, 105, 0.35);
}
.multi-slide-container.clearing .status-text {
  color: #047857;
}

/* 状态文字切换：轻微上浮淡入 */
.status-text.swap {
  animation: text-swap 0.28s ease-out;
}

/* ====== 动画关键帧 ====== */
@keyframes armed-flash {
  0% {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 0 rgba(239, 68, 68, 0.45);
  }
  100% {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 12px rgba(239, 68, 68, 0);
  }
}

@keyframes clear-glow {
  0% {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 0 rgba(16, 185, 129, 0.5);
  }
  100% {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 16px rgba(16, 185, 129, 0);
  }
}

@keyframes text-swap {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.coord-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-left: auto;
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
  /* R9：与 .btn 高度一致（min-height:44px / height:36px → 取 max 的 44px 保证移动端触控区；内文字体放大 14px） */
  min-height: 44px;
  line-height: 32px;
  align-items: center;
  /* R5：与 .btn 统一风格 —— 卡片化底 + 同款边框/圆角/阴影 */
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: var(--card-inset), var(--card-shadow);
  transition: box-shadow 150ms ease, border-color 150ms ease;
  user-select: none;
}
.coord-bar b { font-size: 14px; font-weight: 600; letter-spacing: 0.2px; color: var(--accent-strong); }

.coord-bar span {
  display: inline-flex;
  align-items: center;
}

.coord-bar b {
  min-width: 32px;
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 进入全屏（documentElement）后：根文档必须与全屏视口同高并铺满背景，
   防止个别浏览器/刘海屏把未被内容覆盖的区域补成黑色边缘。
   含 -webkit- 前缀：iOS Safari / 部分 Android WebView 仅认前缀伪类，否则刘海/边缘露黑 */
html:fullscreen,
html:fullscreen body,
html:-webkit-full-screen,
html:-webkit-full-screen body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg, #fff);
}

/* 交互层：压在内容层（#canvas, z-index:1）之上、自身不接收指针事件，绘制选择手柄/框选/套索/锁标等装饰 */
#overlayCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
}

/* ===== RTL 整体镜像（阿拉伯语 ar / 波斯语 fa 等从右到左语言；web / APK / 桌面同一份 CSS）=====
   以书写方向 direction:rtl 驱动：flex 行的主轴、inline 文本、列表等会随之自动镜像；
   滑杆 / 数值 / 颜色 / 坐标等「方向敏感」控件保持 LTR，避免刻度与数值颠倒。 */
html[dir="rtl"],
body.hc-rtl { direction: rtl; }
body.hc-rtl .menu-kbd { margin-left: 0; margin-right: auto; }
body.hc-rtl .menu-label { text-align: right; }
body.hc-rtl #langList { direction: rtl; }
body.hc-rtl input[type="range"],
body.hc-rtl input[type="number"],
body.hc-rtl input[type="color"],
body.hc-rtl .mono,
body.hc-rtl .pt-log,
body.hc-rtl #ptLog,
body.hc-rtl .hc-qr-zoom-box,
body.hc-rtl #penTestCanvas { direction: ltr; }
body.hc-rtl .pt-log,
body.hc-rtl .pt-logbox { text-align: left; }

#canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  touch-action: none;
  cursor: crosshair;
  outline: none;
  /* 画布光标：笔刷/工具切换 → 更细更小的图标；笔输入=点 */
  --cc-paint:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><circle cx='6' cy='6' r='2' fill='%23334155'/></svg>") 6 6, crosshair;
  --cc-eraser:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><circle cx='13' cy='13' r='9.5' fill='none' stroke='%2364748b' stroke-width='1.6'/><circle cx='13' cy='13' r='6.5' fill='%2364748b' fill-opacity='0.12'/></svg>") 13 13, cell;
  /* 笔刷游标：统一 24px、笔尖落在 (8,24) → 热点 6 18，笔身一律朝右上，
     落点左下方留空 → 书写时不遮挡笔迹；全部细线稿（stroke ≤ 1.1）*/
  --cc-pencil:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 L11.8 19.2 L13.8 21.2 Z' fill='%23fde68a' stroke='%23854d0e' stroke-width='0.9'/><path d='M11.8 19.2 L24.2 6.8 L26.2 8.8 L13.8 21.2 Z' fill='%23fde047' stroke='%23854d0e' stroke-width='0.9'/><path d='M15 18.6 L22.6 11' stroke='%23854d0e' stroke-width='0.6' opacity='0.5'/><path d='M24.2 6.8 L26.2 8.8 L25 10 L23 8 Z' fill='%2310b981' stroke='%23065f46' stroke-width='0.8'/></g></svg>") 5 15, crosshair;
  --cc-pen:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 L12.6 17.4 L14.6 19.4 Z' fill='%23bae6fd' stroke='%230c4a6e' stroke-width='0.9'/><path d='M12.6 17.4 L25 5 L27 7 L14.6 19.4 Z' fill='%230ea5e9' stroke='%230c4a6e' stroke-width='0.9'/><path d='M9.6 22.4 L13.6 18.4' stroke='%230c4a6e' stroke-width='0.6'/><path d='M21.8 4.6 L24.4 7.2' stroke='%230c4a6e' stroke-width='0.8'/></g></svg>") 5 15, crosshair;
  --cc-ballpoint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 L12.2 18.4 L13.8 20 Z' fill='%23e2e8f0' stroke='%23334155' stroke-width='0.9'/><circle cx='8.7' cy='23.2' r='0.85' fill='%23334155'/><path d='M12.2 18.4 L25.4 5.2 L26.8 6.6 L13.8 20 Z' fill='%23e2e8f0' stroke='%23334155' stroke-width='0.9'/><path d='M22.8 4.6 L25.6 7.4' stroke='%23334155' stroke-width='0.8'/><path d='M19 10.6 L20.4 12' stroke='%23334155' stroke-width='0.6' opacity='0.6'/></g></svg>") 5 15, crosshair;
  --cc-signpen: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 L12.8 18.6 L14.4 20.2 Z' fill='%23fecdd3' stroke='%239f1239' stroke-width='0.9'/><path d='M12.8 18.6 L26 5.4 L27.4 6.8 L14.4 20.2 Z' fill='%23fb7185' stroke='%239f1239' stroke-width='0.9'/><path d='M19 12.4 L20.4 13.8' stroke='%239f1239' stroke-width='0.6' opacity='0.7'/></g></svg>") 5 15, crosshair;
  --cc-felttip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 C 9.4 22 11.8 20 13.4 19.4 C 15 18.8 14.6 21.2 12.8 22.2 C 11 23.2 9.2 23.8 8 24 Z' fill='%23fed7aa' stroke='%237c2d12' stroke-width='0.9'/><path d='M13.2 19.4 L26 6.6 L27.4 8 L14.6 20.8 Z' fill='%23fb923c' stroke='%237c2d12' stroke-width='0.9'/></g></svg>") 5 15, crosshair;
  --cc-brush:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 C 10.4 20.6 13 17.6 14.4 15.4 C 15.6 13.4 15.4 12.2 14.2 11.8 C 12.8 11.4 11.4 13 10.4 15.6 C 9.4 18.2 8.6 21.2 8 24 Z' fill='%23bfdbfe' stroke='%231d4ed8' stroke-width='0.9'/><path d='M13.8 12 L26.4 3.4 L27.8 4.8 L15.2 13.4 Z' fill='%2392400e' stroke='%23451a03' stroke-width='0.9'/></g></svg>") 5 15, crosshair;
  --cc-watercolor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 C 10 21.4 12.4 19.4 13.6 18.6 C 15 17.8 14.6 20.4 12.6 21.6 C 10.8 22.7 9.2 23.4 8 24 Z' fill='%23a5f3fc' stroke='%230e7490' stroke-width='0.9'/><path d='M13.4 18.4 L26.2 6.4 L27.6 7.8 L14.8 20 Z' fill='%2306b6d4' stroke='%230e7490' stroke-width='0.9'/><path d='M22.6 4.2 C 23.6 5.4 24.2 6.2 24.2 7 C 24.2 8 23.4 8.6 22.6 8.6 C 21.8 8.6 21 8 21 7 C 21 6.2 21.6 5.4 22.6 4.2 Z' fill='%23cffafe' stroke='%230e7490' stroke-width='0.8'/></g></svg>") 5 15, crosshair;
  --cc-inkwash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 C 10 20 12.8 16.6 14.6 14.6 C 16.2 12.8 15.8 11.4 14.4 11 C 12.8 10.6 11.2 12.6 10.2 15.4 C 9.2 18.4 8.4 21.4 8 24 Z' fill='%236b7280' stroke='%23111827' stroke-width='0.9'/><path d='M14 11.4 L26.6 2.8 L28 4.2 L15.4 12.8 Z' fill='%23374151' stroke='%23111827' stroke-width='0.9'/><circle cx='22.4' cy='8.4' r='1' fill='%23111827' opacity='0.75'/><circle cx='25.2' cy='11' r='0.7' fill='%23111827' opacity='0.6'/></g></svg>") 5 15, crosshair;
  --cc-ink:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 L12.4 17.8 L14.8 20.2 Z' fill='%23e0e7ff' stroke='%231e3a8a' stroke-width='0.9'/><circle cx='13.2' cy='19.2' r='0.9' fill='%23334155'/><path d='M12.4 17.8 L25.8 4.4 L27.2 5.8 L14.8 20.2 Z' fill='%231e293b' stroke='%231e3a8a' stroke-width='0.9'/><path d='M21.6 2.8 C 22.4 3.8 22.8 4.6 22.8 5.2 C 22.8 6 22.2 6.5 21.6 6.5 C 21 6.5 20.4 6 20.4 5.2 C 20.4 4.6 20.8 3.8 21.6 2.8 Z' fill='%231e3a8a' stroke='%231e3a8a' stroke-width='0.7'/></g></svg>") 5 15, crosshair;
  --cc-brush:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><path d='M10 6 C 12 11 13 16 14 20 L18 20 C 19 16 20 11 22 6 C 18 4 14 4 10 6 Z' fill='%2360a5fa' stroke='%231d4ed8' stroke-width='0.9'/><path d='M11 6 C 13 9.5 14 14 15 18 L17 18 C 18 14 19 9.5 21 6' fill='none' stroke='%231d4ed8' stroke-width='0.6' opacity='0.55'/><rect x='13.5' y='20' width='5' height='3' fill='%239ca3af' stroke='%23374151' stroke-width='0.7'/><rect x='13' y='22.8' width='6' height='5.2' rx='1.4' fill='%2392400e' stroke='%23451a03' stroke-width='0.8'/><path d='M14 24.5 L18 24.5 M14 26.5 L18 26.5' stroke='%23451a03' stroke-width='0.5' opacity='0.7'/></svg>") 10 4, crosshair;
  --cc-ink:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><path d='M16 3 C 11 9 9 13 9 19 a7 7 0 0 0 14 0 C 23 13 21 9 16 3 Z' fill='%231e293b' stroke='%23020617' stroke-width='1'/><path d='M12 19 C 12.5 22 14.5 24 16 26 C 17.5 24 19.5 22 20 19' fill='none' stroke='%23cbd5e1' stroke-width='0.7' opacity='0.75'/><circle cx='14.2' cy='13' r='1.3' fill='%23cbd5e1' opacity='0.65'/></svg>") 10 16, crosshair;
  --cc-inkwash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g opacity='0.9'><circle cx='15' cy='14' r='8.5' fill='%231f2937'/><circle cx='19.5' cy='19' r='6' fill='%234b5563'/><circle cx='11.5' cy='21.5' r='4.5' fill='%236b7280'/><circle cx='22' cy='11' r='3' fill='%23374151'/><circle cx='9' cy='10' r='2.2' fill='%236b7280'/></g><path d='M4 28 C 10 25 14 26 20 27 C 24 27.6 28 28 28 28' fill='none' stroke='%231f2937' stroke-width='1' stroke-linecap='round' opacity='0.55'/></svg>") 10 10, crosshair;
  --cc-marker:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g transform='translate(32,0) scale(-1,1)'><g transform='rotate(-18 16 16)'><rect x='12' y='6' width='8' height='16' rx='1.6' fill='%23f97316' stroke='%237c2d12' stroke-width='0.8'/><polygon points='12,22 16,28 20,22' fill='%23fbbf24' stroke='%237c2d12' stroke-width='0.8'/><rect x='12' y='6' width='8' height='4' fill='%230ea5e9' stroke='%230c4a6e' stroke-width='0.7'/><path d='M13.4 12 L18.6 12 M13.4 15 L18.6 15 M13.4 18 L17.2 18' stroke='%237c2d12' stroke-width='0.6' opacity='0.65'/></g></g></svg>") 10 14, crosshair;
  --cc-highlighter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g transform='translate(32,0) scale(-1,1)'><g transform='rotate(-22 16 16)'><rect x='11.5' y='7' width='9' height='17' rx='2' fill='%23fef08a' stroke='%23713f12' stroke-width='0.8' opacity='0.95'/><polygon points='11.5,24 16,30 20.5,24' fill='%23fde047' stroke='%23713f12' stroke-width='0.7'/><rect x='11.5' y='7' width='9' height='3.2' fill='%23fb923c' stroke='%23713f12' stroke-width='0.7'/><rect x='13' y='12.5' width='6' height='10' fill='%23facc15' opacity='0.85'/></g></g></svg>") 10 14, crosshair;
  --cc-lasso:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><path d='M9 12 a10 7 0 1 0 13 0 a10 7 0 1 0 -13 0 Z' fill='none' stroke='%232563eb' stroke-width='1.4' stroke-dasharray='3.2 2.4'/><circle cx='26.5' cy='23.5' r='2.2' fill='%232563eb'/><path d='M19 22 L24 22.5' stroke='%232563eb' stroke-width='1.1' stroke-linecap='round'/><path d='M10.5 14 L10.5 17 a2.6 2.6 0 0 1 -2.6 2.6 a2.6 2.6 0 0 1 1.8 4.6 a2.6 2.6 0 1 1 -4 -3.6 a5.6 5.6 0 0 0 4.8 -7.6 Z' fill='none' stroke='%231e3a8a' stroke-width='0.9' stroke-linecap='round' stroke-linejoin='round'/></svg>") 10 10, crosshair;
  --cc-select:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><path d='M4 4 L13 25.2 L16.4 19.2 L22.8 22.8 Z' fill='%232563eb' stroke='%23ffffff' stroke-width='0.8'/><path d='M4 4 L13 25.2 L16.4 19.2 L22.8 22.8 Z' fill='none' stroke='%230c4a6e' stroke-width='0.6'/><path d='M13 25.2 L16.4 19.2' stroke='%23bfdbfe' stroke-width='0.6' opacity='0.9'/></svg>") 2.5 2.5, pointer;
  --cc-move:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g fill='none' stroke='%230f172a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4.4 L16 10.6 M16 21.4 L16 27.6 M4.4 16 L10.6 16 M21.4 16 L27.6 16'/><path d='M10 7.5 L16 3 L22 7.5 M24.5 10 L29 16 L24.5 22 M22 24.5 L16 29 L10 24.5 M7.5 22 L3 16 L7.5 10'/></g><circle cx='16' cy='16' r='2.8' fill='%232563eb'/><circle cx='16' cy='16' r='5' fill='none' stroke='%2393c5fd' stroke-width='0.8'/></svg>") 10 10, grab;
  --cc-delete:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><g fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='6'/><path d='M9.3 9.3 L14.7 14.7 M14.7 9.3 L9.3 14.7'/></g></svg>") 10 10, crosshair;
  --cc-text:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g fill='%230f172a'><path d='M7 7 L25 7 L25 9.6 L18 9.6 L18 27 L15.3 27 L15.3 9.6 L7 9.6 Z'/><circle cx='24.3' cy='24.8' r='1.8'/></g><path d='M7.2 7.4 L15.6 7.4' stroke='%232563eb' stroke-width='0.7' opacity='0.85'/></svg>") 4.5 4.5, text;
  --cc-shape:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><rect x='5' y='7' width='22' height='18' rx='3' fill='none' stroke='%230f172a' stroke-width='1.5' stroke-dasharray='4.2 3'/><polygon points='23.4,10.5 26.4,7 29.4,10.5' fill='none' stroke='%232563eb' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/><line x1='23.4' y1='10.5' x2='23.4' y2='22' stroke='%232563eb' stroke-width='1' stroke-dasharray='2.2 2'/></svg>") 14.5 6.5, crosshair;
  --cc-fill:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><path d='M20.5 4.6 a4 4 0 0 1 5.6 5.6 L13.2 23.1 L9.2 27.1 L5.2 23.1 L9.2 19.1 Z' fill='%23f59e0b' stroke='%2378350f' stroke-width='0.9'/><path d='M10 19.2 L5.6 23.6' stroke='%23fffbeb' stroke-width='0.9' stroke-linecap='round'/><circle cx='23.3' cy='8.6' r='1.7' fill='%23fff' opacity='0.95'/></svg>") 3.3 17, crosshair;
  --cc-bucket:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><path d='M6 9 L26 9 L22.6 26.6 a3 3 0 0 1 -3 2.4 H12.4 a3 3 0 0 1 -3 -2.4 Z' fill='%23fde047' stroke='%2378350f' stroke-width='1'/><path d='M10 13 L22 13 L21 26 H11 Z' fill='%23f59e0b' opacity='0.9'/><path d='M6 9 L13 4 a3 3 0 0 1 4.2 0 L26 9' fill='none' stroke='%2378350f' stroke-width='1' stroke-linejoin='round'/><path d='M4 15 C 4 16.5 5 17.5 6.5 17.5 C 7.5 16.2 9 17 9 18 C 9 19.5 7.5 20.5 6 21 C 4.5 20.5 3 19.5 3 18 C 3 16.5 4 15 4 15 Z' fill='%23f59e0b' stroke='%2378350f' stroke-width='0.8'/></svg>") 10 6, crosshair;
  /* 以下为各笔刷专属游标（同名覆盖上方旧定义）：笔尖热点统一 5 15，落点左下方留空不遮挡笔迹 */
  --cc-marker:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8.4 24 L12.6 19.6 L16 22.4 L11.8 26.8 Z' fill='%23fdba74' stroke='%237c2d12' stroke-width='0.9'/><path d='M12.6 19.6 L25.6 6.6 L27.8 8.8 L14.8 21.8 Z' fill='%23f97316' stroke='%237c2d12' stroke-width='0.9'/><path d='M17.6 14.6 L20.8 17.8' stroke='%237c2d12' stroke-width='0.6' opacity='0.6'/></g></svg>") 5 15, crosshair;
  --cc-highlighter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8.6 24 L13 19.8 L17 23 L12.6 27.2 Z' fill='%23fef08a' fill-opacity='0.9' stroke='%23713f12' stroke-width='0.9'/><path d='M13 19.8 L25.4 7.4 L27.6 9.6 L15.2 22 Z' fill='%23fde047' fill-opacity='0.85' stroke='%23713f12' stroke-width='0.9'/><path d='M18 15 L21 18' stroke='%23713f12' stroke-width='0.6' opacity='0.5'/></g></svg>") 5 15, crosshair;
  --cc-artistic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 L12.8 19 L16 21.4 L11.2 26.4 Z' fill='%23ddd6fe' stroke='%235b21b6' stroke-width='0.9'/><path d='M12.8 19 L26.2 5.6 L27.6 7 L14.2 20.4 Z' fill='%238b5cf6' stroke='%235b21b6' stroke-width='0.9'/><path d='M18.6 13.4 L21.6 16.4' stroke='%235b21b6' stroke-width='0.6' opacity='0.6'/></g></svg>") 5 15, crosshair;
  --cc-whiteboard: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8.4 24 L12.4 19.8 L15 22 L11 26.2 Z' fill='%23bfdbfe' stroke='%231e3a8a' stroke-width='0.9'/><path d='M12.4 19.8 L25.8 6.4 L27.2 7.8 L13.8 21.4 Z' fill='%233b82f6' stroke='%231e3a8a' stroke-width='0.9'/><path d='M20 12.4 L22 14.4' stroke='%231e3a8a' stroke-width='0.6' opacity='0.6'/></g></svg>") 5 15, crosshair;
  --cc-chalk:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8.6 24 L14.6 16.4 L17.4 18.4 L11.4 26 Z' fill='%23ffffff' stroke='%23475569' stroke-width='0.9'/><path d='M14.6 16.4 L18.2 12 L20 13.4 L17.4 18.4 Z' fill='%23ffffff' stroke='%23475569' stroke-width='0.9'/><circle cx='22.6' cy='10.4' r='0.8' fill='%2394a3b8'/><circle cx='25' cy='7.6' r='0.6' fill='%2394a3b8'/></g></svg>") 5 15, crosshair;
  --cc-crayon:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8.4 24 L13.4 17.8 L15.8 19.6 L10.8 25.8 Z' fill='%23fecaca' stroke='%23991b1b' stroke-width='0.9'/><path d='M13.4 17.8 L25.4 5.8 L27.6 8 L15.6 20.2 Z' fill='%23ef4444' stroke='%23991b1b' stroke-width='0.9'/><path d='M16.4 14.8 L19 17.4 M18.4 12.8 L21 15.4' stroke='%23ffffff' stroke-width='0.7' opacity='0.85'/></g></svg>") 5 15, crosshair;
  --cc-spray:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M22.4 6.2 L27 10.8 L19.6 18.2 L15 13.6 Z' fill='%23e2e8f0' stroke='%23334155' stroke-width='1'/><path d='M19.8 4.2 L24.4 8.8' stroke='%23334155' stroke-width='0.9'/><path d='M17.4 16 L13.8 19.6' stroke='%23334155' stroke-width='1'/><circle cx='11.4' cy='22.2' r='0.9' fill='%23334155'/><circle cx='8.6' cy='24.6' r='0.75' fill='%23334155' opacity='0.85'/><circle cx='13.4' cy='25' r='0.6' fill='%23334155' opacity='0.7'/><circle cx='6.6' cy='21.2' r='0.6' fill='%23334155' opacity='0.65'/><circle cx='10.6' cy='26.8' r='0.5' fill='%23334155' opacity='0.55'/></g></svg>") 5 15, crosshair;
  --cc-laser:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M13.4 18.6 L26.4 5.6 L27.8 7 L14.8 20 Z' fill='%23334155' stroke='%230f172a' stroke-width='0.9'/><path d='M12.6 19.4 L9 23' stroke='%23ef4444' stroke-width='1'/><circle cx='8' cy='24' r='1.4' fill='%23ef4444'/><path d='M5.4 21.4 L6.6 22.6 M10.6 21.4 L9.4 22.6 M5.6 26 L6.8 24.8 M10.4 26 L9.2 24.8' stroke='%23ef4444' stroke-width='0.7' opacity='0.85'/></g></svg>") 5 15, crosshair;
  --cc-magic:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 L12.4 18.4 L14.2 20.2 Z' fill='%23e9d5ff' stroke='%236b21a8' stroke-width='0.9'/><path d='M12.4 18.4 L25.8 5 L27.2 6.4 L14.2 20.2 Z' fill='%23a855f7' stroke='%236b21a8' stroke-width='0.9'/><path d='M5.6 22.6 L6.4 20.4 L8.6 19.6 L6.4 18.8 L5.6 16.6 L4.8 18.8 L2.6 19.6 L4.8 20.4 Z' fill='%23facc15' stroke='%23a16207' stroke-width='0.6'/></g></svg>") 5 15, crosshair;
  --cc-dash:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 L12.2 18.6 L13.8 20.2 Z' fill='%23e2e8f0' stroke='%231e3a8a' stroke-width='0.9'/><path d='M12.2 18.6 L25.6 5.2 L27 6.6 L13.8 20.2 Z' fill='%23e2e8f0' stroke='%231e3a8a' stroke-width='0.9'/><path d='M4.6 27.4 L7 25 M9 23 L11.4 20.6 M2.6 24.4 L4 23' stroke='%231e3a8a' stroke-width='1' stroke-dasharray='1.6 1.6'/></g></svg>") 5 15, crosshair;
  --cc-capacitive: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M13.6 18.8 L26.8 5.6 L28.2 7 L15 20.2 Z' fill='%23e2e8f0' stroke='%23334155' stroke-width='0.9'/><path d='M11 21.4 C 9.2 21.4 8 22.6 8 24 C 8 25.4 9.2 26.6 11 26.6 C 12.4 26.6 13.4 25.6 13.4 24.4 L13.6 18.8 Z' fill='%2394a3b8' stroke='%23334155' stroke-width='0.9'/></g></svg>") 5 15, crosshair;
  --cc-finger:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g fill='none' stroke='%230f172a' stroke-width='1.1' stroke-linecap='round'><path d='M8 24 C 8 20.6 10.6 18 13.6 18 C 16.6 18 19.2 20.6 19.2 24'/><circle cx='8' cy='24' r='1.2' fill='%232563eb' stroke='none'/></g></svg>") 5 15, crosshair;
  --cc-custom:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><g stroke-linejoin='round' stroke-linecap='round'><path d='M8 24 L12.4 18.4 L14.2 20.2 Z' fill='%23e2e8f0' stroke='%23334155' stroke-width='0.9'/><path d='M12.4 18.4 L25.8 5 L27.2 6.4 L14.2 20.2 Z' fill='%23e2e8f0' stroke='%23334155' stroke-width='0.9'/><rect x='20.6' y='2.6' width='7' height='6' rx='1.2' fill='%23dbeafe' stroke='%231e3a8a' stroke-width='0.8'/><path d='M20.6 7 L23.4 4.6 L25 6.4 L27.6 4.4 L27.6 8.6 L20.6 8.6 Z' fill='%2393c5fd' stroke='%231e3a8a' stroke-width='0.5'/></g></svg>") 5 15, crosshair;
}
/* 画布光标：按笔刷/工具/状态挂 .cc-* 类；类优先级高于 #canvas 的默认 cursor */
#canvas.cc-paint, #annotateCanvas.cc-paint, #sigCanvas.cc-paint   { cursor: var(--cc-paint); }
#canvas.cc-crosshair, #annotateCanvas.cc-crosshair, #sigCanvas.cc-crosshair { cursor: crosshair !important; } /* 默认笔刷=十字光标（而非点），桌面/移动端统一 */
#canvas.cc-eyedrop, #annotateCanvas.cc-eyedrop, #sigCanvas.cc-eyedrop { cursor: none !important; } /* 取色工具：隐藏系统光标（不再用小放大镜 url() 图标），由 #hcEyeLens 自绘复刻放大镜跟随，点画布即取色；首次与持续取色样式完全一致 */
#canvas.cc-pencil, #annotateCanvas.cc-pencil, #sigCanvas.cc-pencil  { cursor: var(--cc-pencil); }
#canvas.cc-pen, #annotateCanvas.cc-pen, #sigCanvas.cc-pen     { cursor: var(--cc-pen); }
#canvas.cc-brush, #annotateCanvas.cc-brush, #sigCanvas.cc-brush   { cursor: var(--cc-brush); }
#canvas.cc-ink, #annotateCanvas.cc-ink, #sigCanvas.cc-ink     { cursor: var(--cc-ink); }
#canvas.cc-inkwash, #annotateCanvas.cc-inkwash, #sigCanvas.cc-inkwash { cursor: var(--cc-inkwash); }
#canvas.cc-marker, #annotateCanvas.cc-marker, #sigCanvas.cc-marker  { cursor: var(--cc-marker); }
#canvas.cc-highlighter, #annotateCanvas.cc-highlighter, #sigCanvas.cc-highlighter { cursor: var(--cc-highlighter); }
#canvas.cc-ballpoint, #annotateCanvas.cc-ballpoint, #sigCanvas.cc-ballpoint { cursor: var(--cc-ballpoint); }
#canvas.cc-signpen, #annotateCanvas.cc-signpen, #sigCanvas.cc-signpen { cursor: var(--cc-signpen); }
#canvas.cc-felttip, #annotateCanvas.cc-felttip, #sigCanvas.cc-felttip { cursor: var(--cc-felttip); }
#canvas.cc-watercolor, #annotateCanvas.cc-watercolor, #sigCanvas.cc-watercolor { cursor: var(--cc-watercolor); }
#canvas.cc-artistic, #annotateCanvas.cc-artistic, #sigCanvas.cc-artistic { cursor: var(--cc-artistic); }
#canvas.cc-whiteboard, #annotateCanvas.cc-whiteboard, #sigCanvas.cc-whiteboard { cursor: var(--cc-whiteboard); }
#canvas.cc-chalk, #annotateCanvas.cc-chalk, #sigCanvas.cc-chalk { cursor: var(--cc-chalk); }
#canvas.cc-crayon, #annotateCanvas.cc-crayon, #sigCanvas.cc-crayon { cursor: var(--cc-crayon); }
#canvas.cc-spray, #annotateCanvas.cc-spray, #sigCanvas.cc-spray { cursor: var(--cc-spray); }
#canvas.cc-laser, #annotateCanvas.cc-laser, #sigCanvas.cc-laser { cursor: var(--cc-laser); }
#canvas.cc-magic, #annotateCanvas.cc-magic, #sigCanvas.cc-magic { cursor: var(--cc-magic); }
#canvas.cc-dash, #annotateCanvas.cc-dash, #sigCanvas.cc-dash { cursor: var(--cc-dash); }
#canvas.cc-capacitive, #annotateCanvas.cc-capacitive, #sigCanvas.cc-capacitive { cursor: var(--cc-capacitive); }
#canvas.cc-finger, #annotateCanvas.cc-finger, #sigCanvas.cc-finger { cursor: var(--cc-finger); }
#canvas.cc-custom, #annotateCanvas.cc-custom, #sigCanvas.cc-custom { cursor: var(--cc-custom); }
#canvas.cc-eraser, #annotateCanvas.cc-eraser, #sigCanvas.cc-eraser  { cursor: var(--cc-eraser); }
#canvas.cc-select, #annotateCanvas.cc-select, #sigCanvas.cc-select  { cursor: var(--cc-select); }
#canvas.cc-lasso, #annotateCanvas.cc-lasso, #sigCanvas.cc-lasso   { cursor: var(--cc-lasso); }
#canvas.cc-move, #annotateCanvas.cc-move, #sigCanvas.cc-move    { cursor: var(--cc-move); }
#canvas.cc-delete, #annotateCanvas.cc-delete, #sigCanvas.cc-delete  { cursor: var(--cc-delete); }
#canvas.cc-text, #annotateCanvas.cc-text, #sigCanvas.cc-text    { cursor: var(--cc-text); }
#canvas.cc-shape, #annotateCanvas.cc-shape, #sigCanvas.cc-shape   { cursor: var(--cc-shape); }
#canvas.cc-fill, #annotateCanvas.cc-fill, #sigCanvas.cc-fill    { cursor: var(--cc-fill); }
#canvas.cc-bucket, #annotateCanvas.cc-bucket, #sigCanvas.cc-bucket  { cursor: var(--cc-bucket); }

/* 取色工具 · 自绘复刻放大镜（#hcEyeLens）：跟随指针的圆形放大镜（尺寸约为常见系统取色器的一半、发丝级细线），
   pointer-events:none 不拦截任何鼠标操作；z-index 高于主画布/批注层但低于可交互面板；仅取色工具激活时在画布内显示 */
#hcEyeLens {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 940;
  pointer-events: none;
  visibility: hidden;
  transform: translateZ(0);
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.2));
}
#hcEyeLens canvas { display: block; }

/* 橡皮擦（主画布）：不再用浏览器 url() 光标动态改尺寸（各浏览器对动态 url() 光标的缓存/重载行为不一致，
   导致"圆圈尺寸不跟随变化"）。改为与聚光灯相同方案：桌面 hover 设备隐藏系统光标(cursor:none)，
   由 #eraserGuide DOM 圆圈跟随指针并实时改变直径（CSS/DOM 渲染跨浏览器可靠，聚光灯已验证） */
@media (hover: hover) {
  #canvas.cc-eraser { cursor: none !important; }
  /* 动态笔尖游标激活时隐藏系统光标，交由 #brushTipCursor 自绘 */
  #canvas.cc-dyn, #annotateCanvas.cc-dyn, #sigCanvas.cc-dyn { cursor: none !important; }
}
/* 动态笔尖游标：图形直接取自 --cc-<笔刷>（单一数据源），仅做 rotate/scale 变换；
   transform-origin 与游标热点(5,15)重合 → 倾斜/放大都围绕笔尖，不会盖住落点处的笔迹 */
#brushTipCursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  z-index: 902;
  pointer-events: none;
  opacity: 0;
  transform-origin: 5px 15px;
  will-change: transform;
  transition: opacity 120ms ease;
  filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, 0.28));
}
#brushTipCursor svg { display: block; width: 20px; height: 20px; overflow: visible; }
/* 橡皮擦尺寸指示圆圈（聚光灯同款机制：DOM 元素随 pointermove 定位、随滚轮/线宽滑条改直径）。
   视觉为全站同风格的 SVG 透明圆环：svg 圆环 vector-effect: non-scaling-stroke → 任意直径下线宽恒定 1px；
   圆内完全透明（fill:none）不遮画布，且不再有中心小点（只保留空心圆环）；双主题随 color 换色 */
#eraserGuide {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  z-index: 900; /* 高于主画布(1)；低于批注层(960)/工具栏(986) */
  color: #e3e6ea; /* 浅色主题描边：比白色深一点点（更淡）；暗色主题见下方 body.dark-theme 覆盖 */
  box-sizing: border-box;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.06s linear;
}
#eraserGuide svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#eraserGuide .eg-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px; /* 线宽减半（原 2px） */
  stroke-opacity: 0.92;
}
/* 中心点已按要求去除（原 3px 实心小点）：只保留空心圆环。
   元素保留仅为兼容历史结构，不再渲染。 */
#eraserGuide .eg-dot {
  display: none;
}
body.dark-theme #eraserGuide {
  color: #f2f3f5;
}

/* N1 透明背景：屏幕端以棋盘格提示 alpha 区域（导出 PNG 为真透明） */
#canvas.bg-transparent {
  background: repeating-conic-gradient(#dfe3ea 0% 25%, #ffffff 0% 50%) 0 0 / 16px 16px;
}

/* 画布左下角徽标容器：锁定小锁（锁定视图时显示）+ 图层号（多图层时显示），纵向堆叠 */
#canvasBadges {
  position: fixed;
  left: calc(10px + env(safe-area-inset-left));
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 985; /* 与 captionBar 同级：高于批注层(960)，低于工具栏(986) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
#layerBadge, #pageBadge {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  color: #fff;
  font-size: 12px; /* 缩小徽标字号：避免与底部胶囊/移动端控件遮挡 */
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px; /* 胶囊形，与 .btn 圆角约定一致 */
  box-shadow: var(--shadow-2);
  white-space: nowrap;
}
#lockBadge {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  white-space: nowrap;
}
#layerBadge[hidden], #lockBadge[hidden], #pageBadge[hidden] { display: none; }

/* 分享弹窗样式 */
.share-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  font-size: 14px; /* 弹窗文字基准与画布系统一致 */
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.share-modal[hidden] { display: none !important; }
/* 背景设置弹窗（.share-modal 遮罩体系，需 fixed 铺满）。
   页面管理已胶囊化为 .tool-cap（同软键盘），不再命中此处 inset:0 规则 */
#bgSettingsModal {
  inset: 0;
  position: fixed;
}
/* 浮面板：语言/计算器等统一居中（保留可拖动，拖拽后位置不再强制居中） */.float-panel-center {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

/* ===== 画布内联文字输入框（点击画布任意位置输入，非对话框） ===== */
.inline-text-editor {
  position: fixed;
  z-index: 980;
  min-width: 120px;
  max-width: 60vw;
  padding: 2px 8px;
  background: var(--surface-glass);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-xs);
  outline: none;
  font-family: sans-serif;
  box-shadow: 0 2px 10px var(--accent-glow);
}

/* ===== 语音转文字输入组（暂停按钮 + 输入框 + 取消按钮） ===== */
.voice-editor {
  position: fixed;
  z-index: 985;
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.voice-editor .inline-text-editor {
  position: static;   /* 覆盖单框 fixed 定位：由 .voice-editor 统一定位 */
  min-width: 220px;
  box-shadow: none;
}
.voice-editor-btn {
  min-width: 34px;
  padding: 0 10px;
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-xs);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.voice-editor-btn:hover { filter: brightness(1.1); }
.voice-editor-btn.voice-cancel { background: #e5484d; border-color: #e5484d; }

/* ===== 画布文字输入组（输入框在上，✓ 确认 / ✕ 删除 一排小按钮贴输入框下沿横排，批注/字幕工具条样式） ===== */
.text-edit-group {
  position: fixed;
  z-index: 982;                 /* 高于单框文字输入(980)，低于语音输入组(985) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 0;
}
.text-edit-group .inline-text-editor {
  position: static;             /* 覆盖单框 fixed 定位：由 .text-edit-group 统一定位 */
  min-width: 150px;
  box-shadow: none;
}
.text-edit-actions {
  display: flex;
  gap: 4px;
}
.text-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-xs);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.text-edit-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}
.text-edit-btn:hover { filter: brightness(1.1); }
.text-edit-btn.text-edit-del { background: #e5484d; border-color: #e5484d; }

/* ===== 电子签名：文字生成签名行 ===== */
.sig-text-gen-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.sig-text-gen-row input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  outline: none;
  font-size: 14px;
}
.sig-text-gen-row input:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.sig-text-gen-row .btn { white-space: nowrap; }
/* 电子签名回放速度选择 / 签名字体选择（同款风格） */
#sigReplaySpeed,
#sigFontSel {
  height: 32px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 6px;
  font-size: 14px;
  background: #fff;
  color: #111827;
  outline: none;
  cursor: pointer;
}
#sigReplaySpeed:focus,
#sigFontSel:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
#sigFontSel { max-width: 148px; }

/* ===== 电子签名生成器弹窗（签名画布默认透明底） ===== */
.sig-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
}
.sig-modal[hidden] { display: none; }

/* ===== 画笔设置面板（brushSettingsModal）：靠左侧悬浮胶囊，风格同顶部/底部白胶囊 ===== */
.bs-capsule {
  position: fixed;
  left: 16px;
  /* 默认上边距 = 顶部主胶囊下缘 + 8px（与 #hintViewer 同一距离，桌面端即 10+44+8=62px）；
     运行时由 JS 按主胶囊实际下缘动态校准，此处为无 JS / 主胶囊不可见时的兜底值 */
  top: 62px;
  transform: none;
  z-index: 99990;                 /* 高于工具栏(20)/浮动子菜单(99999)之下、其它 sig-modal(2147483640) 之下 */
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow-hover, var(--card-shadow));
  padding: 8px 12px 12px;
  color: var(--text-1);
  font-size: 14px;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
}
.bs-capsule[hidden] { display: none; }
/* 标题行 = 拖拽把手（风格同胶囊内按钮：扁平、8px 方角） */
.bs-capsule-head {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14px;
  padding: 4px 2px 8px;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;             /* 触摸拖拽时禁止页面滚动 */
}
.bs-capsule-head .submenu-icon { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; }
.bs-capsule .bs-capsule-close {
  margin-left: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 18px;
  color: var(--text-2, #6b7280);
  background: var(--border-soft);
  flex-shrink: 0;
}
.bs-capsule .bs-capsule-close:hover { color: var(--text-1); filter: brightness(0.96); }
.bs-capsule .bs-capsule-close svg { width: 13px; height: 13px; margin: 0; color: var(--text-2, #6b7280); }
/* 标题栏下一条虚线分割符（与新增的弹窗胶囊一致） */
.bs-capsule .bs-capsule-head {
  border-bottom: 1px dashed var(--border, #e2e8f0);
  margin-bottom: 8px;
}
.bs-capsule-body { display: flex; flex-direction: column; gap: 10px; }

/* ===== 软键盘 / 计算器：扩展小工具「画布悬浮胶囊」 =====
   （原 sig-modal 居中弹窗已改为胶囊：无全屏遮罩、不挡画布。
     打开默认停靠画布居中，标题栏即拖拽把手可自由移动；
     拖离后位置保留、刷新长留，不会在每次开关时跳回中心。）
   观感与画笔设置胶囊一致：白底圆角悬浮卡 + 平面标题行 */
.tool-cap {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99990;                 /* 与画笔设置胶囊同级：高于工具栏，低于常规弹窗遮罩 */
  box-sizing: border-box;
  padding: 10px 12px 12px;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow-hover, var(--card-shadow));
  color: var(--text-1);
  font-size: 14px;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
}
#softKeyboardPanel.tool-cap { width: min(460px, calc(100vw - 32px)); }
#calculatorPanel.tool-cap { width: 320px; }   /* 宽度与画笔设置胶囊一致（统一宽度规则见「.tool-cap 胶囊化」段） */
.tool-cap[hidden] { display: none !important; }
/* 移动端：小屏限宽（仍居中；不加 !important，保证拖拽内联样式仍生效）。
   弹窗改造的胶囊（.cap-modal）宽度由内部卡片自身决定，此处只兜底最大宽度，
   避免 460px 把电磁笔/电容屏测试等大面板压扁 */
@media (max-width: 768px) {
  #softKeyboardPanel.tool-cap,
  #calculatorPanel.tool-cap {
    width: min(calc(100vw - 16px), 460px) !important;
  }
  .tool-cap { max-width: calc(100vw - 16px); }
}
/* 标题行 = 拖拽把手 */
.tool-cap-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  padding: 0 2px 8px;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;             /* 触摸拖动标题时禁止页面滚动 */
}
.tool-cap-icon {
  width: 16px; height: 16px;
  flex: 0 0 16px;
  color: var(--accent, #2563eb);
}
.tool-cap-head > span { flex: 1 1 auto; min-width: 0; color: var(--text-1); }
.tool-cap-close {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: var(--border-soft);
  color: var(--text-2, #6b7280);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tool-cap-close:hover { color: var(--text-1); filter: brightness(0.96); }
.tool-cap-close svg { width: 13px; height: 13px; color: var(--text-2, #6b7280); }
.tool-cap-body { display: flex; flex-direction: column; gap: 8px; }
/* 胶囊内按钮补回可见外框与紧凑高度（与旧弹窗内一致；按键网格的行/列尺寸由
   #softKeyboardKeys / #calcKeys 等既有规则以 id 优先级覆盖，不受影响） */
.tool-cap-body .btn {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-md);
}
.tool-cap-body .btn:hover { background: var(--border-soft); }
.tool-cap-body .btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tool-cap-body .btn-primary:hover { background: var(--accent-strong, var(--accent)); color: #fff; }
/* 胶囊内的输入框/显示屏取消自身多余的底部外边距（行间距由 body 的 gap 统一控制） */
.tool-cap #softKeyboardInput,
.tool-cap #calcDisplay { margin-bottom: 0; }

/* ===== 「更多」栏目弹窗胶囊化：与软键盘同为 .tool-cap 画布悬浮胶囊 =====
   原 .sig-modal 全屏遮罩弹窗（电子签名/分享/电磁笔测试/电容屏测试/倒计时/点名/协作/云端/语言/关于
   /实时翻译/手写转文本）改为无遮罩胶囊：容器 = .tool-cap，标题行 = .tool-cap-head（拖拽把手），
   关闭按钮 = .tool-cap-close；内层卡片 .sig-dialog 透明化为纯内容容器，宽度沿用其自身的设定。 */
.tool-cap.cap-modal {
  max-width: calc(100vw - 24px);
  max-height: 94vh;
  overflow: auto;
  overscroll-behavior: contain;
}
/* 小屏：胶囊铺满可用宽度，内层卡片改自适应，避免被 .sig-dialog 的 96vw 撑出视口 */
@media (max-width: 768px) {
  .tool-cap.cap-modal { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
  .tool-cap > .cap-body { width: 100% !important; max-width: 100% !important; }
}
/* —— 指定胶囊统一宽度：与画笔设置胶囊（.bs-capsule 320px）一致 ——
   元素属性 / 分享 / 倒计时器 / 实时翻译 / 手写转文本 / 智能点名 / 多人协作 / 云端存储 /
   语言切换 / 计算器；内层卡片改为 100% 自适应填满，避免定宽内容把胶囊撑出容器 */
#countdownPanel.tool-cap,
#rollcallPanel.tool-cap,
#collabPanel.tool-cap,
#cloudPanel.tool-cap,
#langPanel.tool-cap,
#calculatorPanel.tool-cap,
#hcTranslatePanel.tool-cap,
#hcOcrPanel.tool-cap {
  width: 320px;
  max-width: calc(100vw - 24px);
}
#shareModal .cap-body,
#countdownPanel .cap-body,
#rollcallPanel .cap-body,
#collabPanel .cap-body,
#cloudPanel .cap-body,
#langPanel .cap-body,
#hcTranslatePanel .cap-body,
#hcOcrPanel .cap-body {
  width: 100% !important;
  max-width: 100% !important;
}
/* —— 大面板（电磁笔测试 / 电容屏测试 / 电子签名 / 关于）已回归「弹框式」sig-modal：
   宽度由各自 .sig-dialog 的内联 width:min(…px, calc(100vw - 24px)) 控制（同转换器弹窗），
   不再需要胶囊宽度覆盖 —— */
.tool-cap.cap-modal .tool-cap-head {
  position: sticky;
  top: -10px;
  z-index: 2;
  background: var(--card-bg, #fff);
  /* 标题栏下一条虚线分割符（与画笔设置胶囊一致） */
  border-bottom: 1px dashed var(--border, #e2e8f0);
  margin-bottom: 8px;
}
/* 内层卡片透明化：只作为内容容器，外框/阴影交给胶囊外壳，避免出现「卡中卡」 */
.tool-cap > .cap-body {
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
/* 胶囊外壳已有内边距，内容区不再叠加弹窗留白 */
.tool-cap.cap-modal .sig-dialog-body { padding: 0; }
/* 胶囊内按钮沿用原弹窗按钮风格（脱离 .sig-modal/.sig-dialog 作用域后由 .tool-cap 接管） */
.tool-cap .btn {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-md);
}
.tool-cap .btn:hover { background: var(--border-soft); }
.tool-cap .btn.active,
.tool-cap .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.tool-cap .btn-primary:hover { background: var(--accent-strong, var(--accent)); color: #fff; }
/* 标题图标：DIALOG_TITLE_ICONS 注入的 svg.title-icon 与软键盘 .tool-cap-icon 同规格 */
.tool-cap-head > svg.title-icon { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; color: var(--accent, #2563eb); }
body.dark-theme .tool-cap.cap-modal,
body.dark-theme .tool-cap.cap-modal .sig-dialog-body { color: var(--text-2); }
body.dark-theme .tool-cap.cap-modal .tool-cap-head { background: var(--surface); }
body.dark-theme .tool-cap .btn { background: var(--surface-3); border-color: var(--border); color: var(--text-1); }
/* —— 「更多」栏目弹窗胶囊标题栏：普通卡片底 + 深色文字（渐变背景已按需求移除）——
   覆盖本段「更多」栏目 8 个 .tool-cap.cap-modal：分享 / 实时翻译 / 手写转文本 / 倒计时器 /
   智能点名 / 多人协作 / 云端存储 / 语言切换。
   （电磁笔测试 / 电容屏测试 / 电子签名 / 关于已回归「弹框式」sig-modal，标题行改由
     .sig-dialog-title 渐变标题栏渲染，不走本段胶囊样式）
   标题行用负边距抵消外壳 10px/12px 内边距 → 全宽铺满胶囊顶部；顶部圆角由 .cap-modal 的
   overflow:auto 自动裁剪，并覆盖暗黑 / APK 的 surface 底。
   标题与内容之间留一条虚线分割符（与通用 .cap-modal 及画笔设置胶囊同款观感） */
#countdownPanel .tool-cap-head,
#rollcallPanel .tool-cap-head,
#collabPanel .tool-cap-head,
#cloudPanel .tool-cap-head,
#langPanel .tool-cap-head,
#hcTranslatePanel .tool-cap-head,
#hcOcrPanel .tool-cap-head {
  background: var(--surface, var(--card-bg, #fff));
  color: var(--text-1);
  margin: -10px -12px 20px;
  padding: 9px 10px 9px 14px;
  border-bottom: 1px dashed var(--border, #e2e8f0);
  top: 0;
}
/* 内层 .cap-body 原本继承 .sig-dialog 的 overflow:hidden，会裁剪铺满胶囊顶部的标题行 → 放行（仅标题行区域伸出，内部滚动区自带 overflow） */
.tool-cap.cap-modal > .cap-body { overflow: visible !important; /* 动态胶囊(实时翻译/手写转文本)内联 overflow:hidden 需放行 */ }
.tool-cap.cap-modal .tool-cap-head > span,
.tool-cap.cap-modal .tool-cap-head > svg.title-icon { color: var(--text-1); }
/* 关闭按钮恢复默认 .tool-cap-close 观感（白底淡灰钮） */
.tool-cap.cap-modal .tool-cap-head > .tool-cap-close {
  background: var(--border-soft);
  color: var(--text-2, #6b7280);
  border-radius: var(--radius-md);
}
.tool-cap.cap-modal .tool-cap-head > .tool-cap-close:hover { filter: brightness(0.96); color: var(--text-1); }
.tool-cap.cap-modal .tool-cap-head > .tool-cap-close svg { color: var(--text-2, #6b7280); }

/* —— 胶囊内部行布局：与其它弹窗按钮风格一致 —— */
#brushSettingsModal .bs-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#brushSettingsModal .bs-row > .submenu-icon,
#brushSettingsModal .bs-inline-group > .submenu-icon {
  width: 16px; height: 16px; flex: 0 0 16px; margin: 0;
}
#brushSettingsModal .bs-label {
  font-size: 14px; min-width: 36px; flex: 0 0 auto;
}
#brushSettingsModal .bs-row input[type="color"] {
  width: 36px; height: 32px; padding: 0; border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; background: transparent; cursor: pointer;
}
#brushSettingsModal .bs-preset-row {
  display: flex; gap: 4px; flex-wrap: wrap; flex: 1;
}
#brushSettingsModal .bs-preset {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border, #e2e8f0); cursor: pointer; padding: 0;
}
#brushSettingsModal .form-select {
  flex: 1; height: 32px; font-size: 13px; border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0); background: var(--card-bg, #fff); color: var(--text-1, #111);
}
/* 描边编辑器行：线型下拉固定紧凑宽度，把剩余空间留给粗细滑杆 */
/* 描边行：线型下拉收窄（仅展示符号），粗细滑杆吃到更多宽度 */
#brushSettingsModal #bsStrokeStyle {
  flex: 0 0 auto; width: 62px; min-width: 0;
  padding: 0 4px; font-size: 12px;
}
#brushSettingsModal #bsOutlineColor { width: 30px; height: 30px; flex: 0 0 30px; }
#brushSettingsModal #bsOutlineWidth { flex: 1 1 auto; min-width: 34px; }
#brushSettingsModal #bsOutlineWidthVal { width: 3.2em; }
#brushSettingsModal .bs-toggle {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer;
}
#brushSettingsModal .bs-toggle input { width: 16px; height: 16px; cursor: pointer; }
/* 画笔设置滑块（bsPressureLevel / bsWidth / bsOpacity）：仅负责 flex 布局，
   不覆盖 height——轨道/滑块外观统一走全局 input[type='range'] 细渐变轨道+圆形滑块
   规则（与 annotSize / sigSize 同款风格，暗黑模式同样由全局 body.dark-theme 规则接管） */
#brushSettingsModal input[type="range"] {
  flex: 1; min-width: 80px;
}
/* 「压感」「速度」关闭时，其强度滑轨与数值框灰色失灵（disabled） */
#brushSettingsModal .bs-row input[type="range"]:disabled,
#brushSettingsModal .bs-val-in:disabled {
  opacity: .4; cursor: not-allowed;
}
#brushSettingsModal .bs-row > span:not(.bs-label):not(.bs-inline-group) {
  font-size: 12px; min-width: 28px; text-align: right; color: var(--text-2, #6b7280);
}
/* 移动端：胶囊贴左适配小屏，避免遮挡顶部胶囊（不加 !important，保证拖拽内联样式仍生效） */
@media (max-width: 768px) {
  .bs-capsule {
    left: 8px;
    top: 62px;   /* 同 #hintViewer：主胶囊下缘 + 8px（移动端由 JS 按实际下缘校准） */
    transform: none;
    width: calc(100vw - 16px);
    max-width: 320px;
    padding: 6px 10px 10px;
  }
}
/* 移动端胶囊内容较多时可内部滚动（头/体分离，把手保持可见） */
@media (max-width: 768px) {
  .bs-capsule { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
  .bs-capsule-body { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
}
/* —— 胶囊增强区：取色器吸管 / 描边设置 / 编辑工具 / 对齐 / 编组 —— */
#brushSettingsModal .bs-eyedrop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg, #fff);
  border-style: dashed;
}
#brushSettingsModal .bs-eyedrop svg {
  width: 12px; height: 12px; margin: 0;
  color: var(--text-2, #6b7280);
}
#brushSettingsModal .bs-eyedrop:active { transform: scale(0.88); }
#brushSettingsModal .bs-eyedrop.active {
  border-color: var(--accent, #2563eb);
  border-style: solid;
  background: color-mix(in srgb, var(--accent, #2563eb) 14%, transparent);
}
#brushSettingsModal .bs-eyedrop.active svg { color: var(--accent, #2563eb); }
#brushSettingsModal .bs-sec {
  border-top: 1px dashed var(--border, rgba(148, 163, 184, 0.35));
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#brushSettingsModal .bs-sec-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-1, #111);
  user-select: none; -webkit-user-select: none;
}
#brushSettingsModal .bs-sec-title svg {
  width: 14px; height: 14px; margin: 0; flex: 0 0 14px;
  color: var(--accent, #2563eb);
}
#brushSettingsModal .bs-align-grid {
  display: grid;
  /* t8：8 个对齐键（六方向 + 水平/垂直等间距）改为 8×1 单行铺满整行，按钮等宽拉伸 */
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
}
/* 段落对齐七键行（t9）：多行文本段落对齐，7 键等宽铺满整行（无论外层容器为何种布局均强制占满整行宽度） */
#brushSettingsModal #bsParaRow { /* 用 ID 提升优先级：避免其后 #brushSettingsModal .bs-tools-row 的 flex 回绕把 7 键竖排成每行一个 */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
  box-sizing: border-box;
  /* 与上方「字体图标」行（#bsFontPresets）拉开距离，避免两个图标行贴在一起 */
  margin-top: 9px;
}
#brushSettingsModal .bs-para-row .bs-para-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  height: 32px;
  padding: 2px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
#brushSettingsModal .bs-para-row .bs-para-btn svg {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}
/* 悬浮只变底色（与同胶囊其它小方块 .bs-tool-btn 一致）：不改外框色 / 图标色，避免出现蓝色外框 */
#brushSettingsModal .bs-para-row .bs-para-btn:hover {
  background: var(--accent-soft, rgba(37, 99, 235, 0.12));
}
#brushSettingsModal .bs-para-row .bs-para-btn.active {
  border-color: #2563eb;
  background: color-mix(in srgb, #2563eb 14%, transparent);
  color: #2563eb;
}
/* 多行文字输入框（t9：Shift+Enter 换行，textarea 自适应） */
.text-edit-group .inline-text-editor.inline-text-multi {
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  padding: 4px 6px;
}
#brushSettingsModal .bs-align-btn {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--card-bg, #fff);
  color: var(--text-1, #111);
  border-radius: 7px;
  height: 30px;
  min-width: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
#brushSettingsModal .bs-align-btn svg {
  width: 16px; height: 16px; margin: 0;
}
/* 按下才强调外框；悬浮只变底色（与同胶囊其它小方块 .bs-tool-btn 一致），不出现蓝色外框 */
#brushSettingsModal .bs-align-btn:active {
  background: var(--accent-soft, rgba(37, 99, 235, 0.12));
  border-color: var(--accent, #2563eb);
}
#brushSettingsModal .bs-align-btn:hover {
  background: var(--accent-soft, rgba(37, 99, 235, 0.12));
}
/* —— 画笔设置胶囊工具区：「工具」「图形」两节图标平铺 —— */
#brushSettingsModal .bs-tools-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
/* —— 工具分组放大：普通编辑图标保持两行小方块铺排（每行 7 个恰好占满，沿用「7 列」观感）；
       末尾的「倾斜 / 旋转」作为加宽图标按钮，弹性吸收各自行末剩余空间、铺满整行 ——
       「图形」分组仍按上方 flex 自适应 —— */
#brushSettingsModal #bsEditTools.bs-tools-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#brushSettingsModal #bsEditTools .bs-tool-btn {
  width: auto;
  height: 34px;
  flex: 0 0 calc((100% - 30px) / 7);
}
#brushSettingsModal #bsEditTools .bs-tool-btn svg {
  width: 19px;
  height: 19px;
}
#brushSettingsModal #bsEditTools .bs-tool-btn.bs-tool-wide {
  flex: 1 1 0;
  min-width: 0;
}
#brushSettingsModal .bs-tool-btn {
  width: 31px;
  height: 30px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--card-bg, #fff);
  color: var(--text-1, #111);
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
#brushSettingsModal .bs-tool-btn svg {
  width: 16px; height: 16px; margin: 0;
}
#brushSettingsModal .bs-tool-btn:hover {
  background: var(--accent-soft, rgba(37, 99, 235, 0.12));
}
#brushSettingsModal .bs-tool-btn.active {
  background: var(--accent-soft, rgba(37, 99, 235, 0.16));
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
}
#brushSettingsModal .bs-group-btn {
  width: 100%;
  height: 32px;
  border-radius: 8px;
}
/* 从「工具 → 对齐」菜单进入时对「对齐 / 组合」分组短暂高亮提示 */
@keyframes bsFlashBg {
  0%, 100% { background: transparent; }
  30% { background: var(--accent-soft, rgba(37, 99, 235, 0.2)); border-color: var(--accent, #2563eb); }
}
#brushSettingsModal .bs-sec.bs-flash {
  border-radius: 8px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
  animation: bsFlashBg 1.1s ease 2;
}

/* —— 滑轨数值可自主填写：数字改为小输入框，位置不够时压缩滑轨 —— */
.bs-val-wrap { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
#brushSettingsModal .bs-val-in,
.size-opacity-group .bs-val-in,
#bgSettingsModal .bs-val-in {
  width: 4em; min-width: 0; flex: 0 0 auto;
  height: 26px; box-sizing: border-box; padding: 0 2px; text-align: center;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 7px;
  background: var(--card-bg, #fff);
  color: var(--text-1, #111);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
#brushSettingsModal .bs-val-in:focus,
#bgSettingsModal .bs-val-in:focus {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
}
#brushSettingsModal .bs-val-in::-webkit-outer-spin-button,
#brushSettingsModal .bs-val-in::-webkit-inner-spin-button,
#bgSettingsModal .bs-val-in::-webkit-outer-spin-button,
#bgSettingsModal .bs-val-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bs-val-suffix { font-size: 12px; color: var(--text-2, #6b7280); flex: 0 0 auto; }
#brushSettingsModal .bs-row { flex-wrap: nowrap; gap: 6px; }
/* 压感曲线预览框：内嵌在画笔设置「压感」行正下方，默认隐藏，拖动压感条时才出现。
   注意：不要用 absolute/left:100% 之类的「伸出胶囊」定位 —— 那样会盖住画布、拦截指针导致画不了线。 */
.bs-press-pop {
  position: static; width: 100%; margin: 8px 0 2px; box-sizing: border-box;
  padding: 10px 12px 12px;
  background: #f8fafc; color: #1f2937; border: 1px solid #e5e7eb; border-radius: 10px;
}
body.dark-theme .bs-press-pop { background: #1d2026; color: #e7e9ef; border-color: #333842; }
.bs-press-pop[hidden] { display: none; }
.bs-press-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bs-press-pop-title { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; }
.bs-press-pop-close { background: transparent; border: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; color: inherit; opacity: .6; }
.bs-press-pop-close:hover { opacity: 1; }
#bsPressCurveCanvas { display: block; width: 100%; height: 152px; border-radius: 8px; background: #f8fafc; cursor: crosshair; touch-action: none; }
body.dark-theme #bsPressCurveCanvas { background: #14171c; }
.bs-press-pop-hint { margin-top: 6px; font-size: 12px; line-height: 1.5; color: #6b7280; }
body.dark-theme .bs-press-pop-hint { color: #9aa3b2; }
/* 网页端版权与备案页脚：仅纯网页显示（Android/win-desktop/win-native 由内联脚本隐藏）；小字、半透明底、不遮挡画布 */
/* 网页端版权/备案页脚：仿 HintViewer，浅灰小字、透明底、不拦截画布点击；
   定位在下胶囊(exBottomBar, bottom:calc(40px+safe))正下方的留白区，距屏底 8px */
#hcWebFooter { position: fixed; left: 0; right: 0; z-index: 60;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 2px 10px; font-size: 11px; line-height: 1.6; color: #6b7280;
  background: transparent; user-select: none; pointer-events: none; }
#hcWebFooter a { color: #6b7280; text-decoration: none; pointer-events: auto; }
#hcWebFooter a:hover { color: #374151; text-decoration: underline; }
body.dark-theme #hcWebFooter { color: #9aa3b2; }
body.dark-theme #hcWebFooter a { color: #9aa3b2; }
body.dark-theme #hcWebFooter a:hover { color: #cbd5e1; }
/* 收起工具栏 / 全屏模拟 / 批注态：页脚同其它浮动层一并隐藏 */
body.toolbar-hidden #hcWebFooter,
body.fs-emu #hcWebFooter { display: none !important; }
#hcWebFooter[hidden] { display: none; }
/* 「手指 + 游标」合并行：两组「图标+标签+开关」并排（中间细分隔线）；
   文案较长 / 窄屏时自动换行，避免相互挤压变形 */
#brushSettingsModal #bsFingerRow { flex-wrap: wrap; }
#brushSettingsModal #bsFingerRow > .bs-inline-group { display: inline-flex; align-items: center; gap: 6px; }
#brushSettingsModal #bsFingerRow > .bs-inline-group + .bs-inline-group {
  border-left: 1px solid var(--border-soft, #e2e8f0); padding-left: 8px;
}
#brushSettingsModal input[type="range"] { min-width: 30px; }
/* 「抖动」行：无开关占位，滑轨吃掉剩余宽度，保证 0~10 精细拖动的手感 */
#brushSettingsModal #bsJitterRow input[type="range"] { flex: 1 1 auto; min-width: 64px; }
.size-opacity-group label { flex-wrap: nowrap; }
.size-opacity-group .menu-label { flex: 0 0 auto; }

/* —— 四个分组各自「上下」收起：开关置于各分栏标题行最右侧；只收合本栏内容，互不干扰整颗胶囊收缩 —— */
#brushSettingsModal .bs-sec-toggle {
  width: 18px; height: 18px; flex: 0 0 18px;
  margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--text-2, #6b7280);
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.88;
}
#brushSettingsModal .bs-sec-toggle svg {
  width: 13px; height: 13px; margin: 0;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}
#brushSettingsModal .bs-sec-toggle:hover { opacity: 1; color: var(--accent, #2563eb); background: var(--accent-soft, rgba(37, 99, 235, 0.12)); }
#brushSettingsModal .bs-sec.bs-grp-collapsed > .bs-tools-row,
#brushSettingsModal .bs-sec.bs-grp-collapsed > .bs-align-grid,
#brushSettingsModal .bs-sec.bs-grp-collapsed > .bs-sec-body,
#brushSettingsModal .bs-sec.bs-grp-collapsed > .bs-fonts-wrap { display: none; }
/* 修复「工具」分组无法收起：上面 #bsEditTools.bs-tools-row 自带 display:flex（更高优先级）
   会覆盖折叠隐藏规则 → 补一条含 ID 的高优先级隐藏规则（含其它分组内容 ID，防今后同款回归） */
#brushSettingsModal .bs-sec.bs-grp-collapsed > #bsEditTools.bs-tools-row,
#brushSettingsModal .bs-sec.bs-grp-collapsed > #bsShapeTools.bs-tools-row,
#brushSettingsModal .bs-sec.bs-grp-collapsed > #bsFontTools.bs-fonts-wrap,
#brushSettingsModal .bs-sec.bs-grp-collapsed > .bs-align-grid,
#brushSettingsModal .bs-sec.bs-grp-collapsed > .bs-sec-body { display: none; }
#brushSettingsModal .bs-sec.bs-grp-collapsed .bs-sec-toggle svg { transform: rotate(-90deg); }
#brushSettingsModal .bs-sec.bs-grp-collapsed .bs-sec-title { color: var(--text-2, #6b7280); }
/* 折叠开关恒定置于标题行最右侧（源码顺序不影响，排在标题末尾并顶到右缘） */
#brushSettingsModal .bs-sec-title { padding-left: 0; }
#brushSettingsModal .bs-sec-title > .bs-sec-toggle { order: 99; margin-left: auto; }

/* —— 字体 / 文本样式分组（预设字体系列 + 更多字体列表；弹出层仿 HCDRAW 字体选择器） —— */
#brushSettingsModal .bs-fonts-row { gap: 4px; align-items: stretch; }
#brushSettingsModal .bs-font-chip {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 2px 3px; margin: 0;
  border: 1px solid var(--border, #e2e8f0); border-radius: 7px;
  background: transparent; color: var(--text-1, #111); cursor: pointer;
}
#brushSettingsModal .bs-font-chip:hover { background: var(--accent-soft, rgba(37, 99, 235, 0.12)); }
#brushSettingsModal .bs-font-chip.active {
  border-color: var(--accent, #2563eb);
  background: var(--accent-soft, rgba(37, 99, 235, 0.15));
  color: var(--accent, #2563eb);
}
#brushSettingsModal .bs-font-chip#bsFontAllBtn { border-style: dashed; }
#brushSettingsModal .bs-font-chip#bsFontAllBtn.active { border-style: solid; }
#brushSettingsModal .bs-font-chip svg { width: auto; height: 17px; margin: 0; display: block; }
#brushSettingsModal .bs-font-chip svg text { fill: currentColor; }
#brushSettingsModal .bs-font-chip .bs-font-chip-label {
  font-size: 9.5px; line-height: 1.15; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.9;
}
/* 更多字体弹出面板 */
#brushSettingsModal .bs-fonts-wrap { position: relative; }
#brushSettingsModal .bs-fonts-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 9px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  padding: 6px; max-height: 232px; overflow: hidden;
  display: flex; flex-direction: column;
}
.dark-theme #brushSettingsModal .bs-fonts-pop { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); }
/* 关键：面板默认收起——上面的 display:flex 会覆盖 [hidden] 的 display:none，必须显式补回，否则搜索框/字体列表常驻显示、更多字体开关失效 */
#brushSettingsModal .bs-fonts-pop[hidden] { display: none; }
#brushSettingsModal .bs-fonts-search-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; flex: 0 0 auto; }
#brushSettingsModal .bs-fonts-search {
  flex: 1; min-width: 0; height: 26px; box-sizing: border-box;
  border: 1px solid var(--border, #e2e8f0); border-radius: 6px;
  background: transparent; color: var(--text-1, #111); font-size: 12px; padding: 0 6px; outline: none;
}
#brushSettingsModal .bs-fonts-search:focus { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14); }
#brushSettingsModal .bs-fonts-clear {
  width: 22px; height: 22px; padding: 0; border: none; background: transparent;
  color: var(--text-2, #6b7280); font-size: 14px; line-height: 1; cursor: pointer; border-radius: 5px;
}
#brushSettingsModal .bs-fonts-clear:hover { background: var(--accent-soft, rgba(37, 99, 235, 0.12)); color: var(--accent, #2563eb); }
#brushSettingsModal .bs-fonts-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; max-height: 84px; /* 列表仅露出 3 行（行高 26 + 下边距 2 = 28/行），其余内部滚动查看 */ }
#brushSettingsModal .bs-fonts-empty { font-size: 12px; color: var(--text-2, #6b7280); padding: 6px; text-align: center; }
#brushSettingsModal .bs-font-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  height: 26px; padding: 0 6px; margin: 0 0 2px; border: none; background: transparent;
  border-radius: 6px; cursor: pointer; color: var(--text-1, #111); text-align: left;
}
#brushSettingsModal .bs-font-opt:hover { background: var(--accent-soft, rgba(37, 99, 235, 0.12)); }
#brushSettingsModal .bs-font-opt.active { background: var(--accent-soft, rgba(37, 99, 235, 0.16)); color: var(--accent, #2563eb); }
#brushSettingsModal .bs-font-opt .bs-font-sample { width: 64px; flex: 0 0 64px; font-size: 15px; line-height: 1.1; overflow: hidden; white-space: nowrap; }
#brushSettingsModal .bs-font-opt .bs-font-opt-name { font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* —— 线宽滑轨后的可填写数值框（批注 / 浏览器 / 电磁笔含全屏 / 电子签名 通用）；滑轨相应让位缩短 —— */
.mini-num { width: 3.4em; height: 24px; padding: 0 2px; text-align: center; box-sizing: border-box;
  border: 1px solid var(--border, #d0d7de); border-radius: 6px;
  background: var(--card-bg, #fff); color: var(--text-1, #1f2937);
  font-size: 12px; line-height: 1; vertical-align: middle;
  -webkit-appearance: textfield; appearance: textfield; -moz-appearance: textfield; }
.mini-num::-webkit-outer-spin-button,
.mini-num::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.mini-num:focus { outline: 2px solid var(--accent, #2563eb); outline-offset: 0; }
#sigSize { width: 72px !important; }
.wb-bar #wbSize { width: 60px !important; }
#ptFsTools #ptFsSize { width: 52px !important; }
/* 浏览器模块下胶囊：笔刷主菜单只保留主笔刷 SVG 图标，去掉文字 */
#wbBrushBtn .menu-label { display: none; }
/* 拖动画笔设置胶囊贴近画布左右边缘时的提示（松手即自动收进为窄条） */
.bs-capsule.bs-drag-near-edge { outline: 2px dashed var(--accent, #2563eb); outline-offset: 2px; }

/* —— 整颗胶囊「收进为窄条」：按钮固定于标题栏右侧（与分组/内容区无任何叠放，避免截获分组展开收起点击）；收进后由侧缘窄条展开 —— */
.bs-capsule-collapse {
  margin-left: auto;
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  background: var(--border-soft, #eef2f6);
  color: var(--text-2, #6b7280);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  flex-shrink: 0;
}
.bs-capsule-collapse svg { width: 13px; height: 13px; margin: 0; }
.bs-capsule-collapse:hover { color: var(--accent, #2563eb); background: var(--accent-soft, rgba(37, 99, 235, 0.12)); }
.bs-capsule-rail {
  position: fixed;
  z-index: 99989;
  width: 38px;
  padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  box-shadow: var(--card-shadow-hover, var(--card-shadow));
  box-sizing: border-box;
}
.bs-capsule-rail[hidden] { display: none; }
.bs-rail-expand {
  width: 26px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--accent, #2563eb);
  cursor: pointer; border-radius: 9px;
}
.bs-rail-expand svg { width: 14px; height: 14px; margin: 0; transform: rotate(180deg); }
.bs-rail-expand:hover { background: var(--accent-soft, rgba(37, 99, 235, 0.12)); }
/* 拖到画布右半区后：窄条停靠右边缘、展开箭头朝左（收进按钮固定于标题栏右侧，不随停靠侧变化） */
.bs-capsule-rail.bs-rail-right .bs-rail-expand svg { transform: rotate(0deg); }
/* —— 电磁笔测试弹窗（电子签名同款风格） —— */
.pt-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.pt-status { display:flex; align-items:center; gap:8px; font-size:14px; color:#6b7280; min-width:150px; }
.pt-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.pt-dot-on  { background:#10b981; box-shadow:0 0 8px #10b981; }
.pt-dot-hover { background:#f59e0b; box-shadow:0 0 8px #f59e0b; }
.pt-dot-off { background:#ef4444; }
.pt-tools { display:flex; gap:4px; background:#f1f5f9; border-radius:999px; padding:3px; }
.pt-tool-btn { border:0; background:transparent; padding:5px 12px; border-radius:999px; font-size:12px; color:#64748b; cursor:pointer; }
.pt-tool-btn.pt-tool-active { background:#3b82f6; color:#fff; }
.pt-mini { display:flex; align-items:center; gap:6px; font-size:12px; color:#64748b; }
.pt-mini b { font-size:12px; color:#2563eb; min-width:20px; text-align:center; }
.pt-check { display:flex; align-items:center; gap:5px; font-size:12px; color:#64748b; cursor:pointer; }
.pt-flex { flex:1; }
/* 画布区高度自适应：常规屏上限 240px（原 280 固定，是弹窗超 82vh 出现滚动条的主因）；
   视口越矮越收缩（32vh 档），保证弹窗整体不触发纵向滚动条；canvas 像素尺寸由 JS resizeCanvas 同步 */
.pt-canvas-wrap { position:relative; height:clamp(200px, 32vh, 240px); border-radius:10px; overflow:hidden; border:1px solid #e2e8f0;
  background-color:#fff; background-image:radial-gradient(#cbd5e1 1px, transparent 1px); background-size:20px 20px; cursor:crosshair; }
.pt-canvas-wrap.no-grid { background-image:none; }
.pt-canvas-wrap canvas { display:block; width:100%; height:100%; touch-action:none; }
/* 电磁笔测试：画笔点 / 橡皮圈自绘游标（与网页批注层 wb-cursor / 批注 #eraserGuide 同风格）。
   DOM 挂在笔迹区（#ptCanvasWrap）内：常规弹窗与原生/CSS 全屏下均可见（body 级浮层在全屏子树外会消失）。
   画笔=当前色实心点、橡皮=灰色圆环，直径与真实笔迹宽度一致，随滚轮/粗细滑条实时缩放 */
.pt-cursor { position:absolute; left:0; top:0; z-index:6; width:0; height:0;
  border-radius:50%; pointer-events:none; box-sizing:border-box;
  transform:translate(-50%,-50%); opacity:0; }
.pt-cursor.on { opacity:1; }
.pt-cursor.dot { background:currentColor; }
.pt-cursor.ring { border:1px solid #e3e6ea; }
@media (hover: hover){
  /* 自绘游标接管笔迹区后隐藏系统十字光标，避免双光标（同批注/网页批注逻辑） */
  .pt-canvas-wrap.pt-erasing canvas,
  .pt-canvas-wrap.pt-brush canvas { cursor:none !important; }
}
.pt-hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;
  color:#94a3b8; font-size:14px; opacity:.65; transition:opacity .3s; }
.pt-hint.gone { opacity:0; }
.pt-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap:12px; margin-top:12px; }
.pt-metrics { border:1px solid #e2e8f0; border-radius:10px; padding:12px; }
.pt-mrow { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; color:#475569; margin:8px 0 4px; }
.pt-mrow:first-child { margin-top:0; }
.pt-mkey { color:#64748b; }
.pt-mval { color:#2563eb; font-weight:700; }
.mono { font-family:'JetBrains Mono',Consolas,monospace; }
.pt-bar { position:relative; height:10px; background:#e2e8f0; border-radius:999px; overflow:hidden; }
.pt-bar-thin { height:6px; }
.pt-bar > div { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:999px;
  background:linear-gradient(90deg,#38bdf8,#6366f1); transition:width .05s linear; }
.pt-bar > div.pt-bar-red { background:linear-gradient(90deg,#f97316,#ef4444); }
.pt-bar > div.pt-bar-green { background:#10b981; }
.pt-azimuth { position:relative; width:40px; height:40px; border:2px solid #cbd5e1; border-radius:50%; flex:none; }
.pt-azimuth i { position:absolute; left:50%; bottom:50%; width:3px; height:50%; margin-left:-1.5px; background:#ec4899;
  transform-origin:bottom center; transition:transform .05s linear; border-radius:2px; }
.pt-azimuth::after { content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px;
  background:#94a3b8; border-radius:50%; }
.pt-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; font-size:12px; color:#64748b; margin-top:8px; }
.pt-mini-grid b { color:#334155; font-weight:600; }
.pt-logbox { border:1px solid #e2e8f0; border-radius:10px; padding:10px 12px; display:flex; flex-direction:column;
  /* height:0 + min-height:100%：自身不参与 grid 行高计算，行高完全由左侧 pt-metrics 决定，两栏高度严格一致 */
  height:0; min-height:100%; }
.pt-loghead { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#64748b; margin-bottom:6px; }
.pt-loghead a { color:#2563eb; cursor:pointer; }
/* 日志区填满 pt-logbox 剩余空间：高度=pt-metrics 高度-标题行，可显示条数对应增加 */
.pt-log { flex:1 1 auto; min-height:0; overflow-y:auto; font-size:11px; line-height:1.7; color:#64748b;
  background:#f8fafc; border-radius:8px; padding:6px 8px; }
.pt-log .pt-log-down { color:#059669; }
.pt-log .pt-log-up { color:#d97706; }
@media (max-width:640px){ .pt-grid { grid-template-columns:1fr; } .pt-status{min-width:0;}
  /* 单列布局：日志区不再跟随 metrics，给固定高度便于滚动 */
  .pt-logbox { height:auto; min-height:0; } .pt-log { min-height:120px; max-height:240px; } }
/* —— 电容屏测试弹窗（参考 Capacitive Touch Diagnostic Tool） —— */
.cap-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.cap-grid { display:grid; grid-template-columns:1fr 270px; gap:12px; }
.cap-canvas-wrap { position:relative; height:360px; border-radius:10px; overflow:hidden; border:1px solid #e2e8f0;
  background-color:#0f172a; cursor:crosshair; touch-action:none;
  background-image:linear-gradient(rgba(51,65,85,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(51,65,85,.55) 1px, transparent 1px);
  background-size:50px 50px; }
.cap-canvas-wrap.no-grid { background-image:none; }
.cap-canvas-wrap canvas { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none; }
.cap-points-layer { position:absolute; inset:0; pointer-events:none; }
.cap-touch-point { position:absolute; width:40px; height:40px; border-radius:50%; border:2px solid #38bdf8;
  transform:translate(-50%,-50%); pointer-events:none; box-shadow:0 0 15px rgba(56,189,248,.5);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; }
.cap-side { display:flex; flex-direction:column; gap:10px; min-height:0; }
.cap-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cap-stat { border:1px solid #e2e8f0; border-radius:10px; padding:10px; }
.cap-stat-k { font-size:12px; color:#64748b; }
.cap-stat-v { font-size:20px; font-weight:700; color:#0891b2; }
.cap-loghead { font-size:12px; color:#64748b; }
.cap-stream { flex:1; min-height:230px; max-height:320px; overflow-y:auto; font-size:12px; color:#64748b;
  background:#f8fafc; border-radius:8px; padding:8px; }
.cap-stream .cap-item { background:#fff; border:1px solid #e2e8f0; border-left-width:3px; border-radius:8px; padding:6px 8px; margin-bottom:6px; }
.cap-item-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }
.cap-item-id { font-weight:700; color:#334155; }
.cap-item-type { font-size:10px; background:#e2e8f0; border-radius:4px; padding:1px 5px; color:#475569; }
.cap-item-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 8px; }
.cap-empty { text-align:center; color:#94a3b8; padding:20px 0; }
.cap-opts { display:flex; gap:16px; align-items:center; }
/* —— 电容屏测试全屏模式：画布窗口（capCanvas 所在区域）铺满整屏，自适应移动端 —— */
.cap-exit-fs { position:absolute; top:12px; right:12px; z-index:6; display:none; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(15,23,42,.62);
  color:#e2e8f0; font-size:12px; cursor:pointer; backdrop-filter:blur(6px); }
.cap-exit-fs:hover { background:rgba(15,23,42,.88); }
/* 全屏右上角工具组（清除轨迹 + 退出）：容器负责定位与显隐，两个按钮横向排列随内容自适应宽度，
   避免不同语言下「退出」文案变长后与「清除轨迹」重叠 */
.cap-fs-actions { position:absolute; top:12px; right:12px; z-index:6; display:none; align-items:center; gap:8px; }
.cap-canvas-wrap:fullscreen .cap-fs-actions,
.cap-canvas-wrap.cap-fs-css .cap-fs-actions { display:flex; }
/* 组内按钮取消自身的绝对定位（由容器统一布局） */
.cap-canvas-wrap .cap-fs-actions .cap-exit-fs { position:static; display:flex; margin:0; white-space:nowrap; }
/* 全屏 = 以「全屏视口」为准铺满整屏：inset:0 + width/height:100%（不用 100vw/100vh——
   100vw 含滚动条宽度、移动端 100vh 含地址栏高度，都会让全屏层与真实显示区不一致而露边/裁切）。
   画布同步 width/height:100%，缓冲像素由 JS 按同一可视区重算（不依附小窗口/画布尺寸）。 */
.cap-canvas-wrap:fullscreen { inset:0; width:100%; height:100%; max-width:none; max-height:none;
  border-radius:0; border:none; }
.cap-canvas-wrap:fullscreen .cap-exit-fs { display:flex; }
.cap-canvas-wrap:fullscreen canvas,
.cap-canvas-wrap.cap-fs-css canvas { width:100%; height:100%; }
/* 移动端回退（iPhone Safari 等不支持 Fullscreen API 时）：fixed 定位铺满视口 */
.cap-canvas-wrap.cap-fs-css { position:fixed; inset:0; z-index:2147483640; width:100%; height:100%;
  max-width:none; max-height:none; border-radius:0; border:none; }
.cap-canvas-wrap.cap-fs-css .cap-exit-fs { display:flex; }
/* 退出按钮 SVG 跟随按钮文字颜色：.submenu-icon 的 color:var(--text-1) 会覆盖按钮自身浅色前景，
   使深色画布上图标与文字颜色不一致（图标近似隐形） */
.cap-canvas-wrap .cap-exit-fs svg { color: inherit !important; }
/* —— 电子签名全屏模式（同电容屏测试全屏）：书写区铺满屏幕可视区，右上角 ✕ 关闭按钮退出全屏 ——
   与 .cap-canvas-wrap 同一套机制：优先原生 Fullscreen API；不支持时回退 CSS 类 .sig-fs-css 铺满视口。
   视觉与小弹窗保持一致：透明底棋盘格（background-image 沿用小弹窗那套）+ 笔色实心点游标；
   仅补 background-color:#ffffff 让棋盘格透出的部分为白（原生全屏 ::backdrop 默认黑，否则透明格变黑）。
   画布本身仍不填任何底色，导出依旧是透明 PNG。 */
.sig-exit-fs { position:absolute; top:12px; right:12px; z-index:6; display:none; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(15,23,42,.62);
  color:#e2e8f0; font-size:12px; cursor:pointer; backdrop-filter:blur(6px); }
.sig-exit-fs:hover { background:rgba(15,23,42,.88); }
.sig-canvas-wrap:fullscreen { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  border-radius:0; border:none; background-color:#ffffff; }
.sig-canvas-wrap:fullscreen .sig-exit-fs { display:flex; }
.sig-canvas-wrap:fullscreen canvas,
.sig-canvas-wrap.sig-fs-css canvas { width:100%; height:100%; }
/* 移动端回退（iPhone Safari 等不支持 Fullscreen API 时）：fixed 定位铺满视口 */
.sig-canvas-wrap.sig-fs-css { position:fixed; inset:0; z-index:2147483640; width:100%; height:100%;
  max-width:none; max-height:none; border-radius:0; border:none; background-color:#ffffff; }
.sig-canvas-wrap.sig-fs-css .sig-exit-fs { display:flex; }
/* 退出按钮 SVG 跟随按钮文字颜色（否则 .submenu-icon 的深色前景在深色按钮上近似隐形） */
.sig-canvas-wrap .sig-exit-fs svg { color: inherit !important; }
/* —— 电子签名「全屏模式」工具胶囊：颜色 / 线宽 / 三合一橡皮 / 回放 / 插入 / 保存。
       复用 .pt-fs-tools 的胶囊底与紧凑规则（同批注模式工具栏）；因签名全屏画布是纯白底，
       胶囊底改为近实白以保证控件可读；可整体拖动（见 JS），移动端/APK 仅保留图标。 —— */
.sig-canvas-wrap:fullscreen .pt-fs-tools, .sig-canvas-wrap.sig-fs-css .pt-fs-tools { display:flex; }
#sigFsTools { background:rgba(255,255,255,.95); flex-wrap:nowrap !important; max-width:calc(100vw - 16px) !important; }
#sigFsTools .annot-drag-grip { display:inline-flex; align-items:center; justify-content:center; align-self:stretch;
  min-width:22px; width:22px; margin:0 2px 0 0; border-radius:4px; color:#8b93a7;
  border-right:1px solid rgba(148,163,184,.45); cursor:grab; touch-action:none;
  -webkit-user-select:none; user-select:none; }
#sigFsTools .annot-drag-grip svg { width:16px; height:16px; }
#sigFsTools .annot-drag-grip:hover { color:#475569; background:rgba(127,127,127,.14); }
#sigFsTools .annot-drag-grip:active { cursor:grabbing; }
#sigFsTools input[type="color"] { -webkit-appearance:none; appearance:none; width:30px; height:30px; padding:0;
  flex:none; border:none; border-radius:50%; background:transparent; overflow:hidden; cursor:pointer; }
#sigFsTools input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
#sigFsTools input[type="color"]::-webkit-color-swatch { border:2px solid #e5e7eb; border-radius:50%; }
#sigFsTools input[type="color"]::-moz-color-swatch { border:2px solid #e5e7eb; border-radius:50%; }
#sigFsTools input[type="range"] { width:72px !important; min-width:48px !important; height:28px; margin:0;
  flex:none; vertical-align:middle; accent-color:#2563eb; }
#sigFsTools .btn { display:inline-flex; align-items:center; gap:5px; flex:none; height:34px; min-height:34px;
  padding:0 12px; border:1px solid #e2e8f0; border-radius:999px; background:#fff; color:#334155;
  box-shadow:0 1px 2px rgba(15,23,42,.06); font-size:13px; line-height:1; cursor:pointer; }
#sigFsTools .btn:hover { background:#f1f5f9; }
#sigFsTools .btn svg { width:16px; height:16px; margin:0; margin-right:2px; flex:none; display:initial; color:inherit !important; }
#sigFsTools .btn .menu-label { font-size:13px; line-height:1; white-space:nowrap; }
#sigFsTools .multi-slide-container { min-width:118px; height:32px; background-color:#fff; background-image:none; border-color:#e2e8f0; }
#sigFsTools .multi-slide-container .status-text { color:#64748b; font-size:12px; }
#sigFsTools .multi-slide-container .slide-knob { background-image:var(--gradient-accent); box-shadow:0 2px 6px var(--accent-glow); }
#sigFsTools .multi-slide-container.active { border-color:#93c5fd; background-color:#dbeafe; background-image:linear-gradient(180deg,#dbeafe 0%,#bfdbfe 100%); }
#sigFsTools .multi-slide-container.active .status-text { color:#1d4ed8; }
#sigFsTools .multi-slide-container.active .slide-knob { background-image:linear-gradient(135deg,#ff7875,#ff4d4f); box-shadow:0 2px 5px rgba(255,77,79,.35); }
#sigFsTools .multi-slide-container.armed { border-color:#fca5a5; background-color:#fee2e2; background-image:linear-gradient(180deg,#fee2e2 0%,#fecaca 100%); }
#sigFsTools .multi-slide-container.armed .status-text { color:#b91c1c; }
#sigFsTools .multi-slide-container.armed .slide-knob { background-image:linear-gradient(135deg,#f97316,#ea580c); box-shadow:0 2px 5px rgba(234,88,12,.4); }
#sigFsTools .multi-slide-container.clearing { border-color:#6ee7b7; background-color:#d1fae5; background-image:linear-gradient(180deg,#ecfdf5 0%,#d1fae5 100%); }
#sigFsTools .multi-slide-container.clearing .status-text { color:#047857; }
#sigFsTools .multi-slide-container.clearing .slide-knob { background-image:linear-gradient(135deg,#34d399,#059669); box-shadow:0 2px 5px rgba(5,150,105,.35); }
/* 移动端 / APK：带图标的按钮只留图标，控件再收紧（与全屏批注胶囊同策略）；
   三合一「画笔/橡皮擦」在此【不显示滑动轨道】——收成一颗与选色器同款的圆球按钮
   （点按即切换；配套 JS 在圆球态下同时关闭「右滑清空」，避免误触清掉签名）。
   web 端与 EXE 端保持原来的滑块 + 右滑清空，不受影响。 */
@media (max-width: 640px) {
  #sigFsTools .btn:has(> svg) > .menu-label { display:none !important; }
  #sigFsTools .btn:has(> svg) { padding:0 9px !important; }
  #sigFsTools input[type="range"] { width:58px !important; }
  #sigFsTools .multi-slide-container { min-width:34px !important; width:34px !important;
    height:34px !important; min-height:34px !important; padding:0 !important;
    border-radius:50% !important; justify-content:center !important; overflow:visible !important; }
  #sigFsTools .multi-slide-container .status-text { display:none !important; }
  #sigFsTools .multi-slide-container .slide-knob { width:26px !important; height:26px !important;
    line-height:26px !important; font-size:12px !important; margin:0 !important;
    transform:none !important; }
  #sigFsTools .multi-slide-container .slide-knob > svg { width:15px !important; height:15px !important; }
}
body.apk #sigFsTools .btn:has(> svg) > .menu-label { display:none !important; }
body.apk #sigFsTools .btn:has(> svg) { padding:0 9px !important; }
body.apk #sigFsTools input[type="range"] { width:58px !important; }
body.apk #sigFsTools .multi-slide-container { min-width:34px !important; width:34px !important;
  height:34px !important; min-height:34px !important; padding:0 !important;
  border-radius:50% !important; justify-content:center !important; overflow:visible !important; }
body.apk #sigFsTools .multi-slide-container .status-text { display:none !important; }
body.apk #sigFsTools .multi-slide-container .slide-knob { width:26px !important; height:26px !important;
  line-height:26px !important; font-size:12px !important; margin:0 !important;
  transform:none !important; }
body.apk #sigFsTools .multi-slide-container .slide-knob > svg { width:15px !important; height:15px !important; }
/* —— 电磁笔测试全屏模式（同电容屏测试）：笔迹区铺满整屏，含 APK CSS 类回退 —— */
.pt-canvas-wrap:fullscreen { inset:0; width:100%; height:100%; max-width:none; max-height:none;
  border-radius:0; border:none; }
.pt-canvas-wrap:fullscreen canvas { width:100%; height:100%; }
.pt-canvas-wrap.pt-fs-css { position:fixed; inset:0; z-index:2147483640; width:100%; height:100%;
  max-width:none; max-height:none; border-radius:0; border:none; margin:0; }
.pt-canvas-wrap.pt-fs-css canvas { width:100%; height:100%; }
/* 全屏遥测胶囊：居中靠上 + 浅色玻璃胶囊（同小窗口遥测面板白底 / 主画布胶囊 pill 样式）；
   左侧拽手可自由拖动（拖拽后 JS 写 left/top 并取消居中 transform），退出按钮内嵌胶囊右侧。
   不再 pointer-events:none —— 胶囊本身可点击/拖动；数值更新仍走 ptHudX/ptHudP 等 id */
.pt-fs-hud { position:absolute; top:calc(26px + env(safe-area-inset-top, 0px)); left:50%; transform:translateX(-50%);
  z-index:7; display:none; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:4px 8px; max-width:min(96vw,1040px); padding:5px 8px;
  border-radius:999px; background:rgba(255,255,255,.1);
  border:1px solid rgba(226,232,240,.55); box-shadow:0 4px 14px rgba(15,23,42,.10), 0 12px 40px rgba(15,23,42,.16);
  color:#334155; font-size:13px; line-height:1; text-align:left;
  user-select:none; -webkit-user-select:none; touch-action:none; }
.pt-canvas-wrap:fullscreen .pt-fs-hud, .pt-canvas-wrap.pt-fs-css .pt-fs-hud { display:flex; }
/* 拽手：拖动整颗胶囊（与批注栏 drag grip 同款圆点手柄） */
.pt-fs-hud .pt-fs-grip { display:inline-flex; align-items:center; justify-content:center; align-self:stretch;
  min-width:24px; width:24px; margin:0 2px 0 0; border-radius:999px;
  color:#94a3b8; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; }
.pt-fs-hud .pt-fs-grip svg { width:16px; height:16px; }
.pt-fs-hud .pt-fs-grip:hover { color:#475569; background:#f1f5f9; }
.pt-fs-hud .pt-fs-grip:active { cursor:grabbing; }
/* 遥测项：单字母徽标 + 全称 + 数值（配色同小窗口遥测卡片） */
.pt-fs-hud .pt-hc { display:inline-flex; align-items:center; gap:6px; color:#64748b; font-weight:600; letter-spacing:.4px; }
.pt-fs-hud .pt-hc i { font-style:normal; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:6px; background:#eef2ff; color:#6366f1;
  font-weight:800; font-size:11px; font-family:Consolas,"SF Mono","Cascadia Code",monospace; }
.pt-fs-hud .pt-hc u { text-decoration:none; color:#64748b; font-size:12px; font-weight:500; letter-spacing:.5px; }
.pt-fs-hud .pt-hc b { color:#2563eb; font-weight:700; min-width:34px;
  font-family:Consolas,"SF Mono","Cascadia Code",monospace; letter-spacing:0; }
/* 顶部遥测胶囊只保留数值：退出全屏统一走底部工具胶囊的「退出」按钮（见下方 .pt-fs-tools） */
/* —— 全屏去黑边：html/body 露出的区域与画布同色系，杜绝上方黑边（画布/批注/电磁笔/电容屏通用） —— */
html:fullscreen { background:#f8fafc; overflow:hidden; }
html:fullscreen body { background:#f8fafc; overflow:hidden; }
html:fullscreen body.dark-theme { background:#0f172a; }
.pt-canvas-wrap:fullscreen, .pt-canvas-wrap.pt-fs-css {
  background-color:#fff; background-image:radial-gradient(#cbd5e1 1px, transparent 1px); background-size:20px 20px; }
/* —— 全屏底部工具胶囊 = 「批注模式工具栏」移植：拖拽把手 + 圆形选色 + 粗细滑杆 +
       画笔/橡皮三合一滑块（点击切换 / 右滑清空）+ 保存/退出（批注栏同款控件与交互）。
       胶囊底同顶部遥测胶囊 = 10% 白透明（去磨砂模糊，点阵与笔迹真实透出），
       内部控件各自带白底保证可点可读（此处用 #ptFsTools 高特异性强制亮色，暗色主题下不变） —— */
.pt-fs-tools { position:absolute; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%);
  z-index:7; display:none; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
  max-width:min(96vw,920px); padding:6px 10px;
  border-radius:999px; background:rgba(255,255,255,.1);
  border:1px solid rgba(226,232,240,.55); box-shadow:0 4px 14px rgba(15,23,42,.10), 0 12px 40px rgba(15,23,42,.16);
  color:#334155; font-size:13px; line-height:1; text-align:left; user-select:none; -webkit-user-select:none;
  touch-action:none; }
.pt-canvas-wrap:fullscreen .pt-fs-tools, .pt-canvas-wrap.pt-fs-css .pt-fs-tools { display:flex; }
/* 拖拽把手：与批注栏 annot-drag-grip 同款（右侧细分隔线 + 圆点手柄） */
#ptFsTools .annot-drag-grip { display:inline-flex; align-items:center; justify-content:center; align-self:stretch;
  min-width:22px; width:22px; margin:0 2px 0 0; border-radius:4px;
  color:#8b93a7; border-right:1px solid rgba(148,163,184,.45);
  cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; }
#ptFsTools .annot-drag-grip svg { width:16px; height:16px; }
#ptFsTools .annot-drag-grip:hover { color:#475569; background:rgba(127,127,127,.12); }
#ptFsTools .annot-drag-grip:active { cursor:grabbing; }
/* 圆形选色板：与批注栏同款（圆点色块，外圈细边） */
#ptFsTools input[type="color"] { -webkit-appearance:none; appearance:none; width:30px; height:30px; padding:0; flex:none;
  border:none; border-radius:50%; background:transparent; overflow:hidden; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease; }
#ptFsTools input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
#ptFsTools input[type="color"]::-webkit-color-swatch { border:2px solid #e5e7eb; border-radius:50%; }
#ptFsTools input[type="color"]::-moz-color-swatch { border:2px solid #e5e7eb; border-radius:50%; }
@media (hover: hover) {
  #ptFsTools input[type="color"]:hover { transform:scale(1.1); box-shadow:var(--ring); }
}
/* 粗细滑杆（批注栏布局：无文字标签，仅 title 提示） */
#ptFsTools input[type="range"] { width:70px; height:28px; margin:0; flex:none; vertical-align:middle; accent-color:#2563eb; }
/* 操作按钮：批注栏 .btn 同款（白底补可见外框）；退出为红色文字。
   按钮带 SVG 图标（保存=软盘、退出=退出全屏），与全站按钮「图标 + 文字」一致 */
#ptFsTools .btn { display:inline-flex; align-items:center; gap:5px; flex:none;
  border:1px solid #e2e8f0; background:#fff; color:#334155; box-shadow:0 1px 2px rgba(15,23,42,.06); }
#ptFsTools .btn:hover { background:#f1f5f9; }
#ptFsTools .btn svg { width:15px; height:15px; margin:0; flex:none; display:initial; }
#ptFsTools .btn .menu-label { display:inline; line-height:1; }
#ptFsTools .btn.pt-fs-exit { color:#ff4d4f; }
#ptFsTools .btn.pt-fs-exit:hover { color:#ef4444; background:#fef2f2; }
/* 三合一滑块：胶囊固定浅色，状态色沿用批注栏亮色方案（暗色主题 override 被 #ptFsTools 特异性压过） */
#ptFsTools .multi-slide-container { background-color:#fff; background-image:none; border-color:#e2e8f0; }
#ptFsTools .multi-slide-container .status-text { color:#64748b; }
#ptFsTools .multi-slide-container .slide-knob { background-image:var(--gradient-accent); box-shadow:0 2px 6px var(--accent-glow); }
#ptFsTools .multi-slide-container.active { border-color:#93c5fd; background-color:#dbeafe; background-image:linear-gradient(180deg,#dbeafe 0%,#bfdbfe 100%); }
#ptFsTools .multi-slide-container.active .status-text { color:#1d4ed8; }
#ptFsTools .multi-slide-container.active .slide-knob { background-image:linear-gradient(135deg,#ff7875,#ff4d4f); box-shadow:0 2px 5px rgba(255,77,79,.35); }
#ptFsTools .multi-slide-container.armed { border-color:#fca5a5; background-color:#fee2e2; background-image:linear-gradient(180deg,#fee2e2 0%,#fecaca 100%); }
#ptFsTools .multi-slide-container.armed .status-text { color:#b91c1c; }
#ptFsTools .multi-slide-container.armed .slide-knob { background-image:linear-gradient(135deg,#f97316,#ea580c); box-shadow:0 2px 5px rgba(234,88,12,.4); }
#ptFsTools .multi-slide-container.clearing { border-color:#6ee7b7; background-color:#d1fae5; background-image:linear-gradient(180deg,#ecfdf5 0%,#d1fae5 100%); }
#ptFsTools .multi-slide-container.clearing .status-text { color:#047857; }
#ptFsTools .multi-slide-container.clearing .slide-knob { background-image:linear-gradient(135deg,#34d399,#059669); box-shadow:0 2px 5px rgba(5,150,105,.35); }
/* —— 扩展 → 浏览器：网址输入胶囊（玻璃浮层，与整体视觉一致；默认隐藏，仅点「浏览器」显示） —— */
/* 外框与主工具栏 .ex-topwrap 同款：padding 4px / 圆角 --radius-card / 卡片背景 / 组内控件 36px 高 */
.url-bar { position:fixed; top:calc(64px + env(safe-area-inset-top, 0px)); left:50%;
  transform:translateX(-50%); z-index:2147483000;
  display:inline-flex; align-items:center; gap:4px; max-width:min(92vw,560px);
  padding:4px; border-radius:var(--radius-card);
  background:var(--card-bg); box-shadow:var(--card-shadow); }
/* 关键修复：.url-bar 自带 display:flex 会覆盖 [hidden]，必须用 [hidden] 显式隐藏，
   保证「不使用浏览器模块时不显示」；JS 打开时会把胶囊定位到主画布上胶囊下缘，此处 top 仅为兜底值 */
.url-bar[hidden] { display:none !important; }
.url-bar > svg { width:18px; height:18px; flex:none; margin:0 6px; color:var(--text-2,#8b93a7); }
/* 网址输入框：与 .ex-topwrap 内控件同规格（36px 高 / 13px 字号 / --radius-md 圆角） */
.url-bar input { min-width:180px; flex:1 1 auto; height:36px; line-height:36px; box-sizing:border-box;
  background:transparent; border:0; border-radius:var(--radius-md); outline:none;
  color:var(--text-1); font-size:13px; padding:0 10px; }
.url-bar input::placeholder { color:var(--text-2,#8b93a7); opacity:.85; }
/* 打开按钮：主胶囊同款风格（SVG 图标 + 文字，36px 方块；带可见按钮框，hover 加深） */
.url-bar .btn { display:inline-flex; align-items:center; gap:6px; flex:none; height:36px;
  padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--card-bg,#fff); color:var(--text-1); font-size:13px; cursor:pointer;
  transition:background .12s ease, transform .1s ease; }
.url-bar .btn:hover { background:var(--border-soft); border-color:var(--border-strong,var(--border)); }
.url-bar .btn:active { background:var(--selected-bg); color:var(--selected-fg); transform:scale(.96); }
.url-bar .btn > svg { width:18px; height:18px; margin-right:4px; flex:none; display:initial; }
.url-bar .btn .menu-label { display:inline; line-height:1; }
.url-bar .url-bar-close { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; border-radius:var(--radius-md); border:1px solid transparent; background:transparent;
  color:var(--text-2,#8b93a7); cursor:pointer; }
.url-bar .url-bar-close:hover { background:var(--border-soft,rgba(127,127,127,.12)); color:var(--text-1); }
.url-bar .url-bar-close svg { width:16px; height:16px; }
/* 与主胶囊互不排斥：收起上胶囊（toolbar-hidden）时只要浏览器模块还在使用中就不隐藏；
   仅在全屏批注（画面被批注层接管）等确实不使用本模块时隐藏 */
body.annotating .url-bar { display:none !important; }

/* —— 扩展 → 浏览器：网页浏览 + 自由批注层（iframe 网页 + 透明批注画布 + 浮动工具条） —— */
#wbLayer { position:fixed; inset:0; z-index:2147482500; display:flex; flex-direction:column;
  background:var(--bg,#ffffff); }
#wbLayer[hidden] { display:none !important; }
.wb-top { display:flex; align-items:center; gap:6px; flex:none; flex-wrap:nowrap;
  padding:calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
  background:var(--surface-glass); border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px) saturate(1.6); -webkit-backdrop-filter:blur(14px) saturate(1.6); }
.wb-top > svg { width:18px; height:18px; flex:none; margin:0 6px; color:var(--text-2,#8b93a7); }
/* 网址输入框：与 .ex-topwrap 内控件同规格（36px 高 / 13px 字号 / --radius-md 圆角） */
.wb-top .wb-url { flex:1 1 auto; min-width:90px; height:36px; padding:0 10px; border-radius:var(--radius-md);
  box-sizing:border-box; border:1px solid var(--border); background:var(--card-bg,#fff); color:var(--text-1); font-size:13px; outline:none; }
.wb-top .btn, .wb-bar .btn { display:inline-flex; align-items:center; gap:6px; flex:none; height:36px;
  padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--card-bg,#fff); color:var(--text-1); font-size:13px; cursor:pointer; white-space:nowrap;
  transition:background .12s ease, transform .1s ease, border-color .12s ease; }
.wb-top .btn:hover, .wb-bar .btn:hover { background:var(--border-soft); border-color:var(--border-strong,var(--border)); }
.wb-top .btn:active, .wb-bar .btn:active { transform:scale(.96); }
.wb-top .btn > svg, .wb-bar .btn > svg { width:18px; height:18px; margin-right:4px; flex:none; display:initial; }
.wb-body { position:relative; flex:1 1 auto; min-height:0; overflow:hidden; }
#wbFrame { position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff; display:block; }
/* 批注画布：浏览态(pointer-events:none)不拦截网页点击；批注态接管指针用于书写 */
#wbCanvas { position:absolute; inset:0; width:100%; height:100%; display:block;
  touch-action:none; -webkit-user-select:none; user-select:none; }
#wbCanvas.wb-pass { pointer-events:none; }
#wbCanvas.wb-pen { cursor:crosshair; }
#wbCanvas.wb-erase { cursor:none; }
/* 底部浮动批注工具条（玻璃胶囊，可拖动；外框与 .ex-topwrap 同款，组内控件 36px 高） */
.wb-bar { position:absolute; left:50%; bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:4px;
  max-width:96vw; flex-wrap:wrap; justify-content:center;
  padding:4px 8px; border-radius:var(--radius-card);
  background:var(--surface-glass); border:1px solid var(--border); box-shadow:var(--shadow-2);
  backdrop-filter:blur(14px) saturate(1.6); -webkit-backdrop-filter:blur(14px) saturate(1.6); }
.wb-bar .btn.wb-active { background:var(--accent); border-color:var(--accent); color:#fff; }
.wb-bar .wb-grip { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:22px; height:36px; border-radius:var(--radius-md); color:var(--text-2,#8b93a7); cursor:grab; }
.wb-bar .wb-grip:active { cursor:grabbing; }
.wb-bar .wb-grip svg { width:18px; height:18px; }
.wb-bar input[type="range"] { width:92px; height:36px; flex:none; vertical-align:middle; }
.wb-bar input[type="color"] { -webkit-appearance:none; appearance:none; flex:none;
  width:28px; height:28px; padding:0; border:1px solid var(--border); border-radius:50%;
  overflow:hidden; background:none; cursor:pointer; }
.wb-bar input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.wb-bar input[type="color"]::-webkit-color-swatch { border:none; border-radius:50%; }
.wb-bar input[type="color"]::-moz-color-swatch { border:none; border-radius:50%; }
.wb-sep { width:1px; height:20px; flex:none; background:var(--border); }

/* ===== 电磁笔测试全屏胶囊（上遥测 / 下工具）与浏览器下胶囊：统一胶囊格式 =====
   规则：紧凑内距 + 控件 34px 触控高度 + 图标 16px + 内容超宽横向滚动 + 单排不换行；
   位置（top/bottom）保持各端原值，仅由下方「移动端 / APK」规则按安全区再收紧。
   说明：这些规则不放在 @media 内，APK（WebView 宽度常 >768px）同样生效。 */
/* 整颗胶囊（含空白处）均为 JS 拖拽目标（setupFsPillDrag：pointerdown 任意处起拖 + touch-action:none 原规则保证触摸可拖），
   故此处刻意【不】覆写 touch-action / flex-wrap / overflow —— 否则触摸拖动会被浏览器滚动抢占而失效。
   只做「更紧凑 + 控件触控友好」的格式压缩，内容超宽时仍按原 flex-wrap 换行显示。 */
.pt-fs-hud, .pt-fs-tools {
  gap: 6px !important;
  max-width: min(96vw, 760px) !important;
  padding: 5px 8px !important;
}
.pt-fs-hud .pt-fs-grip, #ptFsTools .annot-drag-grip {
  min-width: 22px !important; width: 22px !important; margin: 0 2px 0 0 !important;
  touch-action: none !important;               /* 拽手自身保持 none，拖拽手势不被浏览器接管 */
}
.pt-fs-hud .pt-fs-grip svg, #ptFsTools .annot-drag-grip svg { width: 16px !important; height: 16px !important; }
.pt-fs-hud .pt-hc { gap: 4px !important; white-space: nowrap !important; }
.pt-fs-hud .pt-hc i { width: 18px !important; height: 18px !important; font-size: 10px !important; }
.pt-fs-hud .pt-hc u { font-size: 11px !important; }
.pt-fs-hud .pt-hc b { min-width: 30px !important; font-size: 12px !important; }
#ptFsTools .btn, .wb-bar .btn {
  height: 34px !important; min-height: 34px !important;
  padding: 0 10px !important; font-size: 13px !important;
}
#ptFsTools .btn svg, .wb-bar .btn > svg { width: 16px !important; height: 16px !important; margin-right: 2px !important; }
#ptFsTools input[type="color"], .wb-bar input[type="color"] { width: 28px !important; height: 28px !important; }
#ptFsTools input[type="range"] { width: 60px !important; height: 30px !important; }
#ptFsTools .multi-slide-container { min-width: 112px !important; height: 30px !important; }
#ptFsTools .multi-slide-container .status-text { font-size: 12px !important; }
/* ===== 全屏(上/下胶囊) 与 浏览器批注胶囊：移动端 & APK 锁定单行高度 ===== */
@media (max-width: 768px) {
  .pt-fs-hud, .pt-fs-tools, .wb-bar { flex-wrap: nowrap !important; overflow-x: auto !important; }
}
body.apk .pt-fs-hud, body.apk .pt-fs-tools, body.apk .wb-bar { flex-wrap: nowrap !important; }
/* 笔刷弹层向上弹出：容器一旦出现 overflow 就会把弹层裁掉 —— APK / 窄屏下表现为「点不开笔刷栏」。
   .wb-bar 改回 visible（靠 max-width:96vw 约束宽度，不再用横向滚动裁剪）。 */
.wb-bar { overflow: visible !important; }
/* APK：浏览器模块上胶囊不显示「新窗口」「全屏」两个图标，其它端保持不变 */
body.apk #wbNewTab, body.apk #wbFsBtn { display: none !important; }
/* 下胶囊收起态：只留拖拽把手（轻点把手收起 / 展开） */
.wb-bar.wb-collapsed > *:not(.wb-grip) { display: none !important; }
/* 通用收起态：所有带把手的工具栏轻点把手后只留把手本体（.hc-grip 由脚本标记） */
.hc-grip-collapsed > *:not(.hc-grip) { display: none !important; }
/* 空间不足放不下"图标+文字"时：工具栏按钮仅显示 SVG 图标，单行即可排下全部功能 */
@media (max-width: 640px) {
  #ptFsTools .btn:has(> svg) > .menu-label,
  .wb-bar .btn:has(> svg) > .menu-label { display: none !important; }
  #ptFsTools .btn:has(> svg), .wb-bar .btn:has(> svg) { padding: 0 9px !important; }
  #ptFsTools input[type="range"] { width: 56px !important; }
  #ptFsTools .multi-slide-container { min-width: 104px !important; height: 30px !important; }
}
body.apk #ptFsTools .btn:has(> svg) > .menu-label,
body.apk .wb-bar .btn:has(> svg) > .menu-label { display: none !important; }
body.apk #ptFsTools .btn:has(> svg), body.apk .wb-bar .btn:has(> svg) { padding: 0 9px !important; }
/* 批注/全屏测试/浏览器批注的「保存 / 退出」关键按钮：移动端(≤640px)与 APK 下与其他工具按钮一致退化为纯 SVG 图标，
   保证单行胶囊不被文字撑开；电脑模式/EXE 宽屏不触发，依旧显示「图标+文字」 */
@media (max-width: 640px) {
  #annotateBar #annotSaveBtn > .menu-label,
  #annotateBar #annotExitBtn > .menu-label,
  #ptFsTools #ptFsSave > .menu-label,
  #ptFsTools #ptFsExit > .menu-label,
  .wb-bar .btn.wb-save > .menu-label,
  .wb-bar .btn.wb-exit > .menu-label { display: none !important; }
  #annotateBar #annotSaveBtn,
  #annotateBar #annotExitBtn,
  #ptFsTools #ptFsSave,
  #ptFsTools #ptFsExit { padding: 0 9px !important; }
}
body.apk #annotateBar #annotSaveBtn > .menu-label,
body.apk #annotateBar #annotExitBtn > .menu-label,
body.apk #ptFsTools #ptFsSave > .menu-label,
body.apk #ptFsTools #ptFsExit > .menu-label,
body.apk .wb-bar .btn.wb-save > .menu-label,
body.apk .wb-bar .btn.wb-exit > .menu-label { display: none !important; }
body.apk #annotateBar #annotSaveBtn,
body.apk #annotateBar #annotExitBtn,
body.apk #ptFsTools #ptFsSave,
body.apk #ptFsTools #ptFsExit { padding: 0 9px !important; }
/* 电磁笔全屏工具胶囊（#ptFsTools）移动端 & APK 适配：
   三合一滑块收成小巧椭圆胶囊（高度 30、宽度随屏宽 vw 自适应），滑动轨道随之变窄——
   「右滑清空」所需拖拽距离按容器实际宽度自动缩短（拖动逻辑按 rect 实时换算，无需改 JS），
   粗细滑杆/数值/按钮同步压缩，使整个工具栏能完整显示在胶囊内、不再横向溢出滚动 */
@media (max-width: 768px) {
  #ptFsTools { gap: 3px !important; padding: 4px 5px !important; }
  #ptFsTools #ptFsSlide.multi-slide-container {
    min-width: 0 !important;
    width: clamp(62px, 18vw, 118px) !important;
    height: 30px !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
  }
  #ptFsTools #ptFsSlide.multi-slide-container .slide-knob {
    width: 26px !important;
    height: 26px !important;
  }
  #ptFsTools input[type="range"] { width: clamp(48px, 14vw, 70px) !important; }
  #ptFsTools input[type="number"] { width: 42px !important; padding: 0 2px !important; }
}
@media (max-width: 420px) {
  #ptFsTools #ptFsSizeVal { display: none !important; }
  #ptFsTools input[type="color"] { width: 26px !important; height: 26px !important; }
}
body.apk #ptFsTools { gap: 3px !important; }
body.apk #ptFsTools #ptFsSlide.multi-slide-container {
  min-width: 0 !important;
  width: clamp(62px, 18vw, 118px) !important;
  height: 30px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
}
body.apk #ptFsTools #ptFsSlide.multi-slide-container .slide-knob {
  width: 26px !important;
  height: 26px !important;
}
body.apk #ptFsTools input[type="number"] { display: none !important; }
/* 大屏/平板 APK：即使视口宽度 >768px 也一律按“纯图标 + 固定单行”处理主上/下胶囊与二级条，
   滑块状态文字与文字标签不占位、不换行，避免任意分辨率下出现单行放不下的情况 */
body.apk .ex-topwrap .multi-slide-container .status-text,
body.apk .ex-bottombar .multi-slide-container .status-text,
body.apk .ex-subbar .multi-slide-container .status-text,
body.apk .ex-topwrap .status-text,
body.apk .ex-bottombar .status-text { display: none !important; }
body.apk .ex-topwrap .btn > .menu-label,
body.apk .ex-bottombar .btn > .menu-label,
body.apk .ex-subbar .btn > .menu-label { display: none !important; }
/* APK 进入批注模式：与移动端一致自动隐藏左上角 ≡（避免残留可点图标挡批注），退出批注自动恢复 */
body.apk.annotating #showToolbarBtn,
body.apk-kiosk-ui.annotating #showToolbarBtn { display: none !important; }
/* 移动端/APK 浮动二级菜单：**按内容一次性展开，菜单自身不再滚动**。
   ★ 高度/滚动不在这里限制：一旦给菜单 max-height + overflow-y:auto，它就成为一层「滚动合成层」，
     而老 X5（手机QQ浏览器/微信内核）在「position:fixed + overflow:auto + 圆角裁剪」的滚动层里
     会漏掉子级文字的栅格化 → 菜单已展开但文字空白、手指滑过才显形。
     这在「工具栏 → 工具」这个最长的下拉里必现（只有它内容超过限高、真的产生了滚动层）。
     故滚动容器整体去掉（见全局 `body .submenu.floating`），盒子高度完全由内容决定，
     文字与盒子同批栅格化 —— 这样圆角裁剪也能保留（此前为绕开该问题取消圆角，会让滚动区底部显示不全，
     且同样波及 APK）。
     这里只保留不与「整体不滚动」冲突的触控约束。 */
@media (max-width: 768px) {
  .submenu.floating {
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
}
body.apk .submenu.floating {
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}
/* APK 在平板/大屏上宽度可能 >768px，此时上面的移动端媒体查询不生效，
   这里补同款 26px 行高，保证 APK 在任意宽度下、所有栏目下拉菜单的行高一致 */
body.apk .submenu.floating > .btn,
body.apk .submenu.floating.submenu-grid#toolMenuList > .btn {
  height: 24px !important;
  min-height: 24px !important;
}
/* 项目菜单：APK 双排下同样把「使用帮助」「初始化画板」并排（隐藏两者之间的分隔线） */
body.apk .submenu.floating > .submenu-sep.hc-sep-join { display: none !important; }
/* 浏览器模块下胶囊（批注工具条）：同款紧凑格式（拖动与布局逻辑不受影响） */
.wb-bar { gap: 4px !important; max-width: 96vw !important; padding: 4px 6px !important; }
.wb-bar .wb-grip { width: 20px !important; height: 34px !important; }
.wb-bar .wb-grip svg { width: 16px !important; height: 16px !important; }
.wb-bar input[type="range"] { width: 64px !important; height: 32px !important; }

/* ===== 移动端 & APK 细节微调 ===== */
/* ① 浏览器模块下胶囊（批注工具条）的「线宽」控制：
   —— 改法：直接去掉滑轨后面的自定义数字输入框（#wbSizeNum），并把滑轨收窄到 32px。
   —— 之前两次「把滑轨调短」都没生效的真正原因：小屏通用规则里有
        input[type="range"] { width: 64px !important; min-width: 64px !important; }
      只改 width 会被 min-width 钳住（getComputedStyle 仍返回 64px），故这里必须连 min-width 一起覆盖。
   —— 只针对 #wbSize（其它滑轨仍保持 64px 的易点按尺寸）；web 端 / EXE 端不受影响。 */
@media (max-width: 768px) {
  body .wb-bar #wbSize { width: 32px !important; min-width: 32px !important; flex: 0 0 auto !important; }
  body .wb-bar #wbSizeNum { display: none !important; }
}
body.apk .wb-bar #wbSize { width: 32px !important; min-width: 32px !important; flex: 0 0 auto !important; }
body.apk .wb-bar #wbSizeNum { display: none !important; }

/* ② 屏幕上方「✕ 关闭 (ESC)」提示条：整体缩小（元素用内联样式创建，必须 !important 才覆盖得住） */
@media (max-width: 768px) {
  #topEscHint { padding: 5px 9px !important; gap: 5px !important; font-size: 12px !important; }
  #topEscHint > button { height: 22px !important; min-height: 22px !important; padding: 0 8px !important;
    font-size: 11px !important; line-height: 1 !important; }
}
body.apk #topEscHint { padding: 5px 9px !important; gap: 5px !important; font-size: 12px !important; }
body.apk #topEscHint > button { height: 22px !important; min-height: 22px !important; padding: 0 8px !important;
  font-size: 11px !important; line-height: 1 !important; }

/* 浏览器模式按钮尺寸对齐主画布（同 .ex-topwrap 紧凑按钮 32×32 / SVG 16×16）：顶栏(.wb-top)与底部
   批注胶囊(.wb-bar)的按钮在移动端(≤640px)与 APK 下全部收为纯图标方钮，单行不换行；
   电脑模式/EXE 宽屏无此规则，保持原「图标+文字」尺寸不变 */
@media (max-width: 640px) {
  .wb-top .btn,
  .wb-bar .btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 0 !important;
  }
  .wb-top .btn > svg,
  .wb-bar .btn > svg { width: 16px !important; height: 16px !important; margin: 0 !important; }
  .wb-top .btn > .menu-label,
  .wb-bar .btn > .menu-label { display: none !important; }
}
body.apk .wb-top .btn,
body.apk .wb-bar .btn {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  font-size: 0 !important;
}
body.apk .wb-top .btn > svg,
body.apk .wb-bar .btn > svg { width: 16px !important; height: 16px !important; margin: 0 !important; }
body.apk .wb-top .btn > .menu-label,
body.apk .wb-bar .btn > .menu-label { display: none !important; }

/* 移动端 / APK：三颗胶囊贴边并利用安全区，为画布让出最大书写区域。
   刻意不加 !important：拖拽后 JS 写入的内联 top/bottom 仍可覆盖，保证「拖到哪停哪」。
   浏览器下胶囊在全屏时原规则带 !important，故用更高特异性选择器（body #wbLayer:fullscreen .wb-bar）覆盖。 */
@media (max-width: 768px) {
  .pt-fs-hud { top: calc(8px + env(safe-area-inset-top, 0px)); }
  .pt-fs-tools { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .wb-bar { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  body #wbLayer:fullscreen .wb-bar,
  body #wbLayer:-webkit-full-screen .wb-bar { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}
body.apk .pt-fs-hud { top: calc(8px + env(safe-area-inset-top, 0px)); }
body.apk .pt-fs-tools { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
body.apk .wb-bar,
body.apk #wbLayer:fullscreen .wb-bar,
body.apk #wbLayer:-webkit-full-screen .wb-bar { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
/* 画笔点 / 橡皮圈：批注层内自绘光标（不复用主画布 #eraserGuide，避免层级与判定冲突） */
.wb-cursor { position:fixed; left:0; top:0; z-index:2147483000; border-radius:50%;
  pointer-events:none; box-sizing:border-box; transform:translate(-50%,-50%); opacity:0; }
.wb-cursor.wc-on { opacity:1; }
.wb-cursor.wc-dot { background:currentColor; }
.wb-cursor.wc-ring { border:1px solid currentColor; }
/* 网页拒绝嵌入 / 加载失败提示条 */
.wb-msg { position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:6;
  max-width:min(92vw,620px); padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.6;
  color:var(--text-1); background:var(--surface-glass); border:1px solid var(--border);
  box-shadow:var(--shadow-2); backdrop-filter:blur(14px) saturate(1.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.6); }
.wb-msg[hidden] { display:none !important; }
.wb-msg .wb-msg-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.wb-msg .wb-msg-close { margin-left:auto; width:24px; height:24px; flex:none; display:inline-flex;
  align-items:center; justify-content:center; border:0; border-radius:50%; background:transparent;
  color:var(--text-2,#8b93a7); cursor:pointer; }
.wb-msg .wb-msg-close:hover { background:var(--border-soft); color:var(--text-1); }
.wb-msg .wb-msg-close svg { width:14px; height:14px; }
@media (max-width:680px){
  .wb-top { flex-wrap:wrap; }
  .wb-top .wb-url { flex:1 1 60%; }
}
/* —— 网页浏览批注层：底部工具条 = 「批注模式工具栏」同款控件（三合一滑块 / 保存 / 退出） ——
   与电磁笔全屏工具胶囊（#ptFsTools）保持同款交互与配色：拖拽把手 + 圆形选色 + 粗细滑杆 +
   画笔/橡皮三合一滑块（点击切换、右滑到底清空）+ 保存/退出。
   以下规则供工具条升级与「按钮图标映射」接入使用，暂未用到的类名不影响现有渲染。 */
.wb-bar .multi-slide-container { height:38px; min-height:38px; min-width:118px; padding:0 8px;
  box-sizing:border-box; flex:none; }
.wb-bar .multi-slide-container .status-text { font-size:11px; line-height:1; }
.wb-bar .multi-slide-container .slide-knob { width:28px; height:28px; }
.wb-bar .multi-slide-container .slide-knob > svg { width:18px; height:18px; }
/* 暗色主题：三合一滑块在各反馈态下的状态文字保持可读（默认态沿用主题文字色） */
body.dark-theme .wb-bar .multi-slide-container.active .status-text { color:#bfdbfe; }
body.dark-theme .wb-bar .multi-slide-container.armed .status-text { color:#fecaca; }
body.dark-theme .wb-bar .multi-slide-container.clearing .status-text { color:#a7f3d0; }
/* 保存 / 退出：保存走主题强调色，退出沿用顶部「退出」的警示红 */
.wb-bar .btn.wb-save { color:var(--accent); }
.wb-bar .btn.wb-exit { color:#ff4d4f; }
.wb-bar .btn.wb-save:hover { background:var(--border-soft); }
.wb-bar .btn.wb-exit:hover { background:rgba(255,77,79,.12); }
/* 按钮注入 SVG 图标后：图标与文字留 4px 间距（原 margin:0 会把图标贴住文字） */
#wbLayer .wb-top .btn > svg, #wbLayer .wb-bar .btn > svg { margin-right:4px; flex:none; }
/* 顶栏/工具条按钮禁用态（加载中、无可撤销操作等由 JS 置灰） */
#wbLayer .wb-top .btn:disabled, #wbLayer .wb-bar .btn:disabled { opacity:.45; cursor:not-allowed; }
#wbLayer .wb-top .btn:disabled:hover, #wbLayer .wb-bar .btn:disabled:hover { background:var(--card-bg,#fff); border-color:var(--border); }
/* 网址输入框聚焦高亮（与全站胶囊输入框一致） */
.wb-top .wb-url:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow, rgba(59,130,246,.18)); }
/* 拖动把手 hover 反馈 + 网页加载失败提示条内按钮 */
.wb-bar .wb-grip:hover { background:var(--border-soft); color:var(--text-1); }
.wb-msg .btn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
  border:1px solid var(--border); border-radius:8px; background:var(--card-bg,#fff);
  color:var(--text-1); font-size:13px; cursor:pointer; }
.wb-msg .btn:hover { background:var(--border-soft); }
.wb-msg .btn > svg { width:15px; height:15px; margin-right:4px; }
/* 笔刷选择弹层：相对底部工具条向上浮出（wb-bar 自身 transform 定位，故以 left:0 起排） */
.wb-brush-pop { position:absolute; left:4px; bottom:calc(100% + 10px); z-index:8;
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:2px;
  width:min(268px, calc(100vw - 16px)); height:auto; max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px); overflow-y:auto;
  padding:6px; box-sizing:border-box;
  border-radius:var(--radius-card); border:1px solid var(--border);
  background:var(--surface-glass,#fff); box-shadow:var(--shadow-2);
  backdrop-filter:blur(16px) saturate(1.6); -webkit-backdrop-filter:blur(16px) saturate(1.6); }
.wb-brush-pop[hidden] { display:none !important; }
.wb-brush-pop .wb-brush-item { display:inline-flex; align-items:center; gap:6px; flex:none;
  width:calc(50% - 1px); box-sizing:border-box; height:32px; padding:0 8px;
  border:0; border-radius:8px; background:transparent;
  color:var(--text-1,#1f2937); font-size:12px; line-height:1; cursor:pointer; white-space:nowrap;
  transition:background .12s ease; }
.wb-brush-pop .wb-brush-item svg { width:16px; height:16px; flex:none; color:var(--text-2,#8b93a7); }
.wb-brush-pop .wb-brush-item span { overflow:hidden; text-overflow:ellipsis; }
.wb-brush-pop .wb-brush-item:hover { background:var(--border-soft); }
.wb-brush-pop .wb-brush-item.cur { background:var(--selected-bg); color:var(--selected-fg); }
.wb-brush-pop .wb-brush-item.cur svg { color:var(--selected-fg); }
.wb-bar .multi-slide-container.active { cursor:pointer; }
/* 三合一滑块滑动手感：按下时微放大 + 拖动禁止选中文本 */
#wbLayer .wb-bar .multi-slide-container { user-select:none; -webkit-user-select:none; }
#wbLayer .wb-bar .multi-slide-container.dragging { cursor:grabbing; }
#wbLayer .wb-bar .multi-slide-container .slide-knob { transition:transform .06s linear; will-change:transform; }
/* 窄屏：笔刷弹层改单列，避免溢出 */
@media (max-width:480px){
  .wb-brush-pop .wb-brush-item { width:100%; }
}
/* 全屏浏览/批注：顶栏与工具条避开屏幕安全区（刘海 / 圆角 / 手势条） */
#wbLayer:fullscreen .wb-top { padding-top:calc(8px + env(safe-area-inset-top, 0px)); }
#wbLayer:fullscreen .wb-bar { bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
#wbLayer:-webkit-full-screen .wb-top { padding-top:calc(8px + env(safe-area-inset-top, 0px)); }
#wbLayer:-webkit-full-screen .wb-bar { bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
/* 窄屏：工具条收紧间距并允许换行，滑杆与三合一滑块同步收窄 */
@media (max-width:680px){
  .wb-bar { gap:4px; padding:6px 8px; max-width:98vw; }
  .wb-bar .btn { padding:0 8px; font-size:12px; }
  .wb-bar input[type="range"] { width:64px; }
  .wb-bar .multi-slide-container { min-width:112px; }
  #wbLayer .wb-top .btn { padding:0 8px; }
}
/* 超窄屏：已接入图标的按钮只留图标（:has 兜底 —— 无图标的按钮仍显示文字，不会变空按钮） */
@media (max-width:480px){
  #wbLayer .wb-top .btn:has(> svg) > .menu-label,
  #wbLayer .wb-bar .btn:has(> svg) > .menu-label { display:none; }
  #wbLayer .wb-top .btn:has(> svg) > svg,
  #wbLayer .wb-bar .btn:has(> svg) > svg { margin-right:0; }
  #wbLayer .wb-top .btn:has(> svg),
  #wbLayer .wb-bar .btn:has(> svg) { padding:0 7px; }
}
/* 减少动效偏好：关闭批注层的按钮过渡与滑块回弹/脉冲动画 */
@media (prefers-reduced-motion: reduce){
  #wbLayer .wb-top .btn, #wbLayer .wb-bar .btn, #wbLayer .wb-grip { transition:none; }
  #wbLayer .multi-slide-container,
  #wbLayer .multi-slide-container .slide-knob { animation:none !important; transition:none !important; }
}
@media (max-width:680px){ .cap-grid { grid-template-columns:1fr; } .cap-canvas-wrap { height:300px; } }
.sig-dialog {
  width: min(720px, 92vw);
  font-size: 14px; /* 弹窗内文字基准与画布系统一致（工具栏按钮/输入框同为 14px） */
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elev);
  overflow: hidden;
}
.sig-dialog-title {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--gradient-title);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
}
.sig-modal-close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.sig-modal-close:hover { background: rgba(255, 255, 255, 0.35); }
.sig-modal-close svg { width: 14px; height: 14px; color: #fff; }
.sig-dialog-body { padding: 14px 18px 12px; }
/* —— 签名书写画布：尺寸机制与「电磁笔测试」书写画布保持一致 ——
   旧版是 HTML 固定 640×280（再×dpr）、CSS 却按容器宽度 100% 拉伸而高度固定 280px，
   内部像素与显示区域长宽比不一致 → 两轴非等比缩放，圆笔头被拉成斜椭圆/"右菱形"、曲线不圆滑。
   现改为外层 .sig-canvas-wrap（同 .pt-canvas-wrap：clamp(200px,32vh,240px)）自适应书写区，
   画布像素在打开/缩放时按实际显示区尺寸重设（×dpr），内部与显示长宽比恒一致 → 笔迹同电磁笔测试般圆滑。 */
.sig-canvas-wrap {
  position: relative;
  height: clamp(200px, 32vh, 240px);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  /* 棋盘格仅用于可视化透明底，画布本身不填充任何背景色，导出即透明 */
  background-image:
    linear-gradient(45deg, #eef2f7 25%, transparent 25%, transparent 75%, #eef2f7 75%),
    linear-gradient(45deg, #eef2f7 25%, transparent 25%, transparent 75%, #eef2f7 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
#sigCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.sig-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
/* 「保存签名 / 插入画布」两个主操作按钮：从工具行拆出，单独占一整行并平分宽度 */
.sig-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 8px;
}
.sig-actions .btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.sig-tools-label { font-size: 14px; color: #64748b; }
.sig-flex { flex: 1 1 auto; }
.sig-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 2px solid #cbd5e1;
  cursor: pointer;
  padding: 0;
}
.sig-color-dot.active { outline: 2px solid var(--accent); }
#sigColorCustom {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
#sigSize { width: 110px; accent-color: var(--accent); }
.sig-tip { margin: 8px 0 0; font-size: 14px; color: var(--text-3); }

/* ===== HCDRAW 自定义提示/确认/输入弹窗（替代原生 alert/confirm/prompt） ===== */
.hcd-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
}
.hcd-modal-mask.show { display: flex; }
.hcd-dialog {
  min-width: 320px;
  max-width: 82vw;
  font-size: 14px; /* 弹窗文字基准与画布系统一致 */
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elev);
  overflow: hidden;
  animation: hcdPop .18s var(--ease-out);
  border: 1px solid var(--border);
}
@keyframes hcdPop {
  from { transform: translateY(-6px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.hcd-dialog-title {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--gradient-title);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hcd-dialog-title::before {
  content: none;
}
.hcd-dialog-body {
  padding: 22px 20px;
  font-size: 14px;
  color: var(--text-1);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 55vh;
  overflow-y: auto;
}
.hcd-dialog-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-top: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  background: var(--surface);
  color: var(--text-1);
  transition: border-color 150ms, box-shadow 150ms;
}
.hcd-dialog-input:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.hcd-dialog-actions {
  padding: 0 20px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* F4-6/T7 背景设置弹窗：表单控件样式（共享给未来其它模态） */
.form-select,
.form-input {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 14px;
  color: var(--text-1);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
  min-width: 0;
  box-sizing: border-box;
  font-family: inherit;
}
.form-select {
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 12px;
  cursor: pointer;
}
.form-select:focus,
.form-input:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  /* 本体只作透明热区：高度 18px 保证触屏拖拽命中，轨道由下方 track 伪元素绘制 */
  height: 18px;
  min-height: 18px;
  padding: 0;
  background: transparent;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
}
/* 显式轨道层：不依赖 input 自身背景，避免部分 Android WebView/手机浏览器回退为系统原生蓝滑块 */
input[type='range']::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  margin-top: -5.5px; /* (轨道 3px − 滑块 14px) ÷ 2：垂直居中于轨道 */
  border-radius: 50%;
  background: #fff;
  border: 2px solid #6366f1;
  box-shadow: 0 1px 4px rgba(99,102,241,0.35);
  cursor: pointer;
  transition: transform 120ms var(--ease-out), box-shadow 120ms ease;
}
@media (hover: hover) {
  input[type='range']::-webkit-slider-thumb:hover {
    transform: scale(1.18);
    box-shadow: 0 2px 8px rgba(99,102,241,0.55);
  }
}
/* Gecko（Firefox / 部分移动浏览器）：显式轨道与滑块 */
input[type='range']::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}
input[type='range']::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #6366f1;
  box-shadow: 0 1px 4px rgba(99,102,241,0.35);
  cursor: pointer;
}
/* 暗黑模式：滑块与轨道线改白 */
body.dark-theme input[type='range']::-webkit-slider-runnable-track {
  background: #fff;
}
body.dark-theme input[type='range']::-moz-range-track {
  background: #fff;
}
body.dark-theme input[type='range']::-webkit-slider-thumb {
  border-color: #fff;
  box-shadow: 0 1px 4px rgba(255,255,255,0.35);
}
body.dark-theme input[type='range']::-moz-range-thumb {
  border-color: #fff;
  box-shadow: 0 1px 4px rgba(255,255,255,0.35);
}
body.dark-theme .slide-knob {
  background-image: linear-gradient(135deg, #fff, #fff);
  box-shadow: 0 2px 5px rgba(255,255,255,0.35);
}
/* 暗黑下圆钮转白后，默认态（笔刷图标 icon-slide-brush / 把手 icon-slide-knob）须用深色
   才能在白底上可见；active(橡皮擦)/armed/clearing 态圆钮为红/橙/绿渐变底，图标保持白色 */
body.dark-theme .multi-slide-container:not(.active):not(.armed):not(.clearing) .slide-knob > svg {
  color: #1f2937;
}

.share-modal-content {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 24px;
  max-width: 400px;
  width: 90%;
  position: relative;
  text-align: center;
  font-size: 14px; /* 弹窗文字基准与画布系统一致 */
  box-shadow: var(--shadow-elev);
  border: 1px solid var(--border);
}

.share-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 22px;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.share-modal-close:hover {
  color: #333;
}
.share-modal-close svg { width: 16px; height: 16px; }

.share-modal h3 {
  margin: 0 0 16px;
  font-size: 16px;
  color: #333;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.share-platforms {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  color: #333;
  width: 70px;
  transition: transform 0.2s;
}

.share-item:hover {
  transform: scale(1.08);
}

.share-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.share-icon.wechat { background: #07c160; }
.share-icon.douyin { background: #000000; }
.share-icon.weibo { background: #ff8200; }
.share-icon.qq { background: #12b7f5; }
.share-icon.google { background: #4285f4; }
.share-icon.facebook { background: #1877f2; }
.share-icon.twitter { background: #111111; }
.share-icon.instagram { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); }
.share-icon.youtube { background: #ff0000; }
.share-icon.tiktok { background: #010101; }
.share-icon.whatsapp { background: #25d366; }
.share-icon.skype { background: #00aff0; }
.share-icon.line { background: #06c755; }

#shareTip {
  font-size: 12px;
  color: var(--text-3, #a1a1aa);   /* 「选择平台分享当前页面」：颜色调淡（原 --text-2），不抢社交图标视觉 */
  min-height: 16px;
  margin: 6px 0 0;
  text-align: center;
}

/* —— 分享胶囊（三端统一，单颗）：二维码区（常驻在上） + 社交平台图标区（在下、可收起/展开） ——
   ① 二维码区 #shareQrBlock（不参与收起/展开）：默认 = 当前网址二维码，点「生成二维码」才内嵌画作数据；
   ② 社交图标区 = 「分享到更多平台」分组（#shareMoreSec），标题右侧收起/展开图标（默认收起）。
   尺寸 / 圆角 / 阴影 / 标题栏交互全部对齐「元素属性胶囊」(.hc-prop-cap)：宽 320px、右贴 16px、
   默认 top = 顶部主胶囊下缘 + 8px（JS 动态校准），标题栏可拖动、右侧 × 可关闭；
   高度自适应内容（不设 max-height、内容区不滚动，故无「下拉」）。 */
.hc-share-cap {
  position: fixed; left: auto; right: 16px; top: 62px; transform: none;
  z-index: 99980; width: 320px; max-width: calc(100vw - 24px);
  max-height: none;              /* 高度自适应内容：不设上限，避免内容被裁 / 出现框内下拉滚动条 */
  display: flex; flex-direction: column;
  padding: 0;                    /* 覆盖 .tool-cap 的 10px 12px 12px：标题行 / 内容区各自留白 */
  box-sizing: border-box; overflow: hidden;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #d7dfea);
  border-radius: var(--radius-card, 12px);
  box-shadow: var(--card-shadow-hover, var(--card-shadow, 0 10px 30px rgba(15, 23, 42, 0.16)));
  font-size: 12.5px; line-height: 1.45; color: var(--text-color, #1e293b);
}
/* display:flex 会覆盖 [hidden]，必须显式隐藏（同 .hc-prop-cap 修复思路） */
.hc-share-cap[hidden] { display: none !important; }
body.dark-theme .hc-share-cap { box-shadow: var(--card-shadow-hover, var(--card-shadow, 0 12px 34px rgba(0, 0, 0, 0.5))); }
/* 标题行 = 拖拽把手（与 .hc-prop-head 同款交互语义：点击把手拖动整颗胶囊） */
.hc-share-cap .tool-cap-head {
  margin: 0; padding: 8px 10px; gap: 6px;
  border-bottom: 1px dashed var(--border-color, #e3e8f0);
  font-size: 12.5px; font-weight: 600; color: var(--text-1, #111827);
  background: transparent;
  cursor: move; user-select: none; -webkit-user-select: none; touch-action: none;
}
.hc-share-cap .tool-cap-head > svg { width: 14px; height: 14px; flex: none; }
.hc-share-cap .tool-cap-close {
  margin-left: auto; width: 22px; height: 22px; padding: 0; border: none; background: none;
  color: var(--text-2, #6b7280); border-radius: 6px;
}
.hc-share-cap .tool-cap-close:hover { background: var(--hover-bg, #eef2ff); color: var(--text-1, #111); }
/* 内容区：高度自适应内容（二维码区在上、社交图标区在下），不设框内滚动条（无「下拉」）；
   胶囊高度随社交图标区的收起 / 展开自动变化 */
.hc-share-cap .tool-cap-body {
  gap: 0; padding: 8px 10px; flex: 1 1 auto;
  overflow: visible; overflow-x: hidden;
}
.hc-share-cap .share-platforms { gap: 8px; margin-bottom: 4px; }
.hc-share-cap .share-item { width: 62px; margin: 4px 0; }
.hc-share-cap .share-icon { width: 42px; height: 42px; font-size: 16px; margin-bottom: 4px; }
.hc-share-cap .share-item-label { font-size: 11.5px; line-height: 1.25; text-align: center; word-break: break-word; }
/* 二维码块：白底居中。
   位图按 500×500 生成（扫得出、下载即原图），展示固定 100×100（高分屏缩显更锐利）；
   点击放大的预览仍是 300×300（见下方 #hcQrZoom），从 500px 原图缩放不再模糊。 */
#qrcodeBox {
  display: flex; justify-content: center; align-items: center;
  width: fit-content; max-width: 100%; margin: 0 auto; padding: 6px; min-height: 100px;
  background: #fff; border: 1px solid var(--border-color, #eee); border-radius: 8px;
}
#qrcodeBox img, #qrcodeBox canvas {
  display: block; max-width: 100%;
  /* qrcodejs 会给 img/canvas 写 inline 的 width/height(=生成尺寸)，用 !important 压回展示尺寸 */
  width: 100px !important; height: 100px !important;
}
#qrcodeTip { font-size: 12px; color: var(--text-2, #999); margin: 8px 0 0; text-align: center; }
/* 点击二维码：原地放大到 300px 的上层预览（点任意处关闭）—— 与二维码同色白底卡片，居中锚定原位置。
   注意：z-index 由 hcShareShowQrZoom 按「胶囊当前层级 + 20」动态写入（胶囊层级会被 capRaiseToTop 逐次抬升），
   这里的值是兜底初始值，仅用于脚本尚未接管时。 */
#hcQrZoom { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,0.45); cursor: zoom-out; }
#hcQrZoom[hidden] { display: none; }
.hc-qr-zoom-box {
  position: fixed; width: 316px; height: 316px; padding: 8px; box-sizing: border-box;
  background: #fff; border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,0.38);
  display: flex; align-items: center; justify-content: center;
}
.hc-qr-zoom-box img, .hc-qr-zoom-box canvas { width: 300px !important; height: 300px !important; display: block; }
/* 二维码下方按钮行：「生成二维码（网址码 ↔ 画作码）」与「下载二维码（500×500 原图）」同一行 ——
   两键各占一半（flex: 1 1 0）铺满整行、尺寸完全一致；都不换行，长词语言由胶囊文字自适应缩字兜底 */
.hc-share-qrrow { display: flex; align-items: stretch; gap: 6px; margin-top: 8px; }
.hc-share-qrrow .btn { flex: 1 1 0; white-space: nowrap; min-width: 0; padding: 0 8px; }
.hc-share-qrgen { margin-top: 0; }
.hc-share-qrgen.active { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); background: var(--hover-bg, #eef2ff); }
/* 分享胶囊内按钮文字默认 12px：.tool-cap .btn 的 14px 在 320px 胶囊里太占宽（长词语言易撑破） */
#shareModal .btn { font-size: 12px; }
/* 扫码打开「部分内容」时的提示浮层：说明只还原了部分 + 「查看完整内容」的协作邀请链接 */
#hcQrPartTip {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 99999;
  display: flex; align-items: center; gap: 10px; max-width: min(92vw, 640px);
  padding: 10px 14px; border-radius: 12px; background: rgba(17, 24, 39, 0.94); color: #fff;
  font-size: 13px; line-height: 1.4; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
#hcQrPartTip .hc-qrpart-msg { flex: 1 1 auto; }
#hcQrPartTip .hc-qrpart-link {
  flex: 0 0 auto; padding: 6px 10px; border-radius: 8px; background: #2563eb; color: #fff;
  text-decoration: none; font-weight: 600; white-space: nowrap;
}
#hcQrPartTip .hc-qrpart-close {
  flex: 0 0 auto; width: 24px; height: 24px; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, 0.16); color: #fff; line-height: 1;
}
/* 二维码胶囊底部操作行：导出作品 / 导出视频 / 系统分享（三键同排，不换行） */
.hc-share-actions { display: flex; gap: 6px; margin-top: 8px; }
.hc-share-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 4px; white-space: nowrap; }
/* 三键同行：图标略缩一号，保证「导出作品 / 导出视频 / 系统分享」都不换行 */
.hc-share-actions .btn > svg.title-icon,
.hc-share-actions .btn > svg.submenu-icon { width: 16px; height: 16px; min-width: 16px; flex-basis: 16px; margin-right: 4px; }
/* 二维码行（生成二维码 / 下载二维码）图标：applySvgToStaticBtn 注入的 class 是 .submenu-icon，
   与下方三键同款略缩一号，保证 320px 胶囊的半个按钮内不换行 */
.hc-share-qrrow .btn > svg.submenu-icon { width: 16px; height: 16px; min-width: 16px; flex-basis: 16px; margin-right: 4px; }
/* 分享胶囊内按钮悬浮：只变底色，不出现蓝色外框 / 位移 / 蓝色投影（与画笔设置胶囊内其它按钮观感一致）
   （导出中的红色脉冲态 .recording 例外：处理期间必须保持红色，见下方规则） */
#shareModal.tool-cap .btn:hover:not(:disabled):not(.recording):not(.replaying) {
  background: var(--border-soft);
  border-color: var(--border);
  color: var(--text-1, #111827);
  transform: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
/* 选中态（生成二维码 active）：悬浮时保留强调配色，不被上面的通用规则抹平 */
#shareModal.tool-cap .btn.hc-share-qrgen.active:hover:not(:disabled) {
  background: var(--hover-bg, #eef2ff);
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
}
/* 「导出作品 / 导出视频」处理中（.recording）= 与主工具栏「保存视频」录制中完全同款：
   红色渐变底 + @keyframes pulse 呼吸（一直呼吸）。
   ⚠ 必须用这里这种高权重写法：全局 .btn.recording（0,2,0，在文件靠前的 1913 行）会被
   胶囊自身的 .tool-cap .btn / body.dark-theme .tool-cap .btn（同样 0,2,0 / 0,3,1，但在其后定义）
   覆盖掉背景 → 只剩 `.btn.recording` 的白色文字叠在浅灰底上（文字看不见），
   而 box-shadow 的 pulse 动画优先级高于普通声明，所以表现为「有呼吸、没红底、字看不见」，
   鼠标移上去才因为下面的 :hover 规则显示红色。这里统一把 常态/悬浮/按下/禁用 与暗色一起锁死。 */
#shareModal.tool-cap .hc-share-actions .btn.recording,
#shareModal.tool-cap .hc-share-actions .btn.recording:hover:not(:disabled),
#shareModal.tool-cap .hc-share-actions .btn.recording:active:not(:disabled),
body.dark-theme #shareModal.tool-cap .hc-share-actions .btn.recording,
body.dark-theme #shareModal.tool-cap .hc-share-actions .btn.recording:hover:not(:disabled),
body.dark-theme #shareModal.tool-cap .hc-share-actions .btn.recording:active:not(:disabled) {
  background-image: linear-gradient(180deg, #ff7875 0%, #ff4d4f 100%);
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  color: #fff;
  transform: none;
}
#shareModal.tool-cap .hc-share-actions .btn.recording > svg,
#shareModal.tool-cap .hc-share-actions .btn.recording > span.menu-label,
body.dark-theme #shareModal.tool-cap .hc-share-actions .btn.recording > svg,
body.dark-theme #shareModal.tool-cap .hc-share-actions .btn.recording > span.menu-label { color: #fff; }
/* 空内容轻提示（暂无作品 / 暂无视频）：显示在「导出作品 / 导出视频 / 系统分享」按钮行正下方 */
#shareNoTip {
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
  color: #d97706;
  margin: 6px 0 0;
  text-align: center;
}
body.dark-theme #shareNoTip { color: #fbbf24; }
/* 处理中「同款」进度提示（点「导出作品 / 导出视频」后）：
   与主画布上方常驻提示 #captionBar.hc-sticky 完全同款 —— 深色半透明胶囊底 + 转圈 + 百分比胶囊 + 提示语，
   两处同时显示、进度同步刷新、结束/取消同步消失（结构复用 .hc-cap-spin / .hc-cap-pct / .hc-cap-text） */
#shareNoTip.hc-share-prog {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 8px auto 0;
  padding: 8px 18px 8px 14px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--shadow-2);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
body.dark-theme #shareNoTip.hc-share-prog { color: #fff; }
/* 胶囊只有 320px：提示语允许换行（主画布提示条为单行 nowrap） */
#shareNoTip.hc-share-prog .hc-cap-text { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
/* hidden 必须压制上面的 display:flex，否则 JS 置 hidden 后仍会显示 */
#shareNoTip[hidden] { display: none; }
/* —— 胶囊内分组（仿画笔设置胶囊 .bs-sec：标题 + 右侧收起/展开图标，默认展开）—— */
.hc-share-sec { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-color, #e3e8f0); }
.hc-share-sec-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-1, #111827);
  user-select: none; -webkit-user-select: none;
}
.hc-share-sec-title > svg { width: 14px; height: 14px; flex: 0 0 14px; margin: 0; color: var(--accent, #2563eb); }
.hc-share-sec-toggle {
  order: 99; margin-left: auto;
  width: 18px; height: 18px; flex: 0 0 18px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--text-2, #6b7280); border-radius: 5px; cursor: pointer; opacity: 0.88;
}
.hc-share-sec-toggle svg { width: 13px; height: 13px; margin: 0; transform: rotate(90deg); transition: transform 0.15s ease; }
.hc-share-sec-toggle:hover { opacity: 1; color: var(--accent, #2563eb); background: var(--hover-bg, #eef2ff); }
.hc-share-sec.hc-sec-collapsed > .hc-share-sec-body { display: none; }
.hc-share-sec.hc-sec-collapsed .hc-share-sec-toggle svg { transform: rotate(-90deg); }
.hc-share-sec.hc-sec-collapsed .hc-share-sec-title { color: var(--text-2, #6b7280); }
.hc-share-sec-body { padding-top: 8px; }
@media (max-width: 768px) {
  .hc-share-cap { right: 8px; width: 320px; max-width: calc(100vw - 16px); }
}

.zoom-controls {
  display: flex;
  gap: 4px;
  align-items: center;
}

.zoom-controls .btn {
  min-width: 36px;
  padding: 0 8px;
  font-weight: 700;
}

/* 视图菜单 */
.menu-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.menu-item > .btn {
  min-width: 60px;
}

/* 让 .menu-item 内边距向下扩 8px → 形成 hover 安全区，
   鼠标从按钮→子菜单移动时不会离开 :hover 丢失下拉 */
.menu-item {
  padding-bottom: 8px;
  margin-bottom: -8px;
}

.menu-item .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 160px;
  background: var(--card-bg-solid);
  /* 注意：不使用 backdrop-filter，避免子菜单自身创建层叠上下文，确保 z-index 在外层正常生效（不被相邻卡片遮挡） */
  border: 1px solid var(--card-border);
  border-radius: 18px;  /* 栏目弹出窗口胶囊外框：大圆角 */
  outline: 1px solid var(--border);  /* 外圈胶囊描边（随圆角成形，offset 4px 与窗口留间隙形成双层框） */
  outline-offset: 4px;
  box-shadow: var(--card-inset), var(--card-shadow-hover);
  z-index: 9999; /* toolbar stacking context 内最高层：批注模式(批注层960)下下拉子菜单同样可见可点 */
  padding: 8px;
  max-height: 72vh;
  overflow-y: auto;
  transform-origin: top left;
  animation: submenuIn 160ms var(--ease-out);
}
@keyframes submenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* —— 浮动二级菜单（移动端 / APK 通用）：脱离 overflow 容器后固定定位到 body ——
   注：脱离 .menu-item 后 .menu-item .submenu 系列选择器不再匹配，故在此补全容器 + 布局 + 按钮全套样式。
       本块刻意放在 @media 之外：APK（原生 WebView）屏幕宽度常 > 768px，不会命中移动端媒体查询，
       若不在此兜底，APK 上的浮动二级菜单会完全丢失样式。 */
.submenu.floating {
  position: fixed !important;
  z-index: 99999 !important;
  display: block !important;
  transform: none !important;
  animation: none !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  /* 外圈描边不再用 outline + outline-offset：
     长菜单（项目/背景）会带滚动合成层，outline-offset 让描边画在层外，
     部分 Android WebView 每帧重绘这条外框 → 表现为「外框一直闪动」。
     改由 box-shadow 画双层框（4px 卡片色间隙环 + 1px 描边环），与层同批绘制、不再单独重绘。 */
  outline: none !important;
  box-shadow: 0 0 0 4px var(--card-bg), 0 0 0 5px var(--border),
              0 8px 24px rgba(15, 23, 42, 0.18) !important;
  padding: 4px !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  min-width: 180px !important;
  max-width: calc(100vw - 16px) !important;
  /* ★ 按内容一次性展开：不设 max-height，也不再让菜单自己滚动。
     一旦有 max-height + overflow-y:auto，菜单就是一层「滚动合成层」，老 X5（QQ/微信内核）在
     「position:fixed + overflow:auto + 圆角裁剪」的层里会漏掉子级文字的栅格化 → 菜单展开但文字空白。
     去掉滚动层后文字与盒子同批栅格化，圆角裁剪可以保留（不必再用「取消圆角」这种会把滚动区
     底部内容切掉的招），也不再需要 JS 的「程序性滚动→复位」抖动兜底与 hc-raster 逐项提层。
     ⚠ 该块只作用于浮动（移动端/APK）子菜单：桌面/EXE 的 .menu-item .submenu 完全不受影响。 */
  max-height: none !important;
  overflow: visible !important;
}

/* —— 下拉菜单打开期间抬升工具栏/浮动子菜单：避免二级菜单被画笔设置/工具等画布悬浮胶囊遮挡。
     悬浮胶囊 z-index 99990（拖拽后会以空值 99991+ 递增，单会话可能超过浮动子菜单 99999），
     因此菜单打开时整条工具栏抬到胶囊之上（仍低于全屏层 2147483640）。
     body.menu-any-open 由 JS 在任意 menu-open/menu-sticky/.submenu.floating 出现时标记，收起自动摘除；
     :has 覆盖“纯 CSS hover 展开”（无 class 可依附）的场景。 —— */
body.menu-any-open .ex-topwrap,
body.menu-any-open .ex-bottombar,
body.menu-any-open .ex-leftbar { z-index: 2147483000; }
body.menu-any-open .submenu.floating { z-index: 2147483000 !important; }
@supports selector(:has(.menu-item.menu-open)) {
  .ex-topwrap:has(.menu-item.menu-open),
  .ex-topwrap:has(.menu-item.menu-sticky),
  .ex-topwrap:has(.menu-item:hover),
  .ex-bottombar:has(.menu-item.menu-open),
  .ex-bottombar:has(.menu-item.menu-sticky),
  .ex-bottombar:has(.menu-item:hover),
  .ex-leftbar:has(.menu-item.menu-open),
  .ex-leftbar:has(.menu-item.menu-sticky),
  .ex-leftbar:has(.menu-item:hover) { z-index: 2147483000; }
}

.submenu.floating.submenu-cols {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, max-content)) !important;
  gap: 4px 12px !important;
  min-width: 0 !important;
  width: max-content !important;
  max-width: calc(100vw - 16px) !important;
}
.submenu.floating.submenu-cols .submenu-col { display: contents !important; }
.submenu.floating.submenu-cols.cols-single {
  grid-template-columns: minmax(0, max-content) !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
}
.submenu.floating.submenu-2col { display: block !important; columns: 2 !important; column-gap: 4px !important; min-width: 0 !important; }
.submenu.floating.submenu-2col > .btn,
.submenu.floating.submenu-2col > .submenu-sep,
.submenu.floating.submenu-2col > .submenu-group-title { break-inside: avoid; width: 100% !important; }
.submenu.floating.submenu-2col > .submenu-group-title { column-span: all; }
/* 单列/单排浮动子菜单（项目/视图/扩展等，未带 cols/2col/grid 多列类）：
   强制 grid 单列 + minmax(0,max-content) 轨道，打断「.btn width:100% 顶满容器、容器又按内容收缩」
   的内在宽度循环（与 submenu-cols.cols-single 已验证做法一致），让菜单按最长内容收窄、
   不再横向铺满视口；放全局（@media 之外）使 APK 宽视口同样生效 */
.submenu.floating:not(.submenu-cols):not(.submenu-2col):not(.submenu-grid):not(.submenu-mgrid) {
  display: grid !important;
  grid-template-columns: minmax(0, max-content) !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  width: max-content !important;
  min-width: 180px !important;
  max-width: calc(100vw - 16px) !important;
}
.submenu.floating.submenu-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2px 4px !important; min-width: 280px !important; }
.submenu.floating.submenu-grid > .btn { width: 100% !important; }
.submenu.floating.submenu-grid > .submenu-fullrow { grid-column: 1 / -1 !important; }
/* 项目 / 视图 / 扩展 三个一级下拉：仅移动端 & APK（浮动菜单）下双排显示。
   与 .submenu-grid 分开是因为 .menu-item .submenu.submenu-grid 同时带桌面端样式，
   用独立类名可保证电脑模式/EXE 宽屏仍是原来的单列样式。 */
.submenu.floating.submenu-mgrid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px 4px !important;
  min-width: 272px !important;
  max-width: calc(100vw - 16px) !important;
}
.submenu.floating.submenu-mgrid > .btn { width: 100% !important; }
.submenu.floating.submenu-mgrid > .submenu-fullrow { grid-column: 1 / -1 !important; }
.submenu.floating.submenu-grid > .submenu-group-title,
.submenu.floating > .submenu-group-title {
  grid-column: 1 / -1; font-size: 12px !important; color: #64748b !important;
  padding: 6px 8px 2px !important; text-align: left !important; cursor: default !important; user-select: none !important;
}
.submenu.floating > .submenu-sep { grid-column: 1 / -1; margin: 2px 0 !important; height: 1px !important; background: var(--border) !important; }
/* 浮动菜单项：触控友好尺寸（38px 高 / 18px 图标），移动端与 APK 一致 */
.submenu.floating > .btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--text-1) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-align: left !important;
}
.submenu.floating > .btn:hover { background: var(--border-soft) !important; }
.submenu.floating > .btn:active {
  background: var(--selected-bg) !important;
  color: var(--selected-fg) !important;
  transform: scale(0.96) !important;
}
.submenu.floating > .btn svg { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; margin: 0 !important; }
.submenu.floating > .btn .menu-label { display: inline !important; font-size: 13.5px !important; color: var(--text-1) !important; white-space: nowrap !important; }

/* 栏目数超过 10 的子菜单：双排显示，避免单列无限拉长 */
.menu-item .submenu.submenu-2col {
  min-width: 300px;
  columns: 2;
  column-gap: 4px;
}
.menu-item .submenu.submenu-2col > .btn,
.menu-item .submenu.submenu-2col > .submenu-sep,
.menu-item .submenu.submenu-2col > .submenu-group-title {
  break-inside: avoid;
  width: 100%;
}

/* 「更多」菜单：固定双排（列）布局，每排 6 个栏目（仅在展开时横向排列，避免覆盖默认 display:none 常显） */
.menu-item .submenu.submenu-cols {
  gap: 2px;
  min-width: 300px;
  max-width: 86vw;
}
.menu-item .submenu.submenu-cols .submenu-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-item .submenu.submenu-cols .submenu-col > .btn {
  width: 100%;
  white-space: nowrap;
}
/* 「更多」双排菜单紧凑化：按钮更矮更密（高 26px / 字号 12px / 图标 15px / 内边距收窄），窗口收窄变方正；
   SVG 与文字间距沿用既有 gap 不变；仅覆盖本窗口按钮的 32px 全局子菜单按钮规范，不影响笔刷/工具/扩展等其它子菜单 */
.menu-item .submenu.submenu-cols .submenu-col > .btn,
.submenu.floating.submenu-cols .submenu-col > .btn {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  justify-content: flex-start !important;  /* 菜单项靠左对齐：.btn 基础为 center，且浮动后 .submenu.floating > .btn 的 flex-start 匹配不到 .submenu-col 内按钮 */
  text-align: left !important;
}
/* 移动端 / APK 的浮动「更多」菜单：行高随其它栏目一起压到 24px（桌面端仍保持上面的 26px） */
.submenu.floating.submenu-cols .submenu-col > .btn {
  height: 24px !important;
  min-height: 24px !important;
}
.menu-item .submenu.submenu-cols .submenu-col > .btn .menu-label,
.submenu.floating.submenu-cols .submenu-col > .btn .menu-label {
  font-size: 12px !important;
}
.menu-item .submenu.submenu-cols .submenu-col > .btn svg,
.menu-item .submenu.submenu-cols .submenu-col > .btn .submenu-icon,
.submenu.floating.submenu-cols .submenu-col > .btn svg,
.submenu.floating.submenu-cols .submenu-col > .btn .submenu-icon {
  flex: 0 0 15px !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
}

.submenu-sep {
  height: 1px;
  background: #eef0f4;
  margin: 6px 0;
}
/* 分组标题：适用于所有子菜单布局（grid / 2col / 单列） */
.menu-item .submenu > .submenu-group-title {
  font-size: 12px;
  color: #64748b;
  padding: 6px 8px 2px;
  text-align: left;
  cursor: default;
  user-select: none;
}
body.dark-theme .menu-item .submenu > .submenu-group-title { color: #9aa4b2; }
.menu-item .submenu.submenu-2col > .submenu-group-title { column-span: all; break-inside: avoid; }

/* 工具菜单：grid 双列 + 分组标题跨双列（分组不被拆行、顺序可控，替代 columns 自动平衡） */
.menu-item .submenu.submenu-grid {
  min-width: 320px;
}
.menu-item:hover > .submenu.submenu-grid,
.menu-item.menu-open > .submenu.submenu-grid,
.menu-item.menu-sticky > .submenu.submenu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 4px;
}
.menu-item .submenu.submenu-grid > .btn { width: 100%; }
.menu-item .submenu.submenu-grid > .submenu-group-title {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #64748b;
  padding: 6px 8px 2px;
  text-align: left;
  cursor: default;
  user-select: none;
}
.menu-item .submenu.submenu-grid > .submenu-sep { grid-column: 1 / -1; margin: 2px 0; }
/* 背景菜单占位项「选择背景」/「自定背景」跨双列独占一行 */
.menu-item .submenu.submenu-grid > .submenu-fullrow { grid-column: 1 / -1; }
body.dark-theme .menu-item .submenu.submenu-grid > .submenu-group-title { color: #9aa4b2; }
/* 工具栏目下拉：压缩按钮/分组标题高度与行距，让 30 项内容完整展开不出现滚动条 */
.menu-item .submenu.submenu-grid#toolMenuList {
  gap: 1px 4px;
  padding: 6px;
  max-height: 78vh;
}
.menu-item .submenu.submenu-grid#toolMenuList > .btn {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
}
.menu-item .submenu.submenu-grid#toolMenuList > .submenu-group-title {
  font-size: 11px !important;
  padding: 3px 8px 1px !important;
  line-height: 15px;
}

/* 桌面端：hover 展开（不写进 @media hover，防止部分浏览器/远程桌面判定 hover:none 丢失） */
.menu-item:hover > .submenu,
.menu-item.menu-open > .submenu,
.menu-item.menu-sticky > .submenu {
  display: block;
}

/* 「更多」双排菜单展开时改为横向两列 */
.menu-item:hover > .submenu.submenu-cols,
.menu-item.menu-open > .submenu.submenu-cols,
.menu-item.menu-sticky > .submenu.submenu-cols {
  display: flex;
}

/* 触屏/移动端：仅依赖 .menu-open */
@media (hover: none) {
  .menu-item:hover > .submenu { display: none; }
}

.menu-item .submenu .btn {
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  justify-content: flex-start;
  padding: 10px 12px;
  height: auto;
  min-width: auto;
  min-height: 44px;
  box-shadow: none;
  font-weight: 400;
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}

.menu-item .submenu .btn:hover,
.menu-item .submenu .btn:active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  transform: none;
  box-shadow: none;
}

/* 子菜单 / 顶栏按钮内 SVG 图标（统一样式规范 + 主题跟随） */
.submenu-icon, .menu-top-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: var(--text-1);          /* 继承主题色：深灰描边 → 暗黑主题自动切换 */
  margin-right: 8px;
}
/* 工具栏/批注栏按钮内 SVG 与文字间距为 0 */
.toolbar .btn .submenu-icon,
#annotateBar .btn .submenu-icon { margin-right: 0; }
/* 二级菜单（下拉项）SVG 与文字间距为 5px */
.menu-item .submenu .btn .submenu-icon { margin-right: 5px; }
/* 明亮模式：一级菜单 + 工具栏/批注栏按钮 SVG 图标跟随按钮文字颜色（不再强制蓝色） */
.menu-top-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex-basis: 16px;
  margin-right: 3px;
}
/* 纯图标按钮：SVG 为按钮唯一子元素时取消右侧 margin，使图标在按钮内居中 */
.btn > .submenu-icon:only-child,
.btn > .menu-top-icon:only-child {
  margin-right: 0;
}
.menu-item > .btn {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}
.menu-item > .btn::after {
  margin-left: 1px;
  content: "▾";
  font-size: 10px;
  opacity: 0.7;
  line-height: 1;
  align-self: center;
}
/* 选中态：SVG 切换为主题蓝 */
.menu-item .submenu .btn.active .submenu-icon,
.menu-item > .btn.active .menu-top-icon {
  color: var(--icon-active, var(--accent-strong));
}
body.dark-theme .menu-item .submenu .btn.active .submenu-icon,
body.dark-theme .menu-item > .btn.active .menu-top-icon { color: var(--accent); }
/* 动态下拉项（笔刷/工具/背景等）选中项：浅蓝高亮，与一级栏目钮 tool-sel/展开态同款背景；
   覆盖通用 .btn.active 的渐变填充，保证电脑/移动/APK 视觉一致 */
.menu-item .submenu .btn.active {
  background: var(--selected-bg) !important;
  background-image: none !important;
  color: var(--selected-fg) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.menu-item .submenu .btn.active .menu-label,
.menu-item .submenu .btn.active .submenu-icon { color: inherit !important; }
/* 触屏/窄屏：图标尺寸微缩，保证文字不被挤 */
@media (max-width: 768px) {
  .submenu-icon { width: 16px; height: 16px; min-width: 16px; min-height: 16px; flex-basis: 16px; margin-right: 6px; }
  .menu-top-icon { width: 14px; height: 14px; min-width: 14px; min-height: 14px; flex-basis: 14px; }
  #penSizeLabel, #brushOpacityLabel { height: 16px; min-height: 16px; }
}
@media (max-width: 480px) {
  .submenu-icon { width: 15px; height: 15px; min-width: 15px; min-height: 15px; flex-basis: 15px; margin-right: 6px; }
  #penSizeLabel, #brushOpacityLabel { height: 15px; min-height: 15px; }
}
/* 对话框内部按钮统一 inline-flex + SVG 图标（对齐弹窗 / 电磁笔工具 / AI 绘画底部大按钮 / 工具栏独立 undo/redo/…等） */
#toolbar > .btn,
.toolbar > .btn,
#annotBar .btn,
.align-btn,
.pt-tool-btn,
#alignPanel .btn,
#sigButtonRow .btn,
#penTestPanel .btn,
#capTestPanel .btn,
#aiPaintModal .btn,
#cloudPanel .btn,
#countdownPanel .btn,
#rollcallPanel .btn,
#collabPanel .btn,
/* 弹窗内按钮：SVG 与文字间距 0，整体居中显示 */
.sig-dialog .btn,
.share-modal-content .btn,
.hcd-dialog .btn {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.sig-dialog .btn .submenu-icon,
.share-modal-content .btn .submenu-icon,
.hcd-dialog .btn .submenu-icon,
.align-btn svg.submenu-icon,
.pt-tool-btn svg.submenu-icon {
  margin-right: 0;
}
/* 电磁笔测试「笔尖/橡皮擦」切换按钮：桌面端 .submenu-icon 无默认宽度 → 显式定尺寸 + 图标与文字间距 */
#penTestPanel .pt-tool-btn svg.submenu-icon { width:15px; height:15px; flex:0 0 15px; display:initial; margin-right:5px; }
/* 电磁笔测试底部操作行（全屏测试 / 保存测试 / 清除笔迹）：三按钮等宽平铺、整体占满整行 */
#penTestPanel .pt-act-row { display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 8px; }
#penTestPanel .pt-act-row .btn { flex:1 1 0; min-width:0; justify-content:center; white-space:nowrap; }
#penTestPanel .pt-act-row .btn > .submenu-icon, #penTestPanel .pt-act-row .btn > svg { margin:0 5px 0 0; }
/* 测试弹窗底行：左下「下载桌面版」、右下「关闭」，两端平铺同一行 */
#penTestPanel .pt-foot, #capTestPanel .pt-foot { display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px; flex-wrap:wrap; }
#penTestPanel .pt-foot .btn, #capTestPanel .pt-foot .btn { margin:0; white-space:nowrap; }
/* —— AI 绘画增强：快捷题材模板 + 随机灵感（人物素描/二次元/游戏/卡通等资源） —— */
.ai-tpl-head{display:flex;align-items:center;gap:10px;margin:10px 2px 6px;}
.ai-tpl-head span{flex:1;font-size:13px;color:#64748b;line-height:1.5;}
#aiPaintRandomBtn{flex:none;}
.ai-tpl-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:124px;overflow-y:auto;padding:2px;}
.ai-tpl-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;font-size:12.5px;line-height:1.25;
  border:1px solid #e2e8f0;border-radius:999px;background:#fff;color:#334155;cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s,color .15s;}
.ai-tpl-chip svg{width:13px;height:13px;flex:0 0 13px;opacity:.75;}
.ai-tpl-chip:hover{border-color:#38bdf8;color:#0369a1;background:#f0f9ff;}
.ai-paint-sel{display:flex;align-items:center;gap:6px;font-size:13px;color:#64748b;margin:0;}
.ai-paint-sel > span{flex:none;}
body.dark-theme .ai-tpl-head span{color:var(--text-3,#94a3b8);}
body.dark-theme .ai-paint-sel{color:var(--text-2);}
body.dark-theme .ai-tpl-chip{background:var(--surface-3,#1e293b);border-color:var(--border,#334155);color:var(--text-1,#e2e8f0);}
body.dark-theme .ai-tpl-chip:hover{border-color:#38bdf8;color:#7dd3fc;background:#0f2438;}
/* —— 转换器弹窗：图片/视频 ⇄ Base64（带预览 + TXT 导入导出） —— */
.conv-tip{font-size:12.5px;color:#64748b;margin:0 0 10px;line-height:1.6;}
.conv-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px;}
.conv-toolbar .btn{flex:1 1 auto;min-width:102px;padding:8px 10px;font-size:13px;white-space:nowrap;}
.conv-toolbar .btn:disabled{opacity:.45;cursor:not-allowed;}
.conv-preview{display:flex;align-items:center;justify-content:center;min-height:180px;max-height:280px;margin:4px 0 6px;
  border:1px dashed #cbd5e1;border-radius:10px;background:#f8fafc;overflow:hidden;color:#94a3b8;font-size:13px;text-align:center;padding:6px;}
.conv-preview img{max-width:100%;max-height:268px;border-radius:8px;object-fit:contain;}
.conv-preview video{max-width:100%;max-height:268px;border-radius:8px;background:#0f172a;}
.conv-meta{font-size:12px;color:#94a3b8;margin:6px 0 4px;word-break:break-all;line-height:1.6;}
#convOutput{width:100%;box-sizing:border-box;height:128px;font-family:'JetBrains Mono',Consolas,monospace;font-size:11.5px;line-height:1.5;
  padding:8px 10px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;color:#1e293b;resize:vertical;white-space:pre;overflow-wrap:anywhere;}
.conv-status{font-size:12.5px;color:#64748b;margin-top:8px;min-height:18px;line-height:1.5;}
body.dark-theme .conv-tip,
body.dark-theme .conv-status{color:var(--text-2,#94a3b8);}
body.dark-theme .conv-preview{border-color:var(--border,#334155);background:var(--surface-3,#1e293b);}
body.dark-theme .conv-meta{color:var(--text-3,#64748b);}
body.dark-theme #convOutput{background:var(--surface-3,#1e293b);border-color:var(--border,#334155);color:var(--text-1,#e2e8f0);}
@media (max-width:640px){
  .conv-toolbar .btn{min-width:calc(50% - 4px);}
  .conv-preview{min-height:150px;max-height:230px;}
  #convOutput{height:112px;}
}
@media (max-width:420px){
  .ai-tpl-chips{max-height:112px;}
}
body.dark-theme #aiPaintModal select,
body.dark-theme #converterModal select { background:var(--surface-3,#1e293b); border-color:var(--border,#334155); color:var(--text-1,#e2e8f0); }
body.dark-theme #aiPaintModal textarea,
body.dark-theme #aiPaintModal .ai-paint-sel select { border-color:var(--border,#334155); }
/* 对话框标题图标 */
.title-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: #fff;
  margin-right: 8px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.12));
}
.sig-dialog-title,
.share-modal .share-modal-title,
#bgSettingsModal h3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}
/* 左/右对齐按钮的文字对齐（对齐弹窗内）保持设计，但图标始终居中 */
.title-icon + .menu-label { color: inherit; }
/* 暗黑模式：SVG stroke 白色默认（title 已是白字） */
@media (max-width: 768px) {
  .title-icon { width: 18px; height: 18px; min-width: 18px; min-height: 18px; flex-basis: 18px; margin-right: 6px; }
}
@media (max-width: 480px) {
  .title-icon { width: 17px; height: 17px; min-width: 17px; min-height: 17px; flex-basis: 17px; }
}

/* 关于弹窗样式 */
.about-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.about-content h3 {
  margin: 0 0 4px;
  font-size: 19px;
  color: #1f2937;
}
.about-version {
  font-size: 15px;
  font-weight: 700;
  color: #6366f1;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.about-meta {
  text-align: left;
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 12px;
}
.about-desc {
  /* 描述文字占胶囊内容区 90% 宽并居中，避免整行长文贴边、换行后比例失衡 */
  width: 90%;
  margin: 0 auto;
  text-align: left;
  font-size: 14px;
  color: #64748b;
  line-height: 1.8;
}

/* 移动端适配（N3：logo 居中、菜单缩小、风格扁平化） */
@media screen and (max-width: 768px) {
  .toolbar {
    gap: 5px 6px;
    padding: 6px;
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--surface-glass);  /* 磨砂玻璃跟随主题 */
    box-shadow: none;
  }

  /* HarmonyOS 模块卡片：移动端更紧凑，允许组内换行 */
  .toolbar-group {
    flex-wrap: wrap;
    padding: 3px 4px;
    gap: 3px;
    border-radius: var(--radius-sm);
  }
  /* 移动端组内分隔竖线隐藏，节省横向空间 */
  .toolbar-group .grp-sep { display: none; }
  /* 组内 size-opacity-group 移动端横向占满 */
  .toolbar-group > .size-opacity-group { flex: 1 1 140px; }

  .logo {
    flex: 1 1 100%;
    order: -1;
    justify-content: center;       /* N3 logo 居中 */
    padding: 2px 0 5px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
  }
  .logo-svg {
    width: 22px;
    height: 22px;
    filter: none;                  /* 扁平化：去投影 */
  }
  .logo-text {
    font-size: 14px;
    color: var(--text-1);
  }

  .toolbar label {
    font-size: 11px;
    display: flex;
    flex-wrap: wrap;
    min-height: 36px;
    align-items: center;
  }

  .toolbar select,
  .toolbar input[type="text"] {
    height: 36px;
    min-height: 36px;
    font-size: 12px;
    min-width: 54px;
    border-radius: var(--radius-xs);  /* 扁平化：小圆角 */
    box-shadow: none;
  }
  /* 移动端圆形选色板：稍大保证触控面积 */
  .toolbar input[type="color"] {
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
  }
  .toolbar input[type="range"] {
    flex: 1 1 auto;
    height: 3px;
    min-height: 3px;
  }

  .btn {
    min-height: 36px;
    min-width: 40px;
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: var(--radius-xs);  /* 扁平化：小圆角 */
    background-image: none;        /* 扁平化：去渐变 */
    background-color: var(--surface-2);
    box-shadow: none;
    transform: none;
  }
  .btn:active:not(:disabled) {
    background-color: var(--selected-bg);
    color: var(--selected-fg);
    transform: scale(0.94);  /* 移动端按压缩放比桌面 0.96 更明显，补偿小按钮触摸反馈不足 */
    box-shadow: none;
  }

  .coord-bar {
    gap: 4px 8px;
    font-size: 12px;
    padding: 5px 8px;
    min-height: 36px;
    line-height: 24px;
    flex: 1 1 100%;
    order: 99;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background-image: none;
    background-color: var(--surface-2);
    box-shadow: none;
  }

  .coord-bar b {
    min-width: 24px;
    display: inline-block;
  }

  #showToolbarBtn {
    /* 移动端不显示恢复按钮：常驻右上角会遮挡子菜单（桌面端不受影响） */
    display: none !important;
    width: 42px;
    height: 42px;
    font-size: 20px;
    border-radius: var(--radius-sm);
    background: var(--surface-glass);
    box-shadow: var(--shadow-2);
    right: 10px;      /* 移动端固定到右上角 */
    left: auto;
    top: 10px;
  }
  /* 移动端批注模式同样隐藏：body.annotating #showToolbarBtn(1,1,1) 比(1,0,0)优先级高会强显，
     此处同特异性且源码顺序在后，覆盖回隐藏（桌面端批注模式仍常驻显示，不受影响） */
  body.annotating #showToolbarBtn {
    display: none !important;
  }

  .zoom-controls {
    order: 0;
  }
  /* 移动端防止子菜单靠右被切断 */
  .menu-item:nth-last-child(-n+2) > .submenu {
    left: auto;
    right: 0;
  }
  /* 画布微标：手机屏紧凑化，避免叠放 */
  #canvasBadges {
    left: 6px !important;
    bottom: 6px !important;
    gap: 4px !important;
  }
  #canvasBadges .badge {
    font-size: 10px !important;
    padding: 2px 5px !important;
    border-radius: 6px !important;
  }
  /* 对齐弹窗：小屏压缩间距 + 加大按钮触控面积 */
  #alignPanel .sig-dialog { width: min(94vw,420px) !important; }
  #alignPanel .btn { min-height: 40px !important; height: 40px !important; font-size: 12px !important; }
  .align-grid { gap: 6px !important; }
  /* 画布光标：仅触屏（hover:none，无鼠标悬停）设备强制 fallback 系统语义；
     鼠标设备即使窄窗口（<768px）也保留自定义光标（含橡皮擦圆圈、点删准星等），否则内联 SVG 光标会被 !important 盖掉 */
  @media (hover: none) {
    #canvas { cursor: default !important; }
    #canvas.cc-paint, #canvas.cc-pencil, #canvas.cc-pen, #canvas.cc-brush,
    #canvas.cc-ink, #canvas.cc-inkwash, #canvas.cc-marker, #canvas.cc-highlighter,
    #canvas.cc-eraser, #canvas.cc-select, #canvas.cc-lasso, #canvas.cc-move,
    #canvas.cc-delete, #canvas.cc-text, #canvas.cc-shape, #canvas.cc-fill, #canvas.cc-bucket {
      cursor: crosshair !important;
    }
    #canvas.cc-text { cursor: text !important; }
    #canvas.cc-move { cursor: grab !important; }
    #canvas.cc-delete { cursor: pointer !important; }
  }
  /* 画板安全区：顶栏下推 & 手势区底留白（避免 iOS / Android 全屏手势条遮挡菜单/徽标） */
  .toolbar {
    padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
    padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
  }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* 小屏下主菜单按钮「笔刷 工具」等按钮内文字过长截断 + 图标优先保留 */
  .menu-item > .btn { max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 同时在 ≤1024px 与平板/桌面浏览器窄窗口（未到 768 断点）也提供安全区 + 截断兜底，防止移动端模式只在 768 以下生效 */
}
/* ≤1024px 窗口（含部分平板/小尺寸笔记本/「窄化的桌面窗口」）统一应用基础安全区 + 徽标紧凑 + 文字截断，避免仅有 @media 768 生效 */
@media (max-width: 1024px) {
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .toolbar {
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    padding-left: max(6px, env(safe-area-inset-left, 0px));
    padding-right: max(6px, env(safe-area-inset-right, 0px));
  }
  /* 徽标在小窗口下也贴边紧凑（因为 PC 窄窗口或带 touch 输入的笔记本很常见） */
  #canvasBadges { left: max(10px, env(safe-area-inset-left, 0px)); bottom: max(10px, env(safe-area-inset-bottom, 0px)); gap: 5px; }
  #canvasBadges .badge { font-size: 11px; padding: 2px 6px; }
  .menu-item > .btn { max-width: 86px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 触屏设备（无 hover/mouse）即使在 900–1024 宽度，也强制 cc-* 光标 fallback 到系统语义 */
  @media (hover: none) {
    #canvas { cursor: default !important; }
    #canvas.cc-paint, #canvas.cc-pencil, #canvas.cc-pen, #canvas.cc-brush,
    #canvas.cc-ink, #canvas.cc-inkwash, #canvas.cc-marker, #canvas.cc-highlighter,
    #canvas.cc-eraser, #canvas.cc-select, #canvas.cc-lasso, #canvas.cc-move,
    #canvas.cc-delete, #canvas.cc-text, #canvas.cc-shape, #canvas.cc-fill, #canvas.cc-bucket {
      cursor: crosshair !important;
    }
    #canvas.cc-text { cursor: text !important; }
    #canvas.cc-move { cursor: grab !important; }
    #canvas.cc-delete { cursor: pointer !important; }
  }
}

@media screen and (max-width: 480px) {
  .toolbar {
    gap: 5px 6px;
    padding: 7px 6px;
    max-height: 62vh;
  }
  .toolbar label {
    width: 100%;
  }
  .toolbar select {
    width: 100%;
  }
  .toolbar input[type="text"] {
    width: 100px;
  }
  .logo-text {
    font-size: 13px;
  }
  .btn {
    font-size: 11px;
    padding: 0 6px;
    min-height: 38px !important;
  }
  .share-modal-content,
  .about-content {
    padding: 20px 16px !important;
    max-width: 94% !important;
  }
  /* 超小屏：对齐弹窗 6 按钮转两行 + 保持方向语义 */
  .align-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 5px !important; }
  #alignPanel .btn { min-height: 38px !important; height: 38px !important; font-size: 11px !important; padding: 0 4px !important; }
  /* 子菜单弹出：靠底部弹出时自动改为向上展开，不超出屏幕 */
  .menu-item .submenu {
    max-height: 50dvh !important;
    transform-origin: top center;
  }
  /* 徽标更紧凑，两行叠放也不遮挡 */
  #canvasBadges { flex-direction: column; align-items: flex-start; left: 4px !important; bottom: 4px !important; }
  #canvasBadges .badge { font-size: 9.5px !important; padding: 1.5px 4px !important; }
  /* 480 以下画布上方操作栏按钮的下拉箭头「▾」可视符号保留但字号压小 */
  .menu-item > .btn::after { font-size: 9px !important; }
  /* 坐标栏：超小屏换行以两行显示信息，一行容纳 X/Y/P 一行容纳 Tilt/Rate，避免被截断 */
  .coord-bar { flex-wrap: wrap; font-size: 11px; line-height: 18px; min-height: auto; padding: 4px 6px; }
  /* 小屏主题切换、保存、更多等按钮：尺寸统一触控面积，保证 38x38 触控区 */
  .themeToggleBtn, .toolbar > .toolbar-row > .btn { min-width: 40px !important; min-height: 40px !important; }
}

/* ===== 暗黑/明亮主题（body.dark-theme = 暗黑；默认明亮） ===== */
/* 基础组件已通过 :root 变量驱动暗黑配色，此处仅补充变量未覆盖的语义细节 */
html, body { background: var(--bg); }
body.dark-theme,
body.dark-theme html { background: var(--bg); }
body.dark-theme .toolbar-row + .toolbar-row { border-top-color: var(--border); }
body.dark-theme .toolbar label,
body.dark-theme .coord-bar,
body.dark-theme .toolbar span { color: var(--text-2); }
/* 暗黑按钮：保留轻量渐变质感（比纯色更有层次），主色用新靛蓝 */
body.dark-theme .btn {
  background-image: linear-gradient(180deg, #273246 0%, #1c2536 100%);
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text-1);
  box-shadow: var(--shadow-1);
}
@media (hover: hover) {
  body.dark-theme .btn:hover:not(:disabled) {
    background-image: linear-gradient(180deg, #2c3a52 0%, #22304a 100%);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 4px 12px var(--accent-glow);
  }
}
/* 录制 / 回放进行中：鼠标悬停、按下时必须保持红色呼吸配色（样式与 .btn.recording/.btn.replaying 完全一致）。
   否则会被上面/上面的 hover、active 规则重绘成浅色底 ——「鼠标停上去呼吸就没了」，看起来像录制已停止。
   这里用更高特异性压住配色，呼吸动画与位移反馈保持不变（只接管配色，不动 transform）。 */
.btn.recording:hover:not(:disabled),
.btn.recording:active:not(:disabled),
.btn.replaying:hover:not(:disabled),
.btn.replaying:active:not(:disabled),
body.dark-theme .btn.recording:hover:not(:disabled),
body.dark-theme .btn.recording:active:not(:disabled),
body.dark-theme .btn.replaying:hover:not(:disabled),
body.dark-theme .btn.replaying:active:not(:disabled) {
  background-image: linear-gradient(180deg, #ff7875 0%, #ff4d4f 100%);
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  color: #fff;
  animation: pulse 1s infinite;
}
/* 录制按钮四段式配色（主栏「录制」）：
   ① 开启录制 = .recording  红色 + pulse 呼吸，一直呼吸
   ② 暂停录制 = .rec-paused 绿色，停止呼吸
   ③ 恢复录制 = .recording  回到红色呼吸
   ④ 结束录制 = .rec-done   紫色，停留 5s 后自动回到空闲
   与 .recording 同理：hover / active / 暗色主题都必须锁死配色，否则鼠标移上去就掉色。 */
.btn.rec-paused,
.btn.rec-paused:hover:not(:disabled),
.btn.rec-paused:active:not(:disabled),
body.dark-theme .btn.rec-paused,
body.dark-theme .btn.rec-paused:hover:not(:disabled),
body.dark-theme .btn.rec-paused:active:not(:disabled) {
  background-image: linear-gradient(180deg, #73d13d 0%, #52c41a 100%);
  background-color: #52c41a;
  border-color: #52c41a;
  color: #fff;
  animation: none;
  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.35);
}
.btn.rec-paused > svg,
.btn.rec-paused > .menu-label,
body.dark-theme .btn.rec-paused > svg,
body.dark-theme .btn.rec-paused > .menu-label { color: #fff; fill: currentColor; }
.btn.rec-done,
.btn.rec-done:hover:not(:disabled),
.btn.rec-done:active:not(:disabled),
body.dark-theme .btn.rec-done,
body.dark-theme .btn.rec-done:hover:not(:disabled),
body.dark-theme .btn.rec-done:active:not(:disabled) {
  background-image: linear-gradient(180deg, #b37feb 0%, #722ed1 100%);
  background-color: #722ed1;
  border-color: #722ed1;
  color: #fff;
  animation: none;
  box-shadow: 0 2px 8px rgba(114, 46, 209, 0.35);
}
.btn.rec-done > svg,
.btn.rec-done > .menu-label,
body.dark-theme .btn.rec-done > svg,
body.dark-theme .btn.rec-done > .menu-label { color: #fff; fill: currentColor; }
/* 常驻提示里的「静态图标」位：与 .hc-cap-spin 同尺寸同位（暂停 / 结束 / 已保存） */
#captionBar .hc-cap-ic {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  animation: none;
}
/* 「继续录制中···」提示里的矢量图标位：与 .hc-cap-spin 同尺寸同位，
   描边/填充跟随提示条文字色（sprite 内是 stroke="currentColor"） */
#captionBar .hc-cap-ic svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  color: inherit;
}
body.dark-theme .btn.active,
body.dark-theme .btn:disabled { color: var(--text-2); }
body.dark-theme .btn.active { border-color: var(--accent); color: var(--accent); }
body.dark-theme .menu-item .submenu {
  background: var(--surface-elev);
  border-color: var(--border);
  box-shadow: var(--shadow-3);
}
body.dark-theme .submenu-sep { border-top-color: var(--border); }
body.dark-theme .size-opacity-group {
  border-color: var(--border);
  background: var(--surface-2);
}
body.dark-theme .coord-bar {
  background: linear-gradient(180deg, #273246 0%, #1c2536 100%);
  border-color: var(--border);
}
body.dark-theme .multi-slide-container {
  background-color: var(--surface);
  background-image: linear-gradient(180deg, #273246 0%, #1c2536 100%);
  border-color: var(--border);
}
body.dark-theme .multi-slide-container .status-text { color: var(--text-2); }
body.dark-theme .multi-slide-container.active {
  border-color: var(--accent-strong);
  background-color: var(--accent-soft);
  background-image: linear-gradient(180deg, var(--accent-soft) 0%, #312e81 100%);
}
body.dark-theme .float-panel,
body.dark-theme .sig-dialog,
body.dark-theme .share-modal-content,
body.dark-theme .hcd-dialog {
  background: var(--surface);
  color: var(--text-2);
}
/* 软键盘/计算器「画布悬浮胶囊」暗色适配 */
body.dark-theme .tool-cap { background: var(--surface); color: var(--text-2); }
body.dark-theme .tool-cap-head { background: var(--surface); }
body.dark-theme .tool-cap-head > span { color: var(--text-1); }
body.dark-theme #softKeyboardInput {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-1);
}
body.dark-theme .sig-dialog-title,
body.dark-theme .hcd-dialog-title { color: #fff; }
body.dark-theme .sig-dialog input[type="text"],
body.dark-theme .sig-dialog input[type="number"],
body.dark-theme .share-modal-content input[type="text"],
body.dark-theme .hcd-dialog-input {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-1);
}
body.dark-theme .coord-bar b,
body.dark-theme #zoomLabel { color: var(--text-1); }
body.dark-theme #showToolbarBtn,
body.dark-theme #toolbarCurtainBtn {
  background-color: var(--surface);
  background-image: none;
  border-color: var(--border);
  color: var(--text-1);
}
/* —— 弹窗暗黑适配：标题用新靛蓝→紫罗兰渐变（变量已设，此处仅补正文文字色） —— */
body.dark-theme .sig-dialog,
body.dark-theme .sig-dialog-body { color: var(--text-2); }
body.dark-theme .hcd-dialog-body { color: var(--text-2); }
body.dark-theme .hcd-dialog { border-color: var(--border); }
/* —— 单图标 APK（?apk=1）：打开默认收起上下胶囊（JS 加 body.toolbar-hidden，纯画布）。
      工具栏显隐只走一套开关：#showToolbarBtn(≡) 严格跟随 body.toolbar-hidden ——
      收起态（toolbar-hidden）：仅左上角显示 ≡；点击它展开上下胶囊并自动消失（不常驻，
      因此展开后不会与顶胶囊重叠）；再收起时点「上胶囊」内的眼睛图标(隐藏菜单 #hideBtn)，
      ≡ 再次出现。无需新增任何常驻按钮。 */
body.apk-kiosk-ui #showToolbarBtn {
  display: none !important;
}
body.apk-kiosk-ui.toolbar-hidden #showToolbarBtn {
  display: flex !important;
  left: 10px;
  right: auto;
  top: 10px;
  width: 36px;
  height: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  z-index: 990;
}
body.apk-kiosk-ui.toolbar-hidden #showToolbarBtn svg {
  width: 18px;
  height: 18px;
  display: initial;
}
/* —— APK（Android WebView）内：进入全屏由原生沉浸式接管，顶部白胶囊不再显示「全屏」按钮
      （含其 SVG 图标）；普通网页 / Windows 桌面 / 单图标模式(apk-kiosk-ui 已在 buildToolbar 跳过)不受影响 —— */
body.apk #fullscreenBtn { display: none !important; }
/* —— 移动端伪全屏：iPhone Safari 等无 Fullscreen API（或请求被浏览器拒绝）的移动浏览器，
     点「全屏」降级为本页伪全屏：隐藏上下胶囊等浮层、画布保持整幅视口，右上角出现退出胶囊。
     仅 JS 命中“移动端 & 非 APK”时加 body.fs-emu；APK 不受影响（保持隐藏/原生沉浸）—— */
#fsEmuExit {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  z-index: 2147483645;
  display: none;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.28);
}
body.fs-emu #fsEmuExit { display: flex; }
body.fs-emu { overflow: hidden !important; }
body.fs-emu .ex-topwrap,
body.fs-emu .ex-bottombar,
body.fs-emu .ex-leftbar,
body.fs-emu #hintViewer,
body.fs-emu #canvasBadges,
body.fs-emu #showToolbarBtn,
body.fs-emu #toolbarCurtainBtn { display: none !important; }
/* —— 画布右键菜单（主画布空白区/元素右键，参考 HCDRAW；文字型简洁菜单）—— */
.ctx-menu {
  position: fixed;
  z-index: 2147483646;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 176px;
  max-width: min(300px, 92vw);
  box-sizing: border-box;
  padding: 6px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #d7dfea);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.18);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-color, #1e293b);
  user-select: none;
}
.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.ctx-menu-item:hover { background: var(--hover-bg, #eef2ff); }
.ctx-menu-item:active { background: var(--active-bg, #dbe3ff); }
.ctx-menu-item.danger { color: #ef4444; }
.ctx-menu-item.danger:hover { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.ctx-menu-item .ctx-check { width: 15px; flex: none; display: flex; align-items: center; justify-content: flex-start; color: var(--accent, #2563eb); font-size: 12px; }
.ctx-menu-item .ctx-item-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ctx-menu-item .ctx-kbd {
  margin-left: auto; font-size: 11px; color: #6b7280;
  background: rgba(128, 128, 128, 0.1); border-radius: 4px; padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap;
}
.ctx-menu-item.danger .ctx-kbd { color: #f87171; }
body.dark-theme .ctx-menu-item .ctx-kbd { color: #b6becb; }
.ctx-menu-sep { height: 1px; margin: 5px 8px; background: var(--border-color, #e3e8f0); }
/* 暗黑：危险项（删除/清空等）用更亮的红，保证深底对比（文本/快捷键底色取令牌已映射） */
body.dark-theme .ctx-menu-item.danger { color: #f87171; }
body.dark-theme .ctx-menu-item.danger:hover { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
/* —— 元素属性胶囊（右键空白「元素属性」勾选项开启；长留；默认右侧同画笔设置胶囊高度，标题栏可自由拖动） —— */
.hc-prop-cap {
  /* 默认上边距 = 顶部主胶囊下缘 + 8px（与 #hintViewer / 画笔设置胶囊同一距离）；运行时由 JS 动态校准 */
  position: fixed; right: 16px; top: 62px; transform: none;
  z-index: 99980; width: 320px; max-width: calc(100vw - 24px);   /* 宽度与画笔设置胶囊一致 */
  max-height: min(76vh, 520px); display: flex; flex-direction: column;
  box-sizing: border-box;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #d7dfea);
  border-radius: var(--radius-card, 12px);
  box-shadow: var(--card-shadow-hover, var(--card-shadow, 0 10px 30px rgba(15, 23, 42, 0.16)));
  font-size: 12.5px; line-height: 1.45; color: var(--text-color, #1e293b);
  user-select: none;
}
/* 关键修复：.hc-prop-cap 自带 display:flex 会覆盖 [hidden]，必须用 [hidden] 显式隐藏（同 .url-bar 修复思路） */
.hc-prop-cap[hidden] { display: none !important; }
body.dark-theme .hc-prop-cap { box-shadow: var(--card-shadow-hover, var(--card-shadow, 0 12px 34px rgba(0, 0, 0, 0.5))); }
/* —— 元素图层胶囊（右键图层操作后自动弹出；样式/尺寸同元素属性胶囊；长留） —— */
.hc-layers-cap .hc-layers-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; overflow: hidden;
}
/* 数量行：与「图层管理」的 #layersCount 同款内容与样式 */
.hc-layers-cap .hc-layers-count { font-size: 12px; color: #9ca3af; font-weight: 400; }
/* 列表容器：与「图层管理」的 #layersList 同款描边/圆角/底色；默认约显示 3 个元素，其余拉动右侧滚动条 */
.hc-layers-cap .hc-layers-list {
  border: 1px solid #eef0f4; border-radius: 10px; background: #fafbfc;
  text-align: left;
  max-height: 148px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.hc-layers-cap .hc-layers-list::-webkit-scrollbar { width: 8px; }
.hc-layers-cap .hc-layers-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.hc-layers-cap .hc-layers-list .layer-row { gap: 4px; }
.hc-layers-cap .hc-layers-list .layer-row.is-hidden { opacity: 0.45; }
/* 行内层级按钮直接复用「图层管理」的 .layer-row .layer-op 样式（无需额外规则） */
.hc-layers-cap .hc-layers-empty { padding: 12px 8px; color: #94a3b8; font-size: 12px; text-align: center; }
/* 标题行 = 拖拽把手（与 .bs-capsule-head 同款交互语义：点击把手拖动整颗胶囊） */
.hc-prop-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-bottom: 1px dashed var(--border-color, #e3e8f0);
  font-weight: 600;
  cursor: move; user-select: none; -webkit-user-select: none;
  touch-action: none;            /* 触摸拖拽时禁止页面滚动 */
}
.hc-prop-head svg { width: 14px; height: 14px; flex: none; }
.hc-prop-close {
  margin-left: auto; width: 22px; height: 22px; padding: 0; border: none; background: none;
  color: var(--text-2, #6b7280); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.hc-prop-close:hover { background: var(--hover-bg, #eef2ff); color: var(--text-1, #111); }
.hc-prop-body { overflow-y: auto; overflow-x: hidden; padding: 8px 10px; flex: 1; }
.hc-prop-empty { color: var(--text-2, #6b7280); padding: 10px 4px; text-align: center; font-size: 12px; }
/* 顶部「元素名」行：显示当前单元素的类型/内容名称（随语言即时重译） */
.hc-prop-name {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 0 0 8px; padding: 6px 8px;
  background: var(--hover-bg, #f1f5f9); border-radius: 8px;
  font-weight: 600; font-size: 12.5px; color: var(--text-1, #111827);
  overflow: hidden;
}
.hc-prop-name .hc-prop-name-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-prop-row { display: flex; align-items: center; gap: 6px; margin: 7px 0; flex-wrap: wrap; }
.hc-prop-row .hc-prop-ico { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--text-2, #6b7280); }
.hc-prop-row .hc-prop-ico svg { width: 16px; height: 16px; }
.hc-prop-row .hc-label { flex: none; min-width: 38px; }
.hc-prop-row .hc-preset-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hc-prop-row .sig-color-dot { width: 18px; height: 18px; }
.hc-prop-row input[type="range"] { flex: 1 1 70px; min-width: 50px; }
.hc-prop-row .hc-val { width: 52px; box-sizing: border-box; height: 24px; border: 1px solid var(--border-color, #d7dfea); border-radius: 6px; background: transparent; color: inherit; font-size: 12px; text-align: center; }
.hc-prop-row input[type="color"] { width: 26px; height: 24px; padding: 1px; border: 1px solid var(--border-color, #d7dfea); border-radius: 6px; background: transparent; }
.hc-prop-linkrow { display: flex; align-items: center; gap: 5px; margin: 7px 0; }
.hc-prop-linkrow input { flex: 1; min-width: 0; box-sizing: border-box; height: 25px; border: 1px solid var(--border-color, #d7dfea); border-radius: 6px; background: transparent; color: inherit; font-size: 12px; padding: 0 6px; }
.hc-prop-linkrow button { height: 25px; padding: 0 8px; border: 1px solid var(--border-color, #d7dfea); border-radius: 6px; background: transparent; color: inherit; font-size: 12px; cursor: pointer; }
.hc-prop-linkrow button:hover { background: var(--hover-bg, #eef2ff); }
.hc-prop-title { margin: 8px 0 2px; font-size: 11px; color: var(--text-2, #6b7280); font-weight: 600; }
.hc-prop-cap .bs-font-chip { border-radius: 6px; }
@media (max-width: 768px) {
  .hc-prop-cap { right: 8px; width: 320px; max-width: calc(100vw - 16px); }
}
body.dark-theme .hcd-dialog-input {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-1);
}
body.dark-theme .sig-dialog b,
body.dark-theme .sig-dialog label,
body.dark-theme .share-modal-content,
body.dark-theme .share-modal-content h3 { color: var(--text-1); }
/* —— 分享/关于弹窗（sig-modal 风格）暗黑适配 —— */
body.dark-theme .share-item,
body.dark-theme #aboutName { color: var(--text-1); }
body.dark-theme #qrcodeTip { color: var(--text-2); }
body.dark-theme #shareTip { color: var(--text-3); }   /* 暗色下同样调淡 */
body.dark-theme .about-meta { background: var(--surface-3); color: var(--text-2); }
body.dark-theme .about-desc { color: var(--text-3); }
body.dark-theme .sig-tools-label { color: var(--text-3); }
body.dark-theme .sig-tip { color: var(--text-2); }
body.dark-theme .sig-color-dot { outline-color: var(--border-strong); }
body.dark-theme #sigColorCustom { border-color: var(--border-strong); }
body.dark-theme .form-select,
body.dark-theme .form-input {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-1);
}
body.dark-theme .sig-dialog .mono,
body.dark-theme .pt-log { color: var(--accent); }
body.dark-theme .hcd-dialog-actions .btn {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-1);
}

/* ===== 全局响应式适配（手机/平板/窄窗口） ===== */
/* 平板及以下：压缩间距与按钮宽度，防止工具栏溢出 */
@media (max-width: 1024px) {
  .toolbar { gap: 6px 8px; padding: 6px 8px; }
  .toolbar-row { gap: 6px 8px; }
  .btn { padding: 0 8px; }
  .coord-bar { gap: 4px 8px; padding: 4px 10px; font-size: 12px; }
}
/* 手机竖屏：菜单栏按行横向滑动（现代移动工具栏模式），按钮不换行不压缩 */
@media (max-width: 640px) {
  .toolbar {
    max-height: 46dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    gap: 5px 6px;
    padding: 6px;
  }
  /* 每一排 = 单行横向滑动；scroll-snap 让按钮吸附对齐，滑动有「档位感」 */
  .toolbar-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: 2px;
    padding-bottom: 2px;
    /* 右缘渐隐：提示该行还有更多内容可滑 */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent);
  }
  /* 滑动到最右端时取消右侧渐隐，避免「看似还有内容」的误导 */
  .toolbar-row.at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* 隐藏滚动条（横滚行/工具栏纵向兜底/下拉子菜单）：触屏靠手势滑动，无需滚动条占位 */
  .toolbar-row::-webkit-scrollbar,
  .toolbar::-webkit-scrollbar,
  .menu-item .submenu::-webkit-scrollbar { display: none; }
  .toolbar-row,
  .toolbar,
  .menu-item .submenu { scrollbar-width: none; -ms-overflow-style: none; }
  /* 行内所有元素均不收缩、参与吸附 */
  .toolbar-row > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  /* 坐标条单独占满一行宽度（横向滑动行内保持居中） */
  .toolbar-row > .coord-bar {
    min-width: 100%;
    justify-content: center;
  }
  .toolbar-row + .toolbar-row { padding-top: 6px; }
  .btn {
    height: 34px;
    min-height: 40px;
    font-size: 12px;
    padding: 0 10px;
  }
  .menu-item > .btn { min-width: 48px; }
  .menu-item .submenu { max-height: 56dvh; }
  .size-opacity-group input[type="range"] { width: 56px; }
  .toolbar input[type="range"] { width: 60px; }
  /* 移动端拖动条更细更小 */
  .toolbar input[type='range'], .size-opacity-group input[type='range'] { height: 1px; min-height: 1px; }
  input[type='range']::-webkit-slider-thumb { width: 12px; height: 12px; border-width: 1.5px; margin-top: -4.5px; }
  input[type='range']::-moz-range-thumb { width: 12px; height: 12px; border-width: 1.5px; }
  .multi-slide-container { min-width: 150px; }
  .coord-bar { margin-left: 0; width: 100%; justify-content: center; }
  /* 弹窗在小屏铺满宽度，标题栏/正文自适应 */
  .sig-dialog { width: 96vw !important; max-height: 88dvh; }
  .share-modal-content { max-width: 96vw !important; max-height: 88dvh; overflow-y: auto; }
  /* 批注栏小屏换行不遮挡 */
  #annotateBar { flex-wrap: wrap; max-width: 96vw; gap: 4px; }
}
/* 手机横屏（矮窗口）：进一步压缩工具栏 */
@media (max-height: 480px) {
  .toolbar { max-height: 70dvh; }
  .btn { min-height: 34px; height: 30px; }
  /* 横屏移动端：拖动条轨道线同样收细到 1px */
  .toolbar input[type='range'], .size-opacity-group input[type='range'] { height: 1px; min-height: 1px; }
  .toolbar-row::-webkit-scrollbar,
  .toolbar::-webkit-scrollbar,
  .menu-item .submenu::-webkit-scrollbar { display: none; }
  .toolbar-row,
  .toolbar,
  .menu-item .submenu { scrollbar-width: none; -ms-overflow-style: none; }
}

/* ===== 移动端白板 app 风格：侧边浮动工具栏 + 更多底部抽屉（默认隐藏，移动端显示） ===== */
.m-side-toolbar,
.m-more-overlay,
.m-more-sheet,
.m-more-trigger { display: none !important; }

/* ===== 移动端 / 窄屏：HCDRAW 风格统一适配（保留白胶囊 + 左侧图标带，仅紧凑化）===== */
@media (max-width: 768px) {
  /* —— 鸿蒙白板容器全部隐藏 —— */
  .m-side-toolbar,
  .m-more-trigger,
  .m-more-sheet,
  .m-more-overlay,
  .m-more-close { display: none !important; }

  /* —— 取消原移动端对 SVG / menu-label 的强制隐藏（HCDRAW 保留 18×18 SVG）—— */
  .toolbar .btn svg,
  .toolbar svg,
  .btn svg,
  .ex-topwrap svg,
  .ex-leftbar svg { display: initial !important; }
  /* 移动端：一级按钮仍不显示中文 label（保持纯图标）；但子菜单内文字 label 必须可见 */
  .ex-topwrap > .ex-group > .btn > .menu-label,
  .ex-topwrap > .ex-group > .menu-item > .btn > .menu-label,
  .ex-bottombar > .ex-group > .btn > .menu-label,
  .ex-bottombar > .ex-group > .menu-item > .btn > .menu-label,
  .ex-leftbar > .btn > .menu-label,
  .ex-leftbar > .menu-item > .btn > .menu-label,
  .toolbar .btn > .menu-label,
  .toolbar .menu-item > .btn > .menu-label { display: none !important; }
  .menu-item > .btn::after { display: none !important; }

  /* —— 移动端取消 @media 640 的工具栏横滑/纵向溢出，统一改为顶部白胶囊 + 自动换行 —— */
  .toolbar, .toolbar-row {
    max-height: none !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* —— 顶部白胶囊（小屏优化：自适应居中 + 横滑吸附）—— */
  .ex-topwrap {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: calc(100% - 16px) !important;
    padding: 3px !important;
    border-radius: 8px !important;
    gap: 1px !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* 注意：不再使用 scroll-snap-type/align —— 触屏 tap 聚焦按钮会触发浏览器
       「滚动聚焦元素到可视区」，proximity 吸附会把胶囊整体甩到某个分组的起始位置
       （表现为「点笔刷图标时胶囊/图标跑到左侧」）。改为由 JS 的胶囊滚动守卫接管。 */
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .ex-topwrap .ex-group {
    flex: 0 0 auto !important;
    padding: 0 1px !important;
    scroll-snap-align: none !important;
  }
  /* 组间分隔竖线保留 1px */
  .ex-topwrap .ex-group + .ex-group::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--border);
    opacity: 0.6;
  }
  .ex-topwrap::-webkit-scrollbar { display: none; }
  .ex-topwrap { scrollbar-width: none; -ms-overflow-style: none; }

  /* —— 顶栏按钮缩小到 32×32，SVG 16×16 —— */
  .ex-topwrap .btn,
  .ex-topwrap .menu-item > .btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 0 !important;
  }
  /* 移动端按压缩放比桌面 0.96 更明显（scale 0.94），补偿小按钮触摸反馈不足；桌面端 0.96 不变 */
  .ex-topwrap .btn:active,
  .ex-topwrap .menu-item:active > .btn,
  .ex-bottombar .btn:active,
  .ex-bottombar .menu-item:active > .btn {
    transform: scale(0.94) !important;
  }
  .ex-topwrap .btn svg,
  .ex-topwrap .menu-item > .btn svg,
  .ex-topwrap .submenu-icon {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
  }
  /* 颜色块缩小 */
  .ex-topwrap #penColor {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
  }
  .ex-topwrap #penColorLabel {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  /* 橡皮擦滑块：移动端 50×32 紧凑圆点（50px 放不下「画笔/橡皮擦」文字，故隐藏文字，靠颜色态反馈：armed 红 / clearing 绿） */
  .ex-topwrap .multi-slide-container {
    min-width: 50px !important;
    width: 50px !important;
    height: 32px !important;
    border-radius: var(--radius-md) !important;
  }
  .ex-topwrap .multi-slide-container .slide-knob {
    width: 20px !important;
    height: 20px !important;
  }
  .ex-topwrap .multi-slide-container .slide-knob > svg {
    width: 16px !important;
    height: 16px !important;   /* 与移动端其它 16×16 SVG 图标一致 */
  }
  /* 50px 宽放不下「画笔/橡皮擦」文字 + 20px knob（重叠遮挡），故隐藏文字，
     靠颜色态反馈：armed 红 / clearing 绿；模式名通过 knob 内 SVG 图标区分 */
  .ex-topwrap .multi-slide-container .status-text { display: none !important; }
  /* range 缩短 */
  .ex-topwrap input[type="range"] {
    width: 64px !important;
  }
  .ex-topwrap .size-opacity-group {
    padding: 2px !important;
    min-width: auto !important;
    box-shadow: none !important;
  }
  .ex-topwrap .zoom-controls {
    gap: 2px !important;
  }
  .ex-topwrap .zoom-controls .btn {
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /* —— 左侧图标带（小屏下折叠：变成底部横排或左上短列）
        保持左侧但缩小到 36px 宽 + 按钮 30×30 —— */
  .ex-leftbar {
    left: 6px !important;
    top: calc(62px + env(safe-area-inset-top, 0px)) !important;
    width: 36px !important;
    padding: 3px !important;
    gap: 2px !important;
    border-radius: 6px !important;
  }
  .ex-leftbar .btn,
  .ex-leftbar .menu-item > .btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }
  .ex-leftbar .btn svg,
  .ex-leftbar .menu-item > .btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  /* 子菜单：移动端从左侧展开后不要超屏，如屏幕太窄则改为在元素下方向下展开 + 最小宽 180px */
  /* 注：不写 -webkit-overflow-scrolling:touch —— 它会给下拉菜单再套一层「惯性快滚」合成层，
     部分 Android WebView/手机浏览器下该层文字偶发不被栅格化（菜单展开但文字空白，手指滑过才显形） */
  .ex-leftbar .menu-item .submenu {
    left: 100% !important;
    top: 0 !important;
    margin: 0 0 0 6px !important;
    max-width: calc(100vw - 64px) !important;
    max-height: 70dvh !important;
    overflow-y: auto !important;
  }
  /* 顶部顶栏子菜单：移动端下方向下展开，避免被 safe-area 裁切 */
  .ex-topwrap .menu-item .submenu {
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    transform: none !important;
    max-height: 70dvh !important;
    overflow-y: auto !important;
  }

  /* —— ex-bottombar（小屏）：自适应居中横滑，子菜单向上弹出 —— */
  .ex-bottombar {
    bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: calc(100% - 16px) !important;
    padding: 3px !important;
    border-radius: 8px !important;
    gap: 1px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;  /* 同上胶囊：内容左起流式，居中会在溢出时把左侧「视图」组挤出不可达 */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* 不再用 scroll-snap：点按聚焦会导致胶囊位移串位，滚动由 JS 滚动守卫接管 */
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .ex-bottombar::-webkit-scrollbar { display: none; }
  .ex-bottombar { scrollbar-width: none; -ms-overflow-style: none; }
  .ex-bottombar .ex-group {
    flex: 0 0 auto !important;
    padding: 0 1px !important;
    scroll-snap-align: none !important;
  }
  .ex-bottombar .btn,
  .ex-bottombar .menu-item > .btn {
    width: 30px !important; height: 30px !important;
    min-width: 30px !important; min-height: 30px !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }
  .ex-bottombar .btn svg,
  .ex-bottombar .menu-item > .btn svg {
    width: 15px !important; height: 15px !important;
  }
  .ex-bottombar #penColorLabel { width: 30px !important; height: 30px !important; }
  .ex-bottombar #penColor { width: 20px !important; height: 20px !important; }
  .ex-bottombar input[type="range"] { width: 64px !important; }
  .ex-bottombar .multi-slide-container {
    min-width: 90px !important; height: 28px !important;
    padding: 0 6px !important;
  }
  .ex-bottombar .size-opacity-group { min-width: 120px !important; }
  .ex-bottombar .zoom-controls { gap: 2px !important; padding: 0 2px !important; }
  .ex-bottombar .zoom-controls .btn {
    min-width: 26px !important; width: 26px !important; height: 26px !important;
    font-size: 12px !important;
  }
  /* ex-bottombar 小屏子菜单方向：向上弹（向上超出视口时自动下弹），限制高度 */
  /* 注：不写 -webkit-overflow-scrolling:touch（同顶栏子菜单：避免惯性快滚合成层导致文字不栅格化） */
  .ex-bottombar .menu-item .submenu {
    bottom: calc(100% + 6px) !important;
    top: auto !important;
    left: 0 !important;
    margin: 0 !important;
    max-height: 70dvh !important;
    overflow-y: auto !important;
  }
  /* 移动端：底部栏恢复电脑端 toggle 逻辑——三点按钮（展开更多功能）点击展开/收回 ex-more-group；
     左对齐 + 横向滚动便于展开后滑动查看各图标（电脑端屏幕宽无需滚动）；
     「更多」(三竖点) 是栏目菜单选项，点击其 submenu 向上弹出；「展开更多功能」(三横点) 仅作动按钮 */
  .ex-bottombar {
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* —— 移动端：「更多」栏目(helpItem) 移到折叠组最前（扩展栏目前、紧挨三点折叠按钮），
     展开后无需横向滚动即可点击；DOM 顺序不变（仍在末位），故桌面端保持在最尾。
     主题切换按钮已并入「视图」菜单子项（网格下方），不再出现在折叠组内 */
  .ex-bottombar .ex-more-group > .menu-item:has(> #helpMenuBtn) { order: -1; }              /* 更多 → 折叠组首位 */
  .ex-bottombar .ex-more-group > .menu-item:has(> #helpMenuBtn) > .btn { min-width: 36px; } /* 更多：加大点击热区 */
  .ex-bottombar .ex-more-group { padding-left: 4px; }                                       /* 与三点折叠钮留出间距 */

  /* —— 坐标栏：底部居中缩小 + 两行显示 + 避开安全区 —— */
  .coord-bar {
    bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: auto !important;
    font-size: 10.5px !important;
    padding: 3px 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    line-height: 16px !important;
  }

  /* —— 通用子菜单：扁平无磨砂 + 胶囊外框（18px 大圆角 + 外圈描边，与桌面端一致） —— */
  .menu-item .submenu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 18px !important;
    outline: 1px solid var(--border) !important;
    outline-offset: 4px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
    background: var(--card-bg) !important;
    padding: 4px !important;
    border: 1px solid var(--border) !important;
  }
  /* —— 移动端浮动子菜单：脱离 overflow 容器，固定定位到 body —— */
  /* 注：脱离 .menu-item 后，原 .menu-item .submenu 选择器不再匹配，必须在此补全容器+按钮全套样式 */
  .submenu.floating {
    position: fixed !important;
    z-index: 99999 !important;
    display: block !important;
    transform: none !important;
    animation: none !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    outline: none !important;
    box-shadow: 0 0 0 4px var(--card-bg), 0 0 0 5px var(--border),
                0 8px 24px rgba(15, 23, 42, 0.18) !important;
    padding: 4px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    min-width: 180px !important;          /* 脱离父级后原 min-width:180px 丢失，在此补回 */
    max-width: calc(100vw - 16px) !important;
    /* 高度/滚动同全局块：按内容一次性展开，不建滚动层（原因见全局 .submenu.floating 注释） */
    max-height: none !important;
    overflow: visible !important;
  }
  /* 浮动子菜单保留双列/双排布局（脱离父级后 .menu-item.menu-open > .submenu 选择器不再匹配） */
  /* 改用 Grid：flex 方案下按钮 width:100% 的内在宽度循环依赖会把容器 max-content 顶满 max-width（窗口全宽、按钮拉长）；
     display:contents 让 16 个按钮直接成为 grid item，minmax(0,max-content) 轨道按内容收窄，列顺序不变（前 8 左列、后 8 右列） */
  .submenu.floating.submenu-cols {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, max-content)) !important;
    grid-template-rows: repeat(8, auto) !important;
    grid-auto-flow: column !important;
    gap: 2px 10px !important;
    min-width: 0 !important;
    width: max-content !important;
    max-width: calc(100vw - 16px) !important;
  }
  .submenu.floating.submenu-cols .submenu-col {
    display: contents !important;  /* 列容器退位：其子按钮直接参与网格排布 */
  }
  /* 双排宽度不足时的单列降级（JS 测量超视口加 cols-single）：窄窗口、行数翻倍，随 bottom 锚定向上延伸 */
  .submenu.floating.submenu-cols.cols-single {
    grid-template-columns: minmax(0, max-content) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
  }
  .submenu.floating.submenu-2col {
    display: block !important;
    columns: 2 !important;
    column-gap: 4px !important;
    min-width: 0 !important;
  }
  .submenu.floating.submenu-2col > .btn,
  .submenu.floating.submenu-2col > .submenu-sep,
  .submenu.floating.submenu-2col > .submenu-group-title {
    break-inside: avoid;
    width: 100% !important;
  }
  .submenu.floating.submenu-2col > .submenu-group-title { column-span: all; }
  /* 浮动网格子菜单（工具/笔刷/背景/项目）：脱离父级后需补 display:grid + 双列 + 分组标题跨双列 */
  /* min-width 统一为 280px：避免项目菜单（长文字）与背景菜单（短文字）宽度不一致；
     JS 浮动定位会自动右对齐到视口右缘防止溢出，使各菜单宽度与位置一致 */
  .submenu.floating.submenu-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px 4px !important;
    min-width: 280px !important;
  }
  .submenu.floating.submenu-grid > .btn { width: 100% !important; }
  /* 浮动网格子菜单占位项跨双列（桌面端 .menu-item .submenu.submenu-grid > .submenu-fullrow 在浮动时不匹配，需补） */
  .submenu.floating.submenu-grid > .submenu-fullrow { grid-column: 1 / -1 !important; }
  /* 项目 / 视图 / 扩展：移动端 & APK 双排（局部收紧间距，窄屏仍能放下） */
  .submenu.floating.submenu-mgrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px 4px !important;
    min-width: 264px !important;
  }
  .submenu.floating.submenu-mgrid > .btn { width: 100% !important; }
  .submenu.floating.submenu-mgrid > .submenu-fullrow { grid-column: 1 / -1 !important; }
  .submenu.floating.submenu-grid > .submenu-group-title,
  .submenu.floating > .submenu-group-title {
    grid-column: 1 / -1;
    font-size: 12px !important;
    color: #64748b !important;
    padding: 6px 8px 2px !important;
    text-align: left !important;
    cursor: default !important;
    user-select: none !important;
  }
  body.dark-theme .submenu.floating > .submenu-group-title { color: #9aa4b2 !important; }
  /* 项目菜单：移动端双排下隐藏「使用帮助」与「初始化画板」之间的分隔线，
     两项并到同一行（初始化画板不再单独占一行）。桌面端单列仍保留该分隔线。 */
  .submenu.floating > .submenu-sep.hc-sep-join { display: none !important; }
  /* 浮动工具菜单（最长的一个下拉）：压缩行高/间距，让 36 项内容在竖屏手机上也能一屏放下。
     ★ 这里**不再限高**：一旦 max-height 产生滚动层，老 X5 下就会出现
       「工具菜单文字空白、手指滑过才显形」（原因见全局 .submenu.floating 及其上方注释）。
     原 .hc-raster（逐项 translateZ(0) 提层）方案已整体移除：与新方案重复，且实测抖不出来。
     按下反馈仍由下方 `.submenu.floating > .btn:active { transform: scale(0.96) }` 提供。 */
  .submenu.floating.submenu-grid#toolMenuList {
    gap: 1px 4px !important;
    padding: 6px !important;
  }
  .submenu.floating.submenu-grid#toolMenuList > .btn {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 10px !important;
  }
  .submenu.floating.submenu-grid#toolMenuList > .submenu-group-title {
    font-size: 11px !important;
    padding: 3px 8px 1px !important;
    line-height: 15px !important;
  }
  .submenu.floating > .submenu-sep { grid-column: 1 / -1; margin: 2px 0 !important; height: 1px !important; background: var(--border) !important; }
  /* 浮动子菜单内按钮：脱离父级后原 .menu-item .submenu .btn 样式全部丢失，必须在此补全 */
  .submenu.floating > .btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--text-1) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-align: left !important;
  }
  .submenu.floating > .btn:hover { background: var(--border-soft) !important; }
  .submenu.floating > .btn:active {
    background: var(--selected-bg) !important;
    color: var(--selected-fg) !important;
    transform: scale(0.96) !important;  /* 浮动子菜单按钮按下缩放反馈，与桌面 .btn:active 一致 */
  }
  .submenu.floating > .btn svg { width: 15px !important; height: 15px !important; flex: 0 0 15px !important; margin: 0 !important; }
  .submenu.floating > .btn .menu-label {
    display: inline !important;
    font-size: 13px !important;
    color: var(--text-1) !important;
    white-space: nowrap !important;
  }
  .menu-item .submenu .btn {
    border-radius: 6px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  .menu-item .submenu .btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  .menu-item .submenu .btn .menu-label { display: inline !important; font-size: 12px !important; }

  /* —— 移动端 / APK「更多」上拉框（submenu-cols）：与其它栏目下拉完全一致（24px 行高 / 15px 图标 / 10px 内边距 / 13px 字号） —— */
  .submenu.floating.submenu-cols .submenu-col > .btn,
  .menu-item .submenu.submenu-cols .submenu-col > .btn {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
  .submenu.floating.submenu-cols .submenu-col > .btn .menu-label,
  .menu-item .submenu.submenu-cols .submenu-col > .btn .menu-label {
    font-size: 13px !important;
  }
  .submenu.floating.submenu-cols .submenu-col > .btn svg,
  .submenu.floating.submenu-cols .submenu-col > .btn .submenu-icon,
  .menu-item .submenu.submenu-cols .submenu-col > .btn svg,
  .menu-item .submenu.submenu-cols .submenu-col > .btn .submenu-icon {
    flex: 0 0 15px !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
  }
  .submenu.floating.submenu-cols {
    gap: 4px 12px !important;
  }

  /* —— 小屏 range / multi-slide 通用收窄 —— */
  input[type="range"] {
    width: 64px !important;
    min-width: 64px !important;
  }
  .multi-slide-container {
    min-width: 32px !important;
    height: 30px !important;
  }
  .size-opacity-group {
    min-width: 120px !important;
  }
}

/* ===== 移动端 / APK 所有栏目下拉菜单：每个菜单按钮默认显示浅灰底（--surface-3 = #f4f4f5 / 深色 #3c3c43），
   与「更多」面板完全一致，不需要触摸就能看出底色；按下/选中仍为高亮（--selected-bg / --accent-soft）。
   这里必须用 !important：上方 .submenu.floating > .btn 把底色写成了 transparent !important，同权重靠后覆盖。
   本条位于移动端媒体查询之外，APK 宽度 >769px 时同样生效。 ===== */
.submenu.floating .btn {
  background-color: var(--surface-3) !important;
  background-image: none !important;
}

/* ===== 桌面端精确断点（≥769px）：强制覆盖移动端紧凑样式，避免浏览器实现差异导致小屏样式被大屏命中 ===== */
@media (min-width: 769px) {
  .ex-bottombar {
    position: fixed !important;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100% - 40px) !important;
    width: max-content !important;  /* 同移动端：fixed+left:50% 时 width:auto 的 shrink-to-fit 可用宽度只有视口左半边，展开 ex-more-group 后内容被压缩 + wrap 成双排；max-content 让胶囊长到内容宽度保持单排 */
    padding: 4px !important;
    border-radius: 8px !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;  /* 限制一直单排显示：展开隐藏组也不换行（视口 ≥769px 时内容宽 < max-width，无需横向滚动） */
    justify-content: center !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto !important;
    scroll-snap-type: none !important;
  }
  .ex-bottombar .ex-group {
    flex: 0 0 auto !important;
    padding: 0 2px !important;
    scroll-snap-align: none !important;
  }
  .ex-bottombar .btn,
  .ex-bottombar .menu-item > .btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }
  .ex-bottombar .btn svg,
  .ex-bottombar .menu-item > .btn svg {
    width: 18px !important;
    height: 18px !important;
  }
  .ex-bottombar #penColorLabel {
    width: 36px !important;
    height: 36px !important;
  }
  .ex-bottombar #penColor {
    width: 24px !important;
    height: 24px !important;
  }
  .ex-bottombar input[type="range"] {
    width: 92px !important;
    min-width: 92px !important;
  }
  .ex-bottombar .multi-slide-container {
    min-width: 110px !important;
    width: 110px !important;
    height: 38px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }
  .ex-bottombar .size-opacity-group { min-width: 184px !important; }
  .ex-bottombar .zoom-controls { gap: 3px !important; padding: 0 4px !important; }
  .ex-bottombar .zoom-controls .btn {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }
  .ex-bottombar .menu-item .submenu {
    bottom: calc(100% + 14px) !important;  /* 同基础规则：6px+8px hover 安全区=14px，距胶囊边缘 10px 与顶栏弹窗一致 */
    top: auto !important;
    left: 0 !important;
    right: auto !important;
  }
  /* 恢复「更多」栏目左对齐（与扩展栏目一致）：不再覆盖居中；保留淡入动画同其余栏目 */
  .ex-bottombar .menu-item:has(> #helpMenuBtn) .submenu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    animation-name: submenuIn !important;
  }
  /* 顶栏桌面端：即使移动端改了横滑也不生效 */
  .ex-topwrap {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    padding: 4px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto !important;
    scroll-snap-type: none !important;
  }
  .ex-leftbar {
    width: 44px !important;
    left: 14px !important;
    top: calc(80px + env(safe-area-inset-top, 0px)) !important;
    padding: 4px !important;
    border-radius: 8px !important;
  }
  .ex-leftbar .btn,
  .ex-leftbar .menu-item > .btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }
  .ex-leftbar .btn svg {
    width: 18px !important;
    height: 18px !important;
  }
  .ex-leftbar .menu-item .submenu {
    left: 100% !important;
    top: 0 !important;
    margin: 0 0 0 6px !important;
    max-width: 640px !important;
    max-height: 80vh !important;
  }
  .coord-bar {
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    font-size: 11px !important;
  }
}

/* 触屏平板 / 手机横屏（视口宽 769–1024px，无 hover 的触屏环境）：
   顶栏白胶囊内橡皮擦滑块外框高度收敛到 32（与竖屏手机一致），
   避免这类「宽度超 768 的移动形态」落到桌面 110×38 的大块头 */
@media (hover: none) and (min-width: 769px) and (max-width: 1024px) {
  .ex-topwrap .multi-slide-container {
    height: 32px !important;
  }
  .ex-topwrap .multi-slide-container .slide-knob {
    width: 24px !important;
    height: 24px !important;
  }
  .ex-topwrap .multi-slide-container .slide-knob > svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ===== 顶部工具栏下方操作提示行（仿 HCDRAW HintViewer：浅灰小字、随主题、不拦截点击） ===== */
#hintViewer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 62px;
  z-index: 18;
  max-width: min(94vw, 720px);
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--text-3);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.2s ease;
}
#hintViewer.hv-visible { opacity: 0.92; }