/* ============================================================
   检品ERP 主题层  v2
   八套配色：浅色四款 + 深色三款 + 米白默认
     warm  护眼米白（默认）   light 亮色        green 豆绿护眼
     sky   天青蓝             paper 牛皮纸
     night 深蓝夜班           dark  深灰        ink   墨黑
   纯 CSS 变量，零外部依赖，切换只重绘一次。

   v2 改了两件事：
   1) 主题按钮的弹层以前放在导航条里，导航条有 overflow-x:auto，
      弹层一露头就被裁掉 —— 点了像没反应。现在弹层挂到 body 上、
      用 position:fixed 由 JS 算位置，谁家的 overflow 都管不着它。
   2) 深色主题补了一大段「抬亮」覆盖：各页面 style 里写死的中性灰黑字
      （#303133 / #606266 / #909399 这类）不会跟着变量走，深底上就是
      一团黑。下面按亮度分三档统一抬到 --txt / --txt2 / --txt3。
      以后新页面写死颜色、深色下看不清的，往那三组清单里补一行即可。
   ============================================================ */

/* ---------- 1. warm 护眼米白（默认） ---------- */
:root{
  --pri:#3b5bdb; --pri-d:#2f4bc0; --pri-l:#eaedf9;
  --bg:#f3f4ec;  --bg2:#e9ebdf;  --card:#fbfcf5;
  --line:#dcdfd0; --line2:#e7e9dc;
  --txt:#2e3327; --txt2:#6a7162; --txt3:#9aa091;
  --on-pri:#fff;
  --ok:#2f8f5b;  --ok-bg:#e8f3ea;
  --warn:#b8791a; --warn-bg:#f8efdc;
  --bad:#c94a4b;  --bad-bg:#f8e9e9;
  --sh1:0 1px 2px rgba(35,40,28,.07), 0 1px 1px rgba(35,40,28,.04);
  --sh2:0 4px 14px rgba(35,40,28,.10), 0 1px 3px rgba(35,40,28,.06);
  --shb:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(35,40,28,.16);
  --r:10px; --rs:8px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. light 亮色 ---------- */
[data-theme="light"]{
  --pri:#3b5bdb; --pri-d:#2f4bc0; --pri-l:#eef1fd;
  --bg:#f5f7fa;  --bg2:#eceff4;  --card:#ffffff;
  --line:#e2e6ec; --line2:#eef1f5;
  --txt:#1f2937; --txt2:#667085; --txt3:#8b95a7;
  --on-pri:#fff;
  --ok:#16a34a;  --ok-bg:#e8f5ec;
  --warn:#d97706; --warn-bg:#fdf3e0;
  --bad:#dc2626;  --bad-bg:#fdeaea;
  --sh1:0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --sh2:0 4px 14px rgba(16,24,40,.09), 0 1px 3px rgba(16,24,40,.05);
  --shb:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(16,24,40,.16);
}

/* ---------- 3. green 豆绿护眼（新） ---------- */
[data-theme="green"]{
  --pri:#2f855a; --pri-d:#276749; --pri-l:#e4f0e7;
  --bg:#eef5ee;  --bg2:#e2ecdf;  --card:#f9fdf9;
  --line:#d3e3d2; --line2:#dfeadd;
  --txt:#24352a; --txt2:#5c7263; --txt3:#8ea394;
  --on-pri:#fff;
  --ok:#2f8f5b;  --ok-bg:#e0f0e5;
  --warn:#a8681a; --warn-bg:#f7edd8;
  --bad:#b93f42;  --bad-bg:#f7e6e6;
  --sh1:0 1px 2px rgba(30,48,36,.07), 0 1px 1px rgba(30,48,36,.04);
  --sh2:0 4px 14px rgba(30,48,36,.10), 0 1px 3px rgba(30,48,36,.06);
  --shb:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(30,48,36,.16);
}

/* ---------- 4. sky 天青蓝（新） ---------- */
[data-theme="sky"]{
  --pri:#2563eb; --pri-d:#1d4ed8; --pri-l:#e5edfd;
  --bg:#eef4fb;  --bg2:#e1eaf7;  --card:#fafcff;
  --line:#d5e1f0; --line2:#e2ecf8;
  --txt:#1e2c3f; --txt2:#5a6c82; --txt3:#8b9bb0;
  --on-pri:#fff;
  --ok:#16835a;  --ok-bg:#e2f2ea;
  --warn:#b4761b; --warn-bg:#f9efdc;
  --bad:#c0392b;  --bad-bg:#fbe9e7;
  --sh1:0 1px 2px rgba(20,36,60,.07), 0 1px 1px rgba(20,36,60,.04);
  --sh2:0 4px 14px rgba(20,36,60,.10), 0 1px 3px rgba(20,36,60,.06);
  --shb:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(20,36,60,.16);
}

/* ---------- 5. paper 牛皮纸（新） ---------- */
[data-theme="paper"]{
  --pri:#a15c1e; --pri-d:#8a4d16; --pri-l:#f2e6d3;
  --bg:#f4ede1;  --bg2:#e9dfcf;  --card:#fbf6ec;
  --line:#ddd0bb; --line2:#e7dccb;
  --txt:#3a2f22; --txt2:#6f5f4b; --txt3:#9c8d78;
  --on-pri:#fff;
  --ok:#4a7c3f;  --ok-bg:#e6efdf;
  --warn:#9a6512; --warn-bg:#f6ebd5;
  --bad:#a8402f;  --bad-bg:#f8e7e2;
  --sh1:0 1px 2px rgba(60,45,25,.08), 0 1px 1px rgba(60,45,25,.04);
  --sh2:0 4px 14px rgba(60,45,25,.12), 0 1px 3px rgba(60,45,25,.06);
  --shb:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(60,45,25,.16);
}

/* ---------- 6. night 深蓝夜班 ---------- */
[data-theme="night"]{
  --pri:#5b7cfa; --pri-d:#3f5fe0; --pri-l:#1e2b46;
  --bg:#10151d;  --bg2:#0b0f15;  --card:#182029;
  --line:#28323f; --line2:#202834;
  --txt:#d7e0ea; --txt2:#8b9bad; --txt3:#61708a;
  --on-pri:#fff;
  --ok:#4ade80;  --ok-bg:#152a20;
  --warn:#fbbf24; --warn-bg:#2a2313;
  --bad:#f87171;  --bad-bg:#2b1719;
  --sh1:0 1px 2px rgba(0,0,0,.5);
  --sh2:0 8px 24px rgba(0,0,0,.55);
  --shb:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 5px rgba(0,0,0,.5);
}

/* ---------- 7. dark 深灰 ---------- */
[data-theme="dark"]{
  --pri:#6b8afd; --pri-d:#5372e6; --pri-l:#252a35;
  --bg:#171717;  --bg2:#101010;  --card:#212121;
  --line:#343434; --line2:#2b2b2b;
  --txt:#e4e4e4; --txt2:#a3a3a3; --txt3:#737373;
  --on-pri:#fff;
  --ok:#5ec98a;  --ok-bg:#1a2b20;
  --warn:#e0a94a; --warn-bg:#2b2418;
  --bad:#e87a7a;  --bad-bg:#2b1a1a;
  --sh1:0 1px 2px rgba(0,0,0,.55);
  --sh2:0 8px 24px rgba(0,0,0,.6);
  --shb:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 5px rgba(0,0,0,.55);
}

/* ---------- 8. ink 墨黑（新，夜里最省眼） ---------- */
[data-theme="ink"]{
  --pri:#8ab4ff; --pri-d:#6b9bf5; --pri-l:#16202e;
  --bg:#000000;  --bg2:#0a0a0a;  --card:#121212;
  --line:#262626; --line2:#1e1e1e;
  --txt:#e8e8e8; --txt2:#9a9a9a; --txt3:#6a6a6a;
  --on-pri:#0b0f16;
  --ok:#5ec98a;  --ok-bg:#132a1c;
  --warn:#e0a94a; --warn-bg:#2a2313;
  --bad:#e87a7a;  --bad-bg:#2b1719;
  --sh1:0 1px 2px rgba(0,0,0,.7);
  --sh2:0 8px 24px rgba(0,0,0,.8);
  --shb:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.7);
}

/* ---------- 基础骨架 ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg) !important;
  color:var(--txt) !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{ animation:jp-fade .22s var(--ease); }
@keyframes jp-fade{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* ---------- 顶栏统一成主色深底 ---------- */
.nav, header{
  background:linear-gradient(135deg,var(--pri-d),var(--pri)) !important;
  border-bottom:1px solid rgba(0,0,0,.12) !important;
  color:#fff !important;
  box-shadow:0 2px 10px rgba(20,26,40,.14);
}
/* 深色主题下顶栏跟着压暗，避免大面积亮蓝刺眼 */
[data-theme="night"] .nav, [data-theme="night"] header{
  background:linear-gradient(135deg,#1a2333,#243047) !important;
  border-bottom-color:#2b3648 !important;
  box-shadow:0 2px 12px rgba(0,0,0,.5);
}
[data-theme="dark"] .nav, [data-theme="dark"] header{
  background:linear-gradient(135deg,#1c1c1c,#272727) !important;
  border-bottom-color:#333 !important;
  box-shadow:0 2px 12px rgba(0,0,0,.55);
}
[data-theme="ink"] .nav, [data-theme="ink"] header{
  background:linear-gradient(135deg,#0a0a0a,#151515) !important;
  border-bottom-color:#242424 !important;
  box-shadow:0 2px 12px rgba(0,0,0,.8);
}
.nav b, .nav .brand, header b{ color:#fff !important; }
.nav a, header a{
  color:rgba(255,255,255,.82) !important;
  border-radius:var(--rs) !important;
  transition:background .15s var(--ease), color .15s var(--ease) !important;
}
.nav a:hover, header a:hover{ background:rgba(255,255,255,.16) !important; color:#fff !important; }
/* 当前页：白底 + 主色字，保证在深底上清晰 */
.nav a.on, header a.on{
  background:rgba(255,255,255,.95) !important;
  color:#2b4bc4 !important;
  font-weight:600;
}
/* 顶栏右侧的小按钮（如「条码库」）同样白底主色字 */
.nav .right button, header .right button{
  background:rgba(255,255,255,.95) !important;
  color:#2b4bc4 !important;
  border:1px solid rgba(255,255,255,.5) !important;
  box-shadow:none !important;
}
.nav .right button:hover, header .right button:hover{
  background:#fff !important; transform:none !important;
}
header span, header .ver, header #verTag{ color:rgba(255,255,255,.72) !important; }
/* 版本号跟在菜单后面，别浮在中间抢位置（主题按钮要靠右） */
.nav #verTag, header #verTag{ margin-left:0 !important; }

/* ---------- 卡片 ---------- */
.card, .panel, .box, .stat, .toolbar, .det, .ctab, .acbox, .ac-list,
.seqopt, .ap-item, .box .hd{
  background:var(--card) !important;
  border-color:var(--line) !important;
  box-shadow:var(--sh1);
}
.ap-item.on{ background:var(--pri-l) !important; border-color:var(--pri) !important; }
.box .hd{ box-shadow:none; border-bottom:1px solid var(--line2) !important; }
/* 次级底（未选中的页签 / 表头行 / 分组底） */
.tab, .parttd{
  background:var(--bg2) !important;
  border-color:var(--line) !important;
  color:var(--txt2) !important;
}
.tab.on{
  background:var(--card) !important;
  color:var(--pri) !important;
  border-color:var(--line) !important;
}
/* 主色淡底小标 */
.pill, .tag, .orderbar, .ap-scope, .b-doing{
  background:var(--pri-l) !important;
  color:var(--pri) !important;
}
/* 警示 / 强调小标 */
.t-todo, .p-mix, .ap-rw, .colorth, .colorgroup, .b-part{
  background:var(--warn-bg) !important;
  color:var(--warn) !important;
}
.p-free{ background:var(--bad-bg) !important; color:var(--bad) !important; }
.b-ok, .b-done{ background:var(--ok-bg) !important; color:var(--ok) !important; }
.seqopt.sel{ background:var(--pri-l) !important; border-color:var(--pri) !important; color:var(--pri) !important; }
/* 弹窗 / 浮层：必须跟着主题走，否则深色下会亮瞎 */
.modal, .pop{
  background:var(--card) !important;
  border-color:var(--line) !important;
  color:var(--txt) !important;
  box-shadow:var(--sh2) !important;
}
.modal h2, .modal h3, .pop div{ color:var(--txt); }
.pop div:not(.dis):hover{ background:var(--pri-l) !important; color:var(--pri) !important; }

/* ---------- 表格 ---------- */
table{ background:transparent !important; }
th{
  background:var(--bg2) !important;
  color:var(--txt2) !important;
  border-color:var(--line) !important;
  letter-spacing:.02em;
}
td{ color:var(--txt) !important; border-color:var(--line2) !important; }
th, td{ font-variant-numeric:tabular-nums; }
/* hover 用叠加层，不破坏原有状态底色 */
tbody tr{ transition:background-color .13s var(--ease); }
tbody tr:hover > td{
  background-image:linear-gradient(rgba(59,91,219,.08),rgba(59,91,219,.08));
}

/* ---------- 表单 ---------- */
input, select, textarea{
  background:var(--card) !important;
  color:var(--txt) !important;
  border-color:var(--line) !important;
  border-radius:var(--rs) !important;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease) !important;
}
input::placeholder, textarea::placeholder{ color:var(--txt3) !important; }
input:focus, select:focus, textarea:focus{
  border-color:var(--pri) !important;
  box-shadow:0 0 0 3px var(--pri-l) !important;
  outline:none !important;
}

/* ---------- 按钮：立体感 ---------- */
button{
  border-radius:var(--rs) !important;
  box-shadow:var(--shb);
  transition:transform .1s var(--ease), box-shadow .16s var(--ease),
             background-color .16s var(--ease), filter .16s var(--ease) !important;
}
button:hover{ transform:translateY(-1px); filter:brightness(1.04); }
button:active{ transform:translateY(1px); box-shadow:0 1px 2px rgba(20,26,40,.22), inset 0 1px 0 rgba(255,255,255,.12) !important; }
button:disabled{ transform:none !important; box-shadow:none !important; filter:none !important; }
button.ghost, button.btn-g, button.btn-ghost,
button.btn-back, button.wbtn{
  background:var(--card) !important;
  color:var(--txt) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 1px 2px rgba(35,40,28,.08);
}
button.ghost:hover, button.btn-g:hover, button.btn-ghost:hover,
button.btn-back:hover, button.wbtn:hover{ background:var(--bg2) !important; }
/* 虚线小按钮（board 的「＋ 添加…」）/ 行内小动作 */
button.dash, .mbtn, .abtn{
  background:var(--card) !important;
  color:var(--pri) !important;
  border-color:var(--pri) !important;
}
button.dash:hover, .mbtn:hover, .abtn:hover{ background:var(--pri-l) !important; }
a.link{ transition:opacity .14s var(--ease); }
a.link:hover{ opacity:.72; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--line); border-radius:8px;
  border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--txt3); background-clip:padding-box; }

/* ============================================================
   深色主题：把各页面写死的中性灰黑字统一抬亮
   这三组是从 13 个页面的 style 里扫出来的，只收「没写 background 的
   纯文字色」。带浅底的（小徽章、浅底按钮）有各自专门规则，不在这里动。
   新页面写死颜色导致深色下看不清的，把选择器补进对应那组即可。
   ============================================================ */
/* 正文：原来近黑的 #222/#303133/#1f2329 这类 */
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .delta .sub b,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibHist .ih-sum b,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibHist .ih-tb .ih-col,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibHist .ih-tb tfoot td b,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibComps .cc .nm,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibComps .cc .qt b,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .pg-t.on,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .wl tbody td,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .wl td.d .md,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibHist .ih-tb td,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .cd .s b,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .wk,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .sum h4,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) th.d,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .lb,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .skutbl td.c {
  color: var(--txt) !important;
}
/* 次要：原来中灰的 #606266/#6b7280/#555 这类 */
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .seg,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .delta .sub,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .warn ol,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .modal p,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .pop .pgp .v,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .f label,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibHist .ih-hm,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibHist .ih-sum,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibHist .ih-tb td.ih-ord,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #mask4 table.matrix th,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibComps .cc .qt,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibCurBar,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .ar,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .cd .s,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .field label,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .meta .k,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .biko .k,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .wl tfoot td.d,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .muted,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .grid label,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .tot,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .planbar .k,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .tab,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .skumeta,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .modal .skutip,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) td.res.rate,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .warn .tip {
  color: var(--txt2) !important;
}
/* 弱提示：原来浅灰的 #909399/#8a97ab 这类 */
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .pg-t,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .weekday,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibHist .ih-bs,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibHist .ih-empty,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) #ibComps .cc .nm .cat,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .pcell i,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .cd .t,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .cd .n small,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .wcell div,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .kcell small,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .pgx,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .empty,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .sum .item .k,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .sum .item .v small,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .stat .l,
:is([data-theme="night"],[data-theme="dark"],[data-theme="ink"]) .wl-s {
  color: var(--txt3) !important;
}

/* ============================================================
   主题切换器
   按钮在导航条里，弹层挂在 body 上（fixed），不受导航条 overflow 裁剪
   ============================================================ */
.thm{ position:relative; margin-left:auto !important; display:flex; align-items:center; flex:none; }
/* 用户角标跟着主题按钮往右排，别跟它抢 auto 空间 */
.nav .jp-user, header .jp-user{ margin-left:8px !important; }
.thm-b{
  width:34px; height:34px; padding:0 !important;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:9px !important;
  box-shadow:none !important;
  cursor:pointer;
}
.thm-b:hover{ background:rgba(255,255,255,.28) !important; transform:none !important; }
.thm-b[aria-expanded="true"]{ background:rgba(255,255,255,.3) !important; }

/* 弹层：固定定位，位置由 theme.js 按按钮位置算 */
.thm-pop{
  position:fixed; left:0; top:0;
  min-width:186px; max-height:min(74vh,460px); overflow:auto;
  padding:6px;
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--sh2);
  display:none; z-index:2147483000;
}
.thm-pop.show{ display:block; animation:jp-pop .16s var(--ease); }
@keyframes jp-pop{ from{opacity:0;transform:translateY(-6px) scale(.98)} to{opacity:1;transform:none} }
.thm-hd{
  font-size:11.5px; color:var(--txt3); padding:5px 10px 6px;
  letter-spacing:.04em;
}
.thm-it{
  display:flex; align-items:center; gap:9px;
  padding:9px 10px; border-radius:8px; cursor:pointer;
  font-size:13.5px; color:var(--txt); white-space:nowrap;
  transition:background .13s var(--ease);
}
.thm-it:hover{ background:var(--bg2); }
.thm-it.on{ background:var(--pri-l); color:var(--pri); font-weight:600; }
.thm-dot{
  position:relative; width:15px; height:15px; border-radius:50%; flex:none;
  border:1px solid rgba(0,0,0,.28);
}
.thm-dot::after{
  content:''; position:absolute; inset:3.5px; border-radius:50%;
  background:var(--dpri,#3b5bdb);
}
.thm-it.on .thm-dot{ box-shadow:0 0 0 2px var(--pri); }
.thm-it .thm-ck{ margin-left:auto; font-size:12px; color:var(--pri); }

/* ============================================================
   回到顶部
   页面长了往下滚才浮出来，短页面不占地方；打印不出现
   ============================================================ */
.backtop{
  position:fixed; right:22px; bottom:26px;
  width:42px; height:42px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%;
  background:var(--card); color:var(--txt2);
  box-shadow:var(--sh2); cursor:pointer; z-index:80;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .18s var(--ease), transform .18s var(--ease),
             visibility .18s, background .15s, color .15s, border-color .15s;
}
.backtop.on{opacity:1; visibility:visible; transform:translateY(0)}
.backtop:hover{background:var(--pri); color:var(--on-pri); border-color:var(--pri)}
.backtop:active{transform:translateY(0) scale(.93)}
.backtop:focus-visible{outline:2px solid var(--pri); outline-offset:2px}

@media (max-width:600px){
  .backtop{right:12px; bottom:14px; width:38px; height:38px}
  .thm-pop{ min-width:168px; }
}
@media print{
  .backtop{display:none !important}
  .thm, .thm-pop{display:none !important}
}