/* =====================================================================================
   全站共用「外观」——暖白／白底／暗夜三档
   被 geometry/ 那四件与 geometricrep/ 那五件 <link> 在同一份上（工具写
   href="../theme/theme.css"）。整套照数学白板 tools/mathboard/css/base.css 那一套。

   规矩只有一条：外壳的每一个颜色在这儿立一个变量，三档外观**只换变量值、不换规则**。
   工具自己的 <style> 里不许再出现 #rrggbb／rgba()，一律 var(--…)。

     :root                  ＝暖白（默认；<html> 上属性没写、或写 cream，都是它）
     [data-theme="light"]   ＝常规白底（中性冷灰外壳、纯白纸，投影最清楚）
     [data-theme="dark"]    ＝深灰暗夜（纸也换成深灰，字全都翻亮）

   ⚠️ 三张表必须成对齐：少写一个变量，那一档就退回暖白的值——暖白档永远看着是对的，
      所以这种 bug 只在另外两档露。
   ⚠️ --shadow-pop／--shadow-map 只装**那团阴影的颜色**，偏移和模糊留在规则里
      （`box-shadow:0 2px 10px var(--shadow-pop)`）：写成整条阴影再照旧带偏移，
      拼出来是非法值，浏览器直接把整条 box-shadow 丢掉（阴影神不知鬼不觉地没了）。
   ⚠️ 纸上的墨不走这里。图元存的是孩子挑的那支墨，暗夜那一档由 theme.js 的 themed()
      在「写进 DOM 那一口气」把它翻成亮墨，数据一个字都不动（换回暖白还是原来那套颜色）。
   ===================================================================================== */
