/* ==========================================================================
   MathPad —— Mathcad 15 经典 Windows 应用外壳
   ========================================================================== */
:root {
  --face: #f0f0f0;          /* 工具栏底色（经典灰） */
  --edge: #b7bcc2;
  --edge-lt: #dfe3e7;
  --title-a: #f8fbff;
  --title-b: #e6eefa;
  --sel: #dbe7f6;
  --sel-bd: #a8c0e0;
  --ink: #1a1a1a;
  --dim: #6b7480;
  --err: #b02418;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 12.5px "Microsoft YaHei", Tahoma, sans-serif; color: var(--ink);
  background: #7c8896; display: flex; overflow: hidden;
}

/* ==========================================================================
   多语言：按语言换字体栈 + 阿拉伯语 RTL（2026-10-03 加了 11 种语言）
   · 各语言的系统字体不一样，硬用雅黑会让日文汉字写错（"直"/"骨"这种字形不同）、
     阿拉伯语更是必须换字体，否则字形挤在一起。
   · RTL **只镜像界面**：菜单栏、工具栏、对话框、浮层、状态栏；工作区里的公式区
     和文本区保持 LTR —— 数学式子里 x² 的书写方向不跟着语言翻。
   ========================================================================== */
body.lang-ja   { font-family: "Yu Gothic UI", "Meiryo", "MS PGothic", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", sans-serif; }
body.lang-ko   { font-family: "Malgun Gothic", "Apple SD Gothic Neo", "NanumGothic", "Microsoft YaHei", sans-serif; }
body.lang-zh-TW{ font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Microsoft YaHei", sans-serif; }
body.lang-ar   { font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Arial", sans-serif; }
body.lang-ru   { font-family: "Segoe UI", "PT Sans", Tahoma, "Microsoft YaHei", sans-serif; }
body.lang-tr   { font-family: "Segoe UI", Tahoma, "Microsoft YaHei", sans-serif; }
body.rtl { direction: rtl; }
body.rtl .menubar, body.rtl .toolbars, body.rtl .statusbar, body.rtl .modal,
body.rtl .dropdown, body.rtl #toast, body.rtl .palwin, body.rtl .plinkmenu,
body.rtl .titlebar, body.rtl .gsearch { direction: rtl; text-align: right; }
body.rtl .wb-r, body.rtl .wb-r math-field, body.rtl .wb-r .wb-text { direction: ltr; text-align: left; }
body.rtl .menubar .mi, body.rtl .tbtn { direction: rtl; }

/* ---------- 应用窗口 ---------- */
.app { flex: 1; display: flex; flex-direction: column; background: var(--face); min-width: 0; }

/* 标题栏 */
.titlebar {
  height: 30px; flex: none; display: flex; align-items: center; padding: 0 5px;
  background: linear-gradient(to bottom, var(--title-a), var(--title-b));
  border-bottom: 1px solid #b3bfd0;
}
.appicon {
  width: 17px; height: 17px; margin-right: 6px; border-radius: 2px;
  background: linear-gradient(#4a86cf, #2b62a8); color: #fff;
  font: 700 11px/17px "Segoe UI", sans-serif; text-align: center;
}
.titlebar .title { flex: 1; font-size: 12.5px; color: #17263a; }
.winbtns { display: flex; gap: 2px; }
.winbtns button {
  width: 32px; height: 21px; border: 1px solid #b3bfd0; color: #2b3a4b;
  background: linear-gradient(#fdfefe, #e4ebf5); font-size: 11px; cursor: default;
}
.winbtns button:hover { background: linear-gradient(#fff, #d6e3f5); }
.winbtns .close:hover { background: linear-gradient(#fdd, #e8a0a0); }

/* 菜单栏 */
.menubar { flex: none; display: flex; padding: 0 2px; background: var(--face);
           border-bottom: 1px solid var(--edge-lt); }
.menubar .mi { padding: 3px 9px; font-size: 12.5px; cursor: default; user-select: none;
               border: 1px solid transparent; white-space: nowrap; }
.menubar .mi:hover, .menubar .mi.open { background: var(--sel); border-color: var(--sel-bd); }
.menubar .mi u { text-decoration: underline; }
/* 右上角署名（作者）：order 让它排在所有菜单项之后，margin-inline-start 让它在
   LTR 贴右、RTL（阿拉伯语）贴左 —— 用 margin-left 的话阿语界面会跑到中间去 */
.menubar .author { order: 999; margin-inline-start: auto; padding: 3px 10px 3px 12px;
                   font-size: 12px; color: #4a5764; white-space: nowrap;
                   user-select: none; cursor: default; }
body.rtl .menubar .author { padding: 3px 12px 3px 10px; }

/* ---------- 文档标签栏（多文档，2026-10-04） ----------
   每个标签 = 一份独立文档（各自的白板内容 / 撤销历史 / 文件句柄 / 滚动位置）。
   当前标签白底加粗，改过没存挂 `*`（`.dirty`），绑定了磁盘文件的挂一个小圆点。
   ⚠️ 标签栏是**常驻**的（哪怕只有一个文档）—— 否则用户根本发现不了能开多个文档。
   ⚠️ 标签里除 ✕ 之外的区域一律走 mousedown 切换：click 会被 MathLive 抢焦点时序干扰，
      也吃不掉中键（中键 = 关闭标签）。 */
.tabbar { flex: none; display: flex; align-items: flex-end; gap: 2px; height: 25px;
          padding: 3px 4px 0 4px; background: linear-gradient(to bottom, #dde6f1, #ccd8e7);
          border-bottom: 1px solid var(--edge); overflow-x: auto; overflow-y: hidden; }
.tabbar::-webkit-scrollbar { height: 0; }
.tabbar .tab { display: flex; align-items: center; gap: 5px; height: 22px; flex: 0 0 auto;
               max-width: 220px; padding: 0 3px 0 9px; cursor: default; user-select: none;
               border: 1px solid #b0bccb; border-bottom: none; border-radius: 4px 4px 0 0;
               background: #e8eef6; color: #46525f; font-size: 12px; }
.tabbar .tab:hover { background: #f3f7fc; }
.tabbar .tab.on { background: #fff; color: #17263a; font-weight: 700; border-color: #8ba8c9; }
.tabbar .tnm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar .tab.dirty .tnm::after { content: ' *'; color: #b06000; }
.tabbar .tab .tbind { color: #2b62a8; font-size: 10px; line-height: 1; }
.tabbar .tab .tx { border: none; background: transparent; color: #7a8794; padding: 0;
                   width: 16px; height: 16px; border-radius: 2px; cursor: pointer;
                   font: 11px/1 "Segoe UI", sans-serif; }
.tabbar .tab .tx:hover { background: #d6dee8; color: var(--err); }
.tabbar .tadd { flex: 0 0 auto; width: 22px; height: 20px; margin-bottom: 1px; cursor: pointer;
                border: 1px solid #b0bccb; border-radius: 3px; background: #eef3f8;
                color: #2b62a8; font: 700 13px/1 "Segoe UI", sans-serif; padding: 0; }
.tabbar .tadd:hover { background: #fff; border-color: #2b62a8; }
.tabbar .tab.flash { background: #e5f0e0; border-color: #3d8b40; }
body.rtl .tabbar { direction: rtl; }

/* 「关于 MathPad」对话框：中文原文在前、当前语言译文在后 */
.aboutwrap { font-size: 12.5px; line-height: 1.8; color: #26313d; }
.aboutwrap p { margin: 0; }
.aboutwrap .aboutzh { color: #17263a; }
.aboutwrap .abouttr { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #c6ccd3;
                      color: #41505f; }
.aboutwrap .aboutowner { margin-top: 12px; text-align: end; color: #5a636c; }
.aboutwrap .abouttr, .aboutwrap .aboutzh { text-align: start; }

/* ⚠️ RTL（阿拉伯语）界面下，函数窗口的签名是"代码 + 说明"混排：整页 RTL 会把
   `plot(v) ← 说明` 逆序成 "说明 ← plot(v)"。`unicode-bidi: plaintext` 让**每一段
   按自身方向**排版（首字符是拉丁就 LTR、是阿语就 RTL），比写死 direction 稳。 */
.modal .sig, .modal .desc { unicode-bidi: plaintext; }
/* 关于窗口里中文段与阿语段各自成段，同理 */
.aboutwrap p { unicode-bidi: plaintext; }

/* 下拉菜单 */
.dropdown { position: absolute; z-index: 100; min-width: 200px; padding: 2px;
            background: #fff; border: 1px solid #8d949b; box-shadow: 2px 2px 5px rgba(0,0,0,.25); }
.dropdown .it { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 6px;
                font-size: 12.5px; cursor: default; white-space: nowrap; }
.dropdown .it:hover { background: #316ac5; color: #fff; }
.dropdown .it .ic { width: 16px; text-align: center; opacity: .85; }
.dropdown .it .k { margin-left: auto; color: var(--dim); font-size: 11px; }
.dropdown .it:hover .k { color: #dbe7f6; }
.dropdown .hr { height: 1px; margin: 3px 2px; background: var(--edge-lt); }

/* 浮动功能面板（矩阵 / 编程）：标题栏 + 关闭按钮 + 网格按钮
   ⚠️ 列宽必须是 minmax(0, 1fr) 而不是 1fr：
      1fr 的下限是 min-content，而按钮里的文字是 nowrap，
      于是一旦某一列出现「zeros(m,n) 零矩阵」这种长标签，
      整个网格就会被撑到 240px 以上、溢出固定宽度 236px 的窗口
      —— 右列的按钮和「插入」都会跑到窗口外面（用户看到的就是"窗口乱"）。 */
.palwin { position: absolute; z-index: 110; width: 292px; background: var(--face);
          border: 1px solid #8d949b; box-shadow: 3px 3px 8px rgba(0,0,0,.28); }
.palwin .paltitle { display: flex; align-items: center; height: 24px; padding: 0 2px 0 9px;
                    background: linear-gradient(#fbfcfd, #e6ebf0); border-bottom: 1px solid #c3cad1;
                    font-size: 13px; font-weight: 600; color: #23405f; user-select: none; }
.palwin .paltitle span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                         white-space: nowrap; }
.palwin .palx { flex: none; width: 22px; height: 20px; padding: 0; border: 1px solid transparent;
                background: none; color: #4b5b6b; font-size: 14px; line-height: 1; cursor: default; }
.palwin .palx:hover { background: #c0392b; border-color: #8e2b20; color: #fff; }
.palwin .palbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                   gap: 2px; padding: 5px; }
.palwin .palit { display: flex; align-items: center; justify-content: center; gap: 4px;
                 min-width: 0; min-height: 24px; padding: 3px 4px;
                 font-family: Consolas, 'Courier New', monospace;
                 font-size: 12px; color: #1f3550; background: #f7f9fb; border: 1px solid #d6dde4;
                 cursor: default; }
.palwin .palit > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palwin .palit:hover { background: #e8f0fa; border-color: #9db8d6; }
.palwin .palit:active { background: #d8e6f6; }
.palwin .palit.wide { grid-column: span 2; }
.palwin .palhr { grid-column: span 2; min-width: 0; height: 1px; margin: 3px 1px; background: var(--edge-lt); }

/* 矩阵尺寸选择器（矩阵面板最上面那块）：手填行列数 + 网格拖选 */
.palwin .mgr { grid-column: 1 / -1; min-width: 0; padding: 2px 4px 6px; margin-bottom: 4px;
               border-bottom: 1px solid var(--edge-lt); user-select: none; }
.palwin .mgr-top { display: flex; align-items: center; gap: 3px; margin-bottom: 5px;
                   min-width: 0; font-size: 12px; color: #33475c; white-space: nowrap; }
.palwin .mgr-num { flex: none; width: 34px; height: 19px; padding: 0 2px; font-size: 12px;
                   text-align: center; border: 1px solid #a9b4c0; background: #fff; color: #23384f; }
.palwin .mgr-go { flex: none; margin-left: auto; height: 20px; padding: 0 8px; font-size: 12px;
                  border: 1px solid #8fa8c4; background: linear-gradient(#f7fafd, #dfe9f4);
                  color: #1f3550; cursor: default; }
.palwin .mgr-go:hover { background: linear-gradient(#eef5fc, #cfe0f2); border-color: #6d8db0; }
.palwin .mgr-grid { display: grid; gap: 1px; justify-content: start; width: max-content; max-width: 100%; }
.palwin .mgr-cell { width: 15px; height: 13px; background: #fff; border: 1px solid #ccd4dc; }
.palwin .mgr-cell.on { background: #cfe3f7; border-color: #5b8cc0; }
.palwin .mgr-hint { margin-top: 4px; font-size: 12px; color: #5a6b7c; text-align: right; }

/* 工具栏 */
.toolbars { flex: none; background: var(--face); border-bottom: 1px solid var(--edge); }
.tb-row { display: flex; align-items: center; gap: 1px; padding: 2px 4px; min-height: 27px; }
.tb-row + .tb-row { border-top: 1px solid #e7eaed; }
.tbtn { width: 23px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center;
        border: 1px solid transparent; background: none; color: #2f4a68; cursor: default; }
.tbtn:hover { border-color: var(--sel-bd); background: var(--sel); }
.tbtn.on { border-color: #8fa8c8; background: #cfdff2; }
.tbtn b { font-size: 12px; }
.sep { width: 1px; height: 19px; margin: 0 3px; background: #c8cdd3; }
select.tb { height: 21px; font-size: 11.5px; border: 1px solid #b8bec6; background: #fff; }
input.tb[type=color] { width: 24px; height: 21px; padding: 0 1px; border: 1px solid #b8bec6;
                       background: #fff; cursor: pointer; }
.tb-row[data-bold="1"] .tbtn.fmtbold,
.tb-row[data-italic="1"] .tbtn.fmtitalic,
.tb-row[data-underline="1"] .tbtn.fmtunderline { background: #dbe7f6; }
select.tb.style { width: 118px; }
select.tb.font { width: 132px; }
select.tb.size { width: 48px; }
.num { font-size: 11.5px; padding: 0 3px; color: #333; }
.tb-lab { font-size: 12px; color: #3a4550; padding: 0 4px; }
.zoom { width: 54px; }

/* 工作区 */
.workspace { flex: 1; display: flex; min-height: 0; background: #8e99a5; }
.pagewrap { flex: 1; overflow: auto; background: #c2c8ce; padding-left: 13px; min-width: 0; }
.page { position: relative; background: #fff; min-height: 100%; border-right: 1px solid #b9bfc5; }
#board { position: relative; min-height: 1400px; background: #fff; cursor: text; }

/* ---------- 公式区（纸面，无框） ---------- */
.wb-r { position: absolute; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0;
        padding: 1px 2px; max-width: 820px; border: 1px solid transparent; border-radius: 1px;
        /* ★ 字体 / 字号 / 颜色 / 高亮 / B I U / 对齐：整块生效，文本区和公式区共用一套变量
           （工具栏改的是 r.fmt，JS 把变量写在区域元素上 —— 所以刷新、导出都留得住）*/
        font-family: var(--mp-font, inherit);
        font-size: var(--mp-size, 13px);
        color: var(--mp-color, inherit);
        font-weight: var(--mp-weight, normal);
        font-style: var(--mp-style, normal);
        text-decoration: var(--mp-deco, none);
        text-align: var(--mp-align, left); }
.wb-r[data-bg="1"] { background: var(--mp-bg); }   /* 高亮：设过才画底色 */
.wb-r:hover, .wb-r.focus { border-color: #b9c6d4; }
/* 区域右上角那排浮动工具（⠿ ⇄ ⚙ ×），矩阵控制条也住在这一排里。
   ★ 用户 2026-10-01："鼠标往上挪它就没了，隐藏显示的逻辑得和其他组件一致"。
   三条一起做，缺一条就会"断"：
     ① 横跨**整个区域宽度**（left:0;right:-1px + 内容右对齐）：原来只有 right 定位，
        行宽等于内容宽，鼠标在区域左半边往上挪时上面什么都没有 → hover 断掉；
     ② 贴着区域上边框：`top` 是硬编码的，行一高就留缝（缝里既不在区域上也不在工具上）；
        改用 `bottom:100%`（见 .hasmatctl），行不管多高都正好贴着；
     ③ 再加一层 JS 宽限（.toolhover，见 addRegion）：真被瞬时的缝/圆角打断也不闪。 */
.wb-r .tools { position: absolute; top: -15px; left: 0; right: -1px;
               display: none; justify-content: flex-end; gap: 1px; z-index: 5; }
.wb-r:hover .tools, .wb-r.focus .tools, .wb-r.toolhover .tools, .wb-r.matpin .tools { display: flex; }
.wb-r .tools button { border: 1px solid var(--edge); background: #fff; color: #8b949e;
                      font-size: 10px; line-height: 13px; padding: 0 4px; cursor: pointer; }
.wb-r .tools button:hover { color: #2b62a8; border-color: #2b62a8; }
.wb-r .grip { cursor: move; }
/* 复制 Word 公式按钮：svg 图标与文字按钮对齐；点击后闪一下表示复制成功 */
.wb-r .wcopy svg { display: block; }
.wb-r .wcopy.flash { background: #e5f0e0; border-color: #3d8b40 !important; color: #3d8b40 !important; }

/* 空区域：只显示红色 +（Mathcad 逻辑），开始输入才出现方框 */
.wb-r.empty, .wb-r.empty:hover, .wb-r.empty.focus { border-color: transparent !important; }
.wb-r.empty .tools { display: none !important; }
.wb-r.empty math-field { --caret-color: transparent; }

/* ★ 每块宽度（用户 2026-10-03："文本块没外框，文字到一定长度就自动折行，希望自行设置
   每个块的长度"）。
   · 默认无 `data-w` → 保持原来的自动宽度：`max-width:820px`，文字打到这儿就折行；
   · 设过宽度（拖右下角那条拖手 / 格式菜单里选）→ 区域宽度钉死成 inline width，
     `[data-w]` 顺手把 820 的上限摘掉，否则宽的设不上去。 */
.wb-r[data-w] { max-width: none; }
/* 右边缘的宽度拖手：悬停 / 编辑中 / 选中时出现，拖它改块宽，双击恢复自动宽度。
   ⚠️ 它是 absolute 的 —— 不参与 .wb-r 的收缩宽度计算（否则一悬停区域就变宽）。 */
.wb-r .rwgrip { position: absolute; top: 0; bottom: 0; right: -5px; width: 10px;
                cursor: ew-resize; display: none; z-index: 4; }
.wb-r .rwgrip::after { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: 3px;
                       border-radius: 2px; background: #9db6cf; opacity: .5; transition: opacity .12s; }
.wb-r .rwgrip:hover::after { opacity: 1; background: #2b62a8; }
.wb-r:hover .rwgrip, .wb-r.focus .rwgrip, .wb-r.toolhover .rwgrip { display: block; }
body.rwresize .wb-r .rwgrip::after { opacity: 1; background: #2b62a8; }
body.rwresize { cursor: ew-resize; user-select: none; }
/* 有图形的块：宽度归图形自己的右下角手柄管（setVizSize 钉宽度），这里不显示宽度拖手 */
.wb-r.hasviz .rwgrip { display: none !important; }
/* 还没写内容的公式块：那排工具本来就是隐藏的，宽度拖手也一起藏起来（跟工具行同进同退） */
.wb-r.empty .rwgrip { display: none !important; }
/* 拖动时跟在鼠标旁边的宽度读数（fixed 定位，不占版面、不挡内容） */
.wtip { position: fixed; z-index: 9999; pointer-events: none; background: #2b62a8; color: #fff;
        font: 11px/16px "Microsoft YaHei", Arial, sans-serif; padding: 0 6px; border-radius: 3px;
        box-shadow: 0 1px 4px rgba(0,0,0,.25); }
/* 「格式 › 块宽度 › 自定义…」对话框里的小表单 */
.wdlg { display: flex; flex-direction: column; gap: 6px; }
.wdlg label { font-size: 12px; color: #444; }
.wdlg input { font-size: 13px; padding: 3px 6px; border: 1px solid var(--edge); border-radius: 3px; }
.wdlg .hint { font-size: 11px; color: #8a949e; line-height: 1.5; }
/* 「编辑 › 复制到其他文档…」：一行一个目标文档 */
.docpick { display: flex; flex-direction: column; gap: 5px; }
.docpick .hint { font-size: 11.5px; color: #6b7480; }
.docpick .docrow { text-align: start; padding: 5px 8px; font-size: 12.5px; cursor: pointer;
                   border: 1px solid var(--edge); border-radius: 3px; background: #f7fafd; color: #26313d; }
.docpick .docrow:hover { background: var(--sel); border-color: var(--sel-bd); }

math-field {
  display: inline-block; width: auto; min-width: 10px;
  font-size: var(--mp-mathsize, 19px);   /* 字号设置：公式比正文大一号（默认 13 → 19）*/
  padding: 0 2px;
  border: none; background: transparent;
  --caret-color: #1a1a1a;
  --placeholder-color: #b9c2cb;
}
math-field:focus { outline: none; }
math-field::part(menu-toggle),
math-field::part(virtual-keyboard-toggle) { display: none; }

.res { display: inline-flex; align-items: baseline; flex-wrap: wrap; }
.res math-field { font-size: var(--mp-mathsize, 19px); margin-left: 1px; padding: 0 1px; }
/* 空格逐级选中不再用 MathLive 的选区（它会顺手把输入光标藏起来），
   改由 JS 自己算区间 + 下面这个虚线框来画。
   原生高亮只留给鼠标拖选（淡淡的蓝），拖选仍然看得见。 */
math-field { --selection-background-color: rgba(74,134,207,.28); --selection-color: inherit;
             --selection-text-color: inherit; }
/* 空格逐级选中时显示的虚线矩形（挂在区域里，跟着内容一起滚动） */
.selbox { position: absolute; z-index: 6; pointer-events: none; display: none;
          border: 1px dashed #2b62a8; background: rgba(74,134,207,.10); border-radius: 2px; }
/* 框选拖动过程中禁止浏览器原生选中文本（否则页面上会冒出一堆蓝色小方块） */
body.dragging, body.dragging * { user-select: none !important; }
body.dragging math-field::part(keyboard-sink) { user-select: none !important; }

/* MathLive 默认给 container 加 4px、content 加 1~3px 内边距。
   结果紧跟在等号后面时，输入框右侧死区 9px + 结果框左侧死区 6px，
   视觉上等号与结果之间会空出 19px（就是"等号右边一大片空白"）。
   这里把水平内边距收掉（保留上下，分数 / 矩阵不会被裁），实测 19px → 7px，
   刚好是 Mathcad 里一个自然空格。 */
math-field::part(container) { padding: 4px 0 !important; }
math-field::part(content)   { padding: 2px 0 !important; }
.res.def math-field { color: #55606c; }
.res .note { margin-left: 10px; font-size: 11.5px; color: #6b7480; align-self: center; }
/* 结果带单位时可点击换算 */
.res.clickable { cursor: pointer; border-radius: 2px; }
.res.clickable:hover { background: #eef4fd; box-shadow: inset 0 -1px 0 #a8c0e0; }

/* 单位换算菜单 */
.unitmenu { min-width: 386px; max-width: 452px; padding: 6px 8px 8px; max-height: 76vh; overflow: auto; }
.unitmenu .uhd { font-size: 11.5px; color: #4a5560; margin: 2px 0 5px; }
.unitmenu .uin { width: 100%; height: 23px; border: 1px solid #8d949b; background: #fff;
                 font-size: 12.5px; padding: 0 6px; margin-bottom: 6px; }
.unitmenu .ugrid { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.unitmenu .ubtn { min-width: 44px; height: 22px; padding: 0 8px; border: 1px solid #b8bec6;
                  background: linear-gradient(#fff, #eef1f5); font-size: 12.5px; cursor: default; }
.unitmenu .ubtn:hover { background: linear-gradient(#fff, #dce8f8); border-color: #6d8cb5; }
.unitmenu .ubtn.on { background: #cfdff2; border-color: #6d8cb5; font-weight: 600; }
/* —— 复合单位构造器：分子一排因子 + 分母一排因子（分式 / 乘积 / 混合都靠它）—— */
.unitmenu .ubuild { border-top: 1px solid #d6dbe0; padding-top: 6px; margin-bottom: 8px; }
.unitmenu .ubh { font-size: 11.5px; color: #4a5560; margin-bottom: 5px; }
.unitmenu .ubrow { display: flex; align-items: center; gap: 4px; }
.unitmenu .uslots { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-height: 22px; align-items: center; }
.unitmenu .ubar { height: 1px; background: #7d858e; margin: 4px 0; }
.unitmenu .uslot { display: inline-flex; align-items: center; gap: 2px; }
.unitmenu .uslot select { height: 22px; border: 1px solid #b8bec6; background: #fff;
                          font-size: 12px; padding: 0 2px; max-width: 106px; }
.unitmenu .uslot .uexp { max-width: 48px; font-size: 11px; color: #45505c; }
.unitmenu .uslot .udel { width: 16px; height: 22px; padding: 0; border: none; background: none;
                         color: #98a1aa; font-size: 13px; line-height: 22px; cursor: default; }
.unitmenu .uslot .udel:hover { color: #c0392b; }
.unitmenu .uadd { width: 22px; height: 22px; flex: none; border: 1px dashed #a9b2bb; background: #fff;
                  color: #5a636c; font-size: 13px; line-height: 20px; padding: 0; cursor: default; }
.unitmenu .uadd:hover { border-color: #6d8cb5; color: #1f4e79; background: #eef4fd; }
.unitmenu .uempty { font-size: 12px; color: #aeb6bd; }
.unitmenu .ubout { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.unitmenu .ucode { font-size: 13px; font-weight: 600; color: #1f4e79; }
.unitmenu .uok { font-size: 11.5px; color: #1e7a44; }
.unitmenu .ubad { font-size: 11.5px; color: #b3352c; }
.unitmenu .ufac { font-size: 11.5px; color: #5a636c; }
.unitmenu .uapply { margin-left: auto; height: 22px; padding: 0 10px; border: 1px solid #6d8cb5;
                    background: #e8f1fc; font-size: 12px; cursor: default; }
.unitmenu .uapply:hover { background: #d6e6fa; }
.wb-r .tools .uni { display: none; }
.wb-r.hasunit .tools .uni { display: block; }
/* ★★ 区域里的提示统一成同一种"横幅"样式（用户 2026-10-03 要求）：
   红字报错 与 琥珀色的「前面已经定义过」长得**完全一样** —— 同字号、同内边距、
   左边同一条竖线；**只有颜色不同**（红色还是红色、琥珀色还是琥珀色）。
   以后再加提示就往这两条上靠，别再各写一套。 */
.err, .redefnote {
  flex-basis: 100%; margin-top: 3px; font-size: 11.5px; line-height: 1.5;
  border-inline-start: 3px solid transparent; border-radius: 3px; padding: 3px 7px;
}
.err { color: #b02418; background: #fdecea; border-inline-start-color: #b02418; }
.err:empty { display: none; }
/* 「同名函数被重新定义」的提示：琥珀色。不是错误（式子算得出来），但必须看得见 ——
   否则上面那些引用旧定义的式子突然坏掉，无从解释。 */
.redefnote { color: #8a5a00; background: #fff7e6; border-inline-start-color: #e0a83a; }
body.dark .err { color: #f3aca4; background: #3a201c; border-inline-start-color: #c2564a; }
body.dark .redefnote { color: #f0cf8a; background: #33291a; border-inline-start-color: #b8862c; }
/* ★ 「视图 › 报错信息」关掉后：区域里的红字报错**和那条琥珀色提示**都不显示
   （用户 2026-10-03：截图给的正是 `⚠ f 前面已经定义过（1 处）` 这条 —— 在用户眼里
   它就是一条报错信息，必须跟着开关走）。
   只是**不看**，该记的账照记（作废下游 / 确认遍都不受影响），打开开关立刻回来。 */
body.errhide .err,
body.errhide .redefnote { display: none !important; }

.wb-text { font-size: inherit; line-height: 1.5; min-width: 90px; min-height: 19px;
           padding: 0 2px; outline: none; font-family: inherit; color: inherit; }
.wb-text code { font-family: Consolas, monospace; font-size: .94em; background: #eef1f4;
                border-radius: 2px; padding: 0 3px; }
.wb-text:empty::before { content: '文本…'; color: #c3cad1; }

/* 红色 + 插入光标（Mathcad 的标志性提示） */
.plusmark { position: absolute; color: #e03b2c; font: 700 17px/17px Arial, sans-serif;
            pointer-events: none; display: none; }

/* 右侧数学符号面板 */
.mathpal { flex: none; width: 70px; background: var(--face); border-left: 1px solid var(--edge);
           overflow-y: auto; padding: 2px 0; }
.mp-grp { display: flex; flex-wrap: wrap; gap: 1px; padding: 2px 3px; border-bottom: 1px solid var(--edge-lt); }
.mp-grp button { width: 22px; height: 19px; padding: 0; border: 1px solid transparent; background: none;
                 font: 13px 'Cambria Math', 'Times New Roman', serif; color: #24384e; cursor: default; }
.mp-grp button.wide { width: 44px; font: 9.5px 'Microsoft YaHei', Arial, sans-serif; }
.mp-grp button:hover { border-color: var(--sel-bd); background: var(--sel); }
/* 绘图按钮：彩色小图 + 短标签 */
.mp-plot { gap: 2px 2px; }
.mp-plot button.pbtn { width: 31px; height: 41px; display: flex; flex-direction: column;
                       align-items: center; justify-content: flex-start; gap: 1px; padding: 2px 0 0;
                       border: 1px solid transparent; background: none; cursor: default; }
.mp-plot button.pbtn span { font: 9px 'Microsoft YaHei', Arial, sans-serif; color: #3a4550;
                            line-height: 10px; white-space: nowrap; }
.mp-plot button.pbtn:hover { border-color: var(--sel-bd); background: var(--sel); }
.mp-plot button.pbtn svg { display: block; }

/* 状态栏 */
.statusbar { flex: none; height: 22px; display: flex; align-items: center; gap: 10px;
             padding: 0 8px; background: var(--face); border-top: 1px solid var(--edge);
             font-size: 12px; color: #26303a; }
.statusbar .spacer { flex: 1; }
.statusbar .eng { color: var(--dim); font-size: 11px; }

/* ★ 计算状态指示（2026-10-04）：以前是 forceRecalcAll 里一句定时 toast，
   算完 43ms 还挂 2.6s、真算 8s 又提前消失 —— 现在**状态驱动**（见 busyBegin/busyEnd），
   亮着的每一刻都真在算，熄灭的那一下就是算完。后面的秒数是实时刷新的。 */
#busy { display: inline-flex; align-items: center; gap: 5px;
        color: #8a5a00; font-size: 12px; white-space: nowrap; }
#busy[hidden] { display: none !important; }
#busy .bz-dot { width: 7px; height: 7px; border-radius: 50%; background: #e8890c;
                animation: bzpulse 1s ease-in-out infinite; }
#busy .bz-t { font-variant-numeric: tabular-nums; }
@keyframes bzpulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #busy .bz-dot { animation: none; opacity: 1; } }
/* 正在算的时候，⚡ 那一格里的数字是**上一潮**的结果（本潮要跑完才结账）——
   压暗一点，免得跟旁边的"正在重新计算… 1.3 s"看着像同一件事、又互相矛盾。 */
#perfchip.stale { opacity: .45; }

/* 性能状态条（2026-10-03 改版）：总计 · 一根两段比例条 · 引擎 / 前端 · 块数。
   三个数字一起看才知道瓶颈在哪，单靠一根比例条或一堆数字都不好读。 */
#perfchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
            color: var(--dim); cursor: default; user-select: none; }
#perfchip .pc-i { color: #f0a020; font-size: 12px; line-height: 1; }
#perfchip .pc-tot { color: #26303a; font-weight: 600; font-variant-numeric: tabular-nums; }
#perfchip .pc-bar { display: inline-flex; width: 52px; height: 7px; border-radius: 4px;
                    overflow: hidden; background: rgba(0,0,0,.08); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
#perfchip .pc-bar i { display: block; height: 100%; }
#perfchip .pc-e { background: linear-gradient(180deg,#6fa8f5,#3d7fd6); }
#perfchip .pc-f { background: linear-gradient(180deg,#ffd08a,#f0a020); }
#perfchip .pc-eng, #perfchip .pc-front, #perfchip .pc-blk { font-variant-numeric: tabular-nums; white-space: nowrap; }
#perfchip .pc-eng { color: #2d6cc0; }
#perfchip .pc-front { color: #b4761a; }
#perfchip .pc-blk::before { content: '·'; margin-right: 4px; color: var(--edge); }
#perfchip .pc-dim { color: var(--dim); }

/* 社区对话框（2026-10-03）：浏览 / 上传 / 我的分享 三个页签 */
.comwrap { display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; color: #26303a; }
.comtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--edge); }
.comtab { padding: 5px 14px; cursor: default; border: 1px solid transparent; border-bottom: none;
          border-radius: 4px 4px 0 0; color: #4a5560; margin-bottom: -1px; }
.comtab:hover { background: #eef4fd; }
.comtab.on { background: var(--face); border-color: var(--edge); border-bottom: 1px solid var(--face);
             color: #1c4f96; font-weight: 600; }
.companel { min-height: 180px; display: flex; flex-direction: column; gap: 8px; }
.comsearch { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cominq, .comsel, .cominta { border: 1px solid #8d949b; background: #fff; font-size: 12.5px;
                             height: 22px; padding: 0 6px; border-radius: 3px; min-width: 0; }
.cominq { flex: 1 1 200px; }
.comsel { height: 24px; }
.cominta { height: auto; padding: 4px 6px; font-family: inherit; resize: vertical; }
.combtn { border: 1px solid #8d949b; background: linear-gradient(180deg,#fdfefe,#eef1f4);
          font-size: 12px; height: 23px; padding: 0 10px; border-radius: 3px; cursor: default; }
.combtn:hover { background: #e8f0fb; border-color: #9dbde6; }
.combtn.main { background: linear-gradient(180deg,#dfeeff,#c3ddfb); border-color: #7ba7dd; font-weight: 600; }
.combtn.danger:hover { background: #f7dede; border-color: #c98a8a; }
.comlist { border: 1px solid var(--edge); border-radius: 4px; max-height: 320px; overflow: auto;
           padding: 6px; display: flex; flex-direction: column; gap: 6px; background: #fbfcfd; }
.comitem { border: 1px solid var(--edge); border-radius: 4px; background: #fff; padding: 7px 9px;
           display: flex; flex-direction: column; gap: 4px; }
.comitem:hover { border-color: #9dbde6; }
.comhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comtitle { font-size: 13px; }
.comtag { background: #eef4fd; border: 1px solid #cfe0f7; color: #1c4f96; border-radius: 9px;
          padding: 0 7px; font-size: 11px; line-height: 16px; }
.comdesc { color: #46505a; }
.commeta { color: var(--dim); font-size: 11.5px; }
.comacts { display: flex; gap: 6px; flex-wrap: wrap; }
.comfoot { color: var(--dim); font-size: 11.5px; padding: 2px 4px; display: flex; align-items: center; gap: 8px; }
.comform { display: flex; flex-direction: column; gap: 6px; }
.comfld { display: flex; align-items: center; gap: 8px; }
.comfld > label { flex: 0 0 62px; color: #46505a; }
.comfld > .cominq, .comfld > .cominta { flex: 1 1 auto; }
.comcheck { display: flex; align-items: center; gap: 7px; }
.comnotice { border: 1px solid var(--edge); border-radius: 4px; background: #fbfcfd;
             padding: 8px 10px; color: #46505a; line-height: 1.65; }
.comnotice.warn { background: #fdf8e8; border-color: #eedfa8; color: #6f5a17; }
.comnotice.ok { background: #eef8ef; border-color: #bfe0c4; color: #2f5c39; }
.comtip { line-height: 1.65; background: #eef4fd; border: 1px solid #cfe0f7; border-radius: 4px; padding: 8px 10px; }
.comtip b { color: #1c4f96; }
.comnote { color: var(--dim); font-size: 12px; line-height: 1.7; border-top: 1px dashed var(--edge); padding-top: 7px; }
.comnote b { color: #26303a; }

@media print {
  .titlebar, .menubar, .toolbars, .statusbar, .mathpal, .tools, .plusmark, .modal,
  .palwin, .selbox { display: none !important; }
  body, .app, .workspace, .pagewrap { background: #fff !important; display: block; overflow: visible; }
  .pagewrap { padding: 0; }
  .wb-r { border: none !important; }
}

/* ============================== 对话框（插入函数 / 希腊字母） ============================== */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.06); z-index: 400; }
.modal { position: fixed; z-index: 401; background: var(--face); border: 1px solid #8d949b;
         box-shadow: 3px 4px 14px rgba(0,0,0,.3); font-size: 12.5px;
         max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
         display: flex; flex-direction: column; }
.modal > .body { overflow: auto; padding: 10px; min-height: 0; }
.modal .cap { display: flex; align-items: center; height: 27px; padding: 0 4px 0 8px;
              background: linear-gradient(#f8fbff, #e4ecf7); border-bottom: 1px solid #b9c4d2;
              color: #17263a; font-weight: 600; flex: none; overflow: hidden; }
.modal .cap span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal .cap .x { margin-left: auto; width: 26px; height: 19px; border: 1px solid transparent;
                 background: none; color: #4a5560; font-size: 12px; cursor: default; }
.modal .cap .x:hover { background: #f0c8c8; border-color: #c88; }
.modal .body { padding: 10px 12px; overflow: auto; min-height: 0; }
.modal .cols { display: flex; gap: 12px; align-items: flex-start; }
.modal .fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.modal .fld > span { color: #333; }
/* 函数 / 单位对话框：左列固定、右列自适应，条目过长就省略号，绝不撑出窗口 */
.modal .cols .fld:first-child { flex: 0 0 132px; }
.modal .cols .fld:last-child { flex: 1 1 auto; }
.modal select { border: 1px solid #8d949b; background: #fff; font-size: 12.5px; height: 20px; }
.modal .cat { width: 130px; }
.modal .fn { width: 168px; }
.modal .list { border: 1px solid #8d949b; background: #fff; overflow: auto; min-width: 0; }
/* ★ 行高固定 20px：容器高度必须是它的**整数倍**，否则最后一行被切掉一半
   （用户看到的"列表乱了"就是这么来的）。.list.tall ＝ 20×13 + 上下 1px 边框 = 262px。 */
.modal .list .it { height: 20px; line-height: 18px; padding: 0 8px; cursor: default;
                   font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal .list.tall { height: 262px; }
/* 筛选框：占对话框最上面一整行。⚠️ 别塞进右列 —— 右列会整体下移，两列顶端就错开了。 */
.modal .fsearch { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.modal .fsearch input { flex: 1 1 auto; min-width: 0; height: 22px; padding: 0 6px;
                        border: 1px solid #8d949b; background: #fff; font-size: 12.5px; color: #17263a; }
.modal .fsearch input:focus { outline: none; border-color: #4a86cf; }
.modal .fsearch .fcnt { flex: none; font-size: 11.5px; color: #5a636c; white-space: nowrap; }
.modal .list .it:hover { background: #e8f0fb; }
.modal .list .it.sel { background: #316ac5; color: #fff; }
.modal .sig { margin-top: 10px; padding: 4px 7px; border: 1px solid #c6ccd3; background: #fff;
              font-family: Consolas, monospace; font-size: 12px; line-height: 1.55;
              white-space: pre-line; color: #1f3550;
              max-height: 132px; overflow: auto; }   /* 用法是一行一种写法，条数多的要能滚 */
.modal .desc { margin-top: 6px; padding: 5px 6px; border: 1px solid #c6ccd3; background: #fff;
               height: 84px; overflow: auto; color: #333; line-height: 1.5; }
.modal .bar { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.modal .bar .sp { flex: 1; }
.modal .bar button { min-width: 76px; height: 23px; border: 1px solid #8d949b; background: linear-gradient(#fff,#eef1f5);
                     font-size: 12.5px; cursor: default; }
.modal .bar button:hover { background: linear-gradient(#fff,#dce8f8); border-color: #6d8cb5; }
.modal .bar button.help { min-width: 30px; }

/* 希腊字母：四列表格（输入 | 大写 | 小写 | 英文名） */
.gk-box { display: inline-block; }
.gk-head, .gk-row { display: grid; grid-template-columns: 56px 56px 56px 74px; align-items: center; }
.gk-head { border-bottom: 1px solid #c9ced4; padding-bottom: 3px; margin-bottom: 3px; }
.gk-head span { font-size: 11.5px; color: #5a636c; text-align: center; }
.gk-table { max-height: 58vh; overflow: auto; }
.gk-row + .gk-row { border-top: 1px solid #f2f4f6; }
.gk-row button { height: 19px; border: 1px solid transparent; background: none; cursor: default;
                 font: 15px 'Cambria Math', 'Times New Roman', serif; color: #1f2b38; }
.gk-row button:hover { background: var(--sel); border-color: var(--sel-bd); }
.gk-row button.key { font: 11px Arial, sans-serif; color: #8b949e; }
.gk-row .name { font: 11.5px Arial, sans-serif; color: #5a636c; text-align: center; }

/* 数学符号条上的按钮（:= ≤ ≥ 之类略宽一点） */
.tbtn.sym { width: 24px; }
.tbtn.sym b { font-size: 12.5px; font-weight: 400; color: #24384e; }

/* 框选：橡皮筋 + 选中区域的高亮 */
#marquee { position: absolute; display: none; z-index: 9; border: 1px solid #4a86cf;
           background: rgba(74,134,207,.13); pointer-events: none; }
/* ★ 粘贴落点光标（用户 2026-10-04："鼠标点击某处后按 Ctrl+V 在指定位置粘贴"）：
   点白板空白处 → 这里竖一条带横头的小插入光标，闪烁提示"待会儿会粘在这儿"。
   ⚠️ pointer-events:none 是关键：否则光标会挡住白板的空白点击，落点再也改不了。 */
#pastecaret { position: absolute; display: none; z-index: 8; pointer-events: none;
              width: 2px; height: 20px; margin-left: -1px; background: #1a73c8;
              animation: pcblink 1.1s steps(1, end) infinite; }
#pastecaret::before, #pastecaret::after { content: ''; position: absolute; left: -3px;
              width: 8px; height: 3px; background: #1a73c8; }
#pastecaret::before { top: 0; }
#pastecaret::after  { bottom: 0; }
@keyframes pcblink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .3; } }
/* 框选中的区域：用虚线框标出来（不要蓝色填充——几十个区域一起填充会变成"一堆蓝色小格子"） */
.wb-r.sel { background: transparent; border-color: #6f9fd1; border-style: dashed; }
.wb-r.sel .tools { display: flex; }
.assumerow { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.assumerow input, .assumerow select { border: 1px solid #b8bec6; background: #fff;
  height: 21px; font-size: 12px; }
.assumerow input.var { width: 62px; }
.assumerow input.val { width: 84px; }
.assumerow button { width: 20px; height: 21px; border: 1px solid #b8bec6; background: #fff; cursor: default; }
.assumerow button:hover { background: #e8f0fb; border-color: #6d8cb5; }
.assume-hint { font-size: 11.5px; color: #5a636c; margin: 4px 0 6px; line-height: 1.5; }
/* 图形/图像外面套一层占满整行的容器。
   ⚠️ 为什么需要它：.wb-r 是 flex 行容器，早先用 `.plotbox{flex-basis:100%}` 让图"独占一行"，
      但 flex-basis 会**盖过 width**（computed width 一直是容器宽度，不是 560px），
      于是左右拖动改宽度完全无效 —— 用户报的"只能上下拉伸，不能左右拉伸"就是这个。
      套一层 flex-basis:100% 的 wrapper，里面的盒子就是普通块级元素，width 说了算。 */
.wb-r > .vizrow { flex-basis: 100%; width: 100%; min-width: 0; margin-top: 4px;
                  display: flex; flex-wrap: nowrap; align-items: flex-start; }
.plotbox { width: 560px; max-width: 100%; position: relative; flex: 0 0 auto; }
.plotbox .ph { font-size: 11.5px; color: #8b949e; padding: 4px 2px; }

/* 绘图参数滑块框（2026-10-03 用户要求）：图形框**右侧**，按曲线分组，
   边框颜色跟曲线一致，框头是曲线名（f(x)），下面每个未定义参数一根滑块；
   右上角 ⚙ 设这一组参数的滑块范围。
   ★★ 竖排一列（用户 2026-10-03："三条、四条甚至更多曲线的时候最多只给了两个滑块区"）：
     原来是横向一排、每张卡 184px，曲线一多就把区域撑得比窗口还宽 —— 第 3 张往后直接
     跑到屏幕外面（区域宽 942→1326px 实测），看着就是"只给两个"。改成一列之后，
     不管多少条曲线占的都是同一个宽度，也不会再有谁被挤到看不见。 */
.pbox { display: flex; flex-direction: column; gap: 6px; margin-left: 8px;
        align-self: flex-start; flex: 0 0 auto; }
.pcard { --pc: #185FA5; border: 2px solid var(--pc); border-radius: 3px; background: #fff;
         width: 184px; padding: 6px 8px 8px 8px; box-sizing: border-box;
         display: flex; flex-direction: column; gap: 6px; }
.pcard .pch { display: flex; align-items: center; gap: 6px; }
.pcard .pcn { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--pc);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .pcs { width: 19px; height: 19px; padding: 0; border: 1px solid #c3cad2; background: #fff;
              color: #5a636c; font-size: 12px; line-height: 17px; border-radius: 3px; cursor: default; }
.pcard .pcs:hover { background: #eef4fd; border-color: #6d8cb5; color: #1f4e79; }
/* ★ 参数行 = [独立/共用 小按钮][参数名][滑块][数值]。
   ⚠️ 小按钮那列**永远占位**（没同名兄弟时按钮用 .none 隐藏但格子还在），
      否则同名/不同名的滑块左端会参差不齐 —— 用户一眼就看出"乱了"。 */
.pcard .prow { display: grid; grid-template-columns: 15px 13px 1fr 40px; align-items: center; gap: 5px; }
.pcard .plk { width: 15px; height: 15px; padding: 0; border: 1px solid transparent; background: none;
              color: #98a2ad; cursor: default; border-radius: 2px; line-height: 0; }
.pcard .plk:hover { background: #eef4fd; border-color: #b9cde6; }
.pcard .plk.on { color: var(--pc); }                 /* 挂了靠：用目标曲线的颜色 + 实心链 */
.pcard .plk.none { visibility: hidden; }             /* 占位，不显示 */
.pcard .pn { font-size: 12px; color: #2b3644; font-style: italic; text-align: right;
             white-space: nowrap; overflow: hidden; }
.pcard .pvnum { font-size: 11px; color: #5a636c; text-align: right;
                font-variant-numeric: tabular-nums; }
/* 「独立的 / 与某个同名参数共用」小浮层（点参数名前面的小链子按钮） */
.plinkmenu { position: fixed; z-index: 150; padding: 3px; background: var(--face);
             border: 1px solid var(--edge); box-shadow: 2px 3px 10px rgba(0,0,0,.28);
             min-width: 186px; font-size: 12.5px; user-select: none; }
.plinkmenu .lmh { padding: 2px 6px 5px; margin-bottom: 3px; color: #5a636c; font-size: 11.5px;
                  border-bottom: 1px solid var(--edge-lt); white-space: nowrap; }
.plinkmenu .lmi { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 2px;
                  white-space: nowrap; }
.plinkmenu .lmi:hover { background: var(--sel); }
.plinkmenu .lmi .tic { flex: none; width: 10px; color: #2b6cb0; }
.plinkmenu .lmi .sw { flex: none; width: 9px; height: 9px; border-radius: 2px;
                      border: 1px solid rgba(0,0,0,.15); }
/* ★ 滑块完全自绘（2026-10-03 用户："手柄用竖条，不要圆"+"有点错位"）。
   ⚠️ 用 native 的 `accent-color` 时，手柄是圆点、而且和自定义了高度的轨道**没对齐**
   （圆点被按 input 盒居中，轨道只有 4px，看着就是"手柄掉在轨道下面"）。
   全部自绘：轨道 = 4px 细条（走过的一段用曲线颜色），手柄 = **竖条**（5×15 圆角 1px），
   并用 margin-top 精确压到轨道中线上（(4−15)/2 = −5.5px）。
   `--fill` 由 JS 按当前值写百分比（渐变填充随值走，和手柄位置一致）。 */
.pcard input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 16px;
                           margin: 0; padding: 0; background: transparent; cursor: default;
                           --fill: 50%; }
.pcard input[type=range]:focus { outline: none; }
.pcard input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; border: none;
  background: linear-gradient(to right, var(--pc) 0 var(--fill), #e2e6eb var(--fill) 100%); }
.pcard input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 5px; height: 15px; border-radius: 1px;
  background: var(--pc); border: none; margin-top: -5.5px; }
.pcard input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: #e2e6eb; }
.pcard input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--pc); }
.pcard input[type=range]::-moz-range-thumb { width: 5px; height: 15px; border-radius: 1px;
                                             background: var(--pc); border: none; }
body.dark .pcard { background: #232a33; }
body.dark .pcard .pcs { background: #2b333d; border-color: #3d4753; color: #b8c4d2; }
body.dark .pcard .pn { color: #dfe6ee; }
body.dark .pcard .pvnum { color: #9fb0c2; }
body.dark .pcard input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--pc) 0 var(--fill), #3d4753 var(--fill) 100%); }
body.dark .pcard input[type=range]::-moz-range-track { background: #3d4753; }
.wb-r .tools .opt { display: none; }
.wb-r.hasplot .tools .opt { display: block; }
/* 求解块也要有 ⚙（求解选项：是否把结果定义给求解变量）—— 用户 2026-10-02 */
.wb-r.hassolve .tools .opt { display: block; }
.optgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.optgrid label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #333; }
.optgrid select, .optgrid input[type=number], .optgrid input[type=text] {
  border: 1px solid #b8bec6; background: #fff; font-size: 12px; height: 21px; }
/* 图形选项：统一的分节表格（数据系列 / 文字与坐标轴 / 坐标轴与网格 / 图型专属） */
.optwrap { display: flex; flex-direction: column; gap: 4px; }
.optsec { font-size: 11.5px; color: #1f4e79; font-weight: 700; margin: 3px 0 1px;
          padding-bottom: 2px; border-bottom: 1px solid #d6dde5; }
.oppanel { border: 1px solid #c6ccd3; background: #fff; padding: 5px 7px 6px 7px;
           display: flex; flex-direction: column; gap: 3px; margin-bottom: 2px; }
.oppanel .ophd, .oppanel .oprow { display: grid; gap: 5px; align-items: center; }
.oppanel .ophd { font-size: 10.5px; color: #5a636c; padding-bottom: 2px; }
.oppanel .oprow { font-size: 12px; color: #333; }
.oppanel .oplab { color: #2b3644; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oppanel input[type=color] { width: 32px; height: 20px; padding: 0; border: 1px solid #8d949b;
                             background: #fff; cursor: default; }
.oppanel input[type=number], .oppanel input[type=text] {
  width: 100%; height: 21px; border: 1px solid #b8bec6; background: #fff; font-size: 12px; }
.oppanel input:disabled { background: #f0f2f4; color: #9aa3ac; }
.oppanel select { width: 100%; height: 21px; border: 1px solid #b8bec6; background: #fff; font-size: 11.5px; }
.oppanel .opchk { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #3a4550; }

/* 图形的拖拽改大小手柄（右下角），plot 与图片共用 */
.plotbox, .imgbox { position: relative; }
.imgbox { flex: 0 0 auto; }
.rzbox { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; z-index: 8;
         cursor: nwse-resize; background:
           linear-gradient(135deg, transparent 0 42%, #9aa7b4 42% 52%, transparent 52% 62%,
                           #9aa7b4 62% 72%, transparent 72% 82%, #9aa7b4 82% 92%, transparent 92%);
         opacity: .85; }
.rzbox:hover { opacity: 1; background-color: rgba(74,134,207,.14); }
body.resizing, body.resizing * { user-select: none !important; cursor: nwse-resize !important; }

/* 图像区域：位图 + 尺寸说明 */
.imgbox { width: 560px; max-width: 100%; border: 1px solid #d6dde4;
          background: #fbfcfd; display: flex; flex-direction: column; }
.imgbox .imgwrap { flex: 1; min-height: 0; overflow: hidden; display: flex;
                   align-items: center; justify-content: center; }
.imgbox img { display: block; }
.imgbox .imgcap { flex: none; padding: 2px 6px; font-size: 11.5px; color: #5a6b7c;
                  border-top: 1px solid #e6ebf0; background: #f4f7fa; }

/* ============================================================ 矩阵结果的控制条
   用户 2026-10-01：矩阵只保留一种界面（老式 pmatrix）；「显示多少×多少 / 第几页」
   这条控制要留着，但位置挪到**区域右上角那排工具里**（和 ⠿ ⇄ ⚙ × 同一行），
   并且**跟着那排按钮一起出现和隐藏** —— 平时看不见，鼠标移到这块 / 这块是当前块时才出来。
   ⚠️ 它不再是 .res 的子元素，所以不会再占掉一整行、把区域撑高。 */
.matslot { display: flex; align-items: center; }
.matslot[hidden] { display: none !important; }   /* 必须显式写：否则会盖掉 [hidden] 的 display:none */
.matctl { display: flex; align-items: center; gap: 4px; white-space: nowrap;
          height: 19px; padding: 0 5px; border: 1px solid var(--edge); background: #fff;
          font-size: 11px; line-height: 1; color: #5a6b7c; }
.matctl .mcnum { width: 40px; height: 15px; padding: 0 3px; font-size: 11px;
                 border: 1px solid #c6ccd3; background: #fff; color: #23303d; }
.matctl .mcnum:focus { outline: 1px solid #6d8cb5; }
.matctl .mcsize { color: #8b98a5; }
.matctl .mclab, .matctl .mcunit, .matctl .mcx { color: #7b8894; }
.matctl .mcsep { width: 1px; height: 11px; background: #dde3e9; margin: 0 2px; }
/* 控制条比那几个小按钮高，带控制条时整排往上抬到"刚好贴着区域上边框"。
   ⚠️ 不要写死 top（-25px 会留 5px 缝，鼠标经过缝的时候 hover 就断了 —— 就是用户报的
      "鼠标往上挪控制条就没了"）。`bottom:100%` = 整排的底边正好压在上边框上，零缝隙。 */
.wb-r.hasmatctl .tools { top: auto; bottom: 100%; }
/* 在控制条的输入框里打字时（鼠标可能已经移开）也要保持可见 */
.wb-r.matpin .tools { display: flex; }