:root{
  --bg:#f3efe6; --stage:#e9e3d5; --paper:#fff; --paper-2:#fffdf4; --row-2:#f8f6f2;
  --card:#fff; --chip:#fff; --field:#fff; --field-w:#fffdf7; --field-off:#f3f0ea; --panel-2:#fbf8f1;
  --line:#e9e1d0; --line-2:#eee6d6; --line-q:#ece5d6; --line-dash:#ece4d3; --line-dash2:#e5ddcb; --line-h:#c9bdf5;
  --ink:#2f3345; --ink-2:#3c4152; --ink-3:#9b96a8; --ink-4:#8d8798; --ink-5:#a09a8c; --ink-off:#b9b3c7; --ink-navy:#39406b;
  --ink-mute:#6b6577; --ink-dim:#b3abbd;
  --acc:#5442c7; --acc-deep:#3d2fa0; --acc-soft:#f2efff; --acc-tint:#f9f7ff; --pill-fg:#fff;
  --acc-chev:#f2edf9; --acc-chev-h:#e2dbf6; --hover:#efe9dc; --hover-2:#f7f4ff; --chip-2:#efe9db;
  --sw:#ded6c6; --sw-knob:#fff;
  --hot:#f0810f; --hint:#7a6cf0;
  --ok:#3aa657; --ok-ink:#1e7d1e; --ok-soft:#f0fbf2; --ok-line:#bfe6c8; --ok-line-2:#cdeed6; --ok-banner-line:#7fd67f; --good-banner-bg:#f0fff0ee;
  --amber-bg:#fdf3e0; --amber-line:#f3ddb0; --amber-ink:#b07a12; --brown-ink:#8a5b00;
  --pop-bg:#faf0d8; --pop-line:#f0dcae; --pop-ink:#a08b52;
  --banner-bg:#ffffffee; --banner-line:#ffd76e; --bad-line:#ff9a9a; --bad-banner-bg:#fff5f5ee; --bad-ink:#c0392b;
  --del-bg:#fff2f0; --del-line:#f6c9c2; --del-line-h:#e74c3c; --del-hover:#ffe6e2;
  --af-bg:#fdf7e8; --af-line:#f0e2bd; --af-ink:#6b5a20; --gold-h:#ffb703;
  --act-bg:#f6f2ff; --act-line:#ddd2f7; --act-bg-2:#efe7ff; --act-line-2:#b7a4ef;
  --dis-bg:#f7f4ec; --dis-line:#ece6d9; --dis-ink:#bdb6a6;
  --note-bg:#f6f0e2; --note-ink:#7a7488; --bad-bg:#fff5f5;
  --map-bg:rgba(255,255,255,.86); --map-line:#e2d8c2; --map-mark:#b6a68a; --map-thumb:rgba(84,66,199,.10);
  --banx:rgba(0,0,0,.1); --banx-h:rgba(0,0,0,.22);
  --shadow-pop:rgba(90,80,55,.10); --shadow-map:rgba(90,70,30,.16);
}
[data-theme="light"]{
  --bg:#eceef1; --stage:#e6e9ee; --paper:#fff; --paper-2:#fff; --row-2:#f7f8fa;
  --card:#fff; --chip:#fff; --field:#fff; --field-w:#fff; --field-off:#f1f3f5; --panel-2:#f4f6f8;
  --line:#dde1e6; --line-2:#e7eaee; --line-q:#e7eaee; --line-dash:#e7eaee; --line-dash2:#e3e7eb; --line-h:#b9b0e8;
  --ink:#1f2328; --ink-2:#41474f; --ink-3:#8b929a; --ink-4:#7d848c; --ink-5:#9aa1a9; --ink-off:#b3bac2; --ink-navy:#39406b;
  --ink-mute:#5f6672; --ink-dim:#aab0b8;
  --acc:#5442c7; --acc-deep:#3d2fa0; --acc-soft:#efedfd; --acc-tint:#f5f4fe; --pill-fg:#fff;
  --acc-chev:#efedfd; --acc-chev-h:#e0dcfa; --hover:#eef1f4; --hover-2:#f4f5fb; --chip-2:#e9edf1;
  --sw:#cdd3d9; --sw-knob:#fff;
  --hot:#f0810f; --hint:#7a6cf0;
  --ok:#2f9e52; --ok-ink:#1a6f34; --ok-soft:#eef9f0; --ok-line:#bfe0c8; --ok-line-2:#cfe8d4; --ok-banner-line:#7fd67f; --good-banner-bg:#f0fff0ee;
  --amber-bg:#fdf5e6; --amber-line:#f0e0bd; --amber-ink:#a06f10; --brown-ink:#7a5c04;
  --pop-bg:#fdf6e6; --pop-line:#f0e4c0; --pop-ink:#8f7420;
  --banner-bg:#ffffffee; --banner-line:#ffd76e; --bad-line:#ff9a9a; --bad-banner-bg:#fff5f5ee; --bad-ink:#c0392b;
  --del-bg:#fff2f0; --del-line:#f6c9c2; --del-line-h:#e74c3c; --del-hover:#ffe6e2;
  --af-bg:#fdf9ee; --af-line:#eee3c4; --af-ink:#6b5a20; --gold-h:#ffb703;
  --act-bg:#f4f2fd; --act-line:#ded8f6; --act-bg-2:#ece7fc; --act-line-2:#b9aef0;
  --dis-bg:#f2f3f5; --dis-line:#e3e6ea; --dis-ink:#aeb4bb;
  --note-bg:#f4f1e8; --note-ink:#6e7480; --bad-bg:#fff5f5;
  --map-bg:rgba(255,255,255,.9); --map-line:#dde1e6; --map-mark:#9aa4b0; --map-thumb:rgba(84,66,199,.10);
  --banx:rgba(0,0,0,.1); --banx-h:rgba(0,0,0,.22);
  --shadow-pop:rgba(30,40,60,.10); --shadow-map:rgba(30,40,60,.14);
}
[data-theme="dark"]{
  --bg:#16181a; --stage:#1b1e21; --paper:#22262a; --paper-2:#2b3035; --row-2:#23272b;
  --card:#202428; --chip:#2a2f34; --field:#22272c; --field-w:#262b30; --field-off:#262b30; --panel-2:#272c31;
  --line:#353b41; --line-2:#2d3338; --line-q:#2d3338; --line-dash:#2d3338; --line-dash2:#31373d; --line-h:#5b52a8;
  --ink:#e8e3d8; --ink-2:#d2cdc2; --ink-3:#948f85; --ink-4:#948f85; --ink-5:#7e7970; --ink-off:#5c5750; --ink-navy:#c8cfe8;
  --ink-mute:#b3ada2; --ink-dim:#5f5a66;
  --acc:#a99cf0; --acc-deep:#c3b8f5; --acc-soft:#2c2a44; --acc-tint:#26253a; --pill-fg:#1e2226;
  --acc-chev:#2e2b4a; --acc-chev-h:#3a3660; --hover:#2b3136; --hover-2:#2a2f42; --chip-2:#343a40;
  --sw:#3d444a; --sw-knob:#e6e1d6;
  --hot:#ffa94d; --hint:#a99cf0;
  --ok:#5cc47f; --ok-ink:#7fd68f; --ok-soft:#22302a; --ok-line:#3a5a42; --ok-line-2:#3a5a42; --ok-banner-line:#3f7a4c; --good-banner-bg:#1e2b22ee;
  --amber-bg:#332b1c; --amber-line:#5a4a26; --amber-ink:#e0b45c; --brown-ink:#d8bd7a;
  --pop-bg:#332b1c; --pop-line:#5a4a26; --pop-ink:#e0c98a;
  --banner-bg:#272c31ee; --banner-line:#6b5a2a; --bad-line:#7a3a3a; --bad-banner-bg:#2b2024ee; --bad-ink:#ff9a9a;
  --del-bg:#332024; --del-line:#5a3236; --del-line-h:#b04a44; --del-hover:#3d272b;
  --af-bg:#2e2a20; --af-line:#4a4128; --af-ink:#d8c48a; --gold-h:#d99a1f;
  --act-bg:#2c2a44; --act-line:#4a4478; --act-bg-2:#332f52; --act-line-2:#6d63b8;
  --dis-bg:#23272b; --dis-line:#31373d; --dis-ink:#5f5a66;
  --note-bg:#2a2a24; --note-ink:#b3ada2; --bad-bg:#2b2024;
  --map-bg:rgba(38,43,48,.92); --map-line:#353b41; --map-mark:#6e6a5f; --map-thumb:rgba(169,156,240,.16);
  --banx:rgba(255,255,255,.16); --banx-h:rgba(255,255,255,.26);
  --shadow-pop:rgba(0,0,0,.45); --shadow-map:rgba(0,0,0,.5);
}

/* 顶栏「◐ 外观」那一颗＋下拉菜单（照数学白板 ui.css 的 .menuWrap/.menu/.mi）。
   ⚠️ 样式挂在 .menu 这个类上而不是某个 id，开关只动 class——className 整串一赋会把 menu 这个类抹掉。 */
#themeCtl { position:relative; display:inline-flex; }
.menu { position:absolute; right:0; top:calc(100% + 7px); display:none; flex-direction:column; gap:4px;
        min-width:176px; padding:6px; background:var(--card); border:1px solid var(--line); border-radius:10px;
        box-shadow:0 2px 10px var(--shadow-pop); z-index:44; }
.menu.show { display:flex; }
.menu .mi { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:7px 10px;
            border-radius:7px; background:transparent; color:var(--ink-2); font-size:12.5px; white-space:nowrap; cursor:pointer; }
.menu .mi:hover { background:var(--hover); }
.menu .mi span { font-size:10.5px; color:var(--ink-5); letter-spacing:.03em; }
.menu .mi.on { background:var(--hover); color:var(--acc); font-weight:700; }
.menu .mi.on span { color:var(--ink-4); }
#btnTheme.on { border-color:var(--acc); background:var(--acc-soft); color:var(--acc-deep); }