/* ══════════════════════════════════════════════════════════════════════
   theme-v2.css — 设计系统层（2026-10-19）
   在 styles.css 之后加载：**只覆盖视觉，不改结构/类名/功能**。
   回滚方式：把 index.html 里这一行删掉即可（基础样式仍完整）。

   为什么单独一层而不是重写 styles.css：
     · 基础样式 446 行、60+ 选择器，还有各模块自带的 scoped 样式与大量内联样式；
       整份重写漏一个选择器就是一次静默视觉回归。
     · 覆盖层可以只处理「设计决策」（token / 层级 / 密度 / 状态），风险可控。
   ────────────────────────────────────────────────────────────────────── */

/* ── 1. 设计 token ────────────────────────────────────────────────────
   老版本只有 14 个颜色变量，字号 10 种（9~14px）、圆角 8 种（4~20px）全靠硬编码，
   所以同层级元素在不同页面长得不一样。这里补齐 5 类 token，后续只允许用 token。 */
:root{
  /* 1.1 间距：4 的倍数，命名按序号而不是像素，换密度只改这里 */
  --s1:4px;  --s2:6px;  --s3:8px;   --s4:12px;
  --s5:16px; --s6:20px; --s7:24px;  --s8:32px;

  /* 1.2 字号：7 档，覆盖 11~26px；正文基准 13.5px（原 13px 偏小） */
  --fs-1:11px;   /* 角标/极小辅助 */
  --fs-2:11.5px; /* 次要说明（表头、卡片脚注） */
  --fs-3:12.5px; /* 表格正文 */
  --fs-4:13.5px; /* 正文基准 */
  --fs-5:15px;   /* 区块标题 */
  --fs-6:18px;   /* 页面标题 */
  --fs-7:26px;   /* KPI 数值 */
  --lh-tight:1.35; --lh-body:1.62;

  /* 1.3 圆角：4 档（原来 8 种） */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;

  /* 1.4 阴影：3 级，克制使用；原来只有 0~2 处零散阴影 */
  --sh-1:0 1px 2px rgba(16,24,40,.04);
  --sh-2:0 1px 3px rgba(16,24,40,.06), 0 8px 24px -12px rgba(16,24,40,.18);
  --sh-3:0 12px 32px -8px rgba(16,24,40,.22);

  /* 1.5 动效：统一两种时长（原来 .12/.15/.22 混用） */
  --t-fast:120ms; --t-base:180ms;
  --ease:cubic-bezier(.4,0,.2,1);

  /* 1.6 语义色补齐「软边框」——原来 #e8c98a/#f0c2c7/#bfe3cb/#bcd7f5 散落硬编码，
         深色模式得逐条 `html.dark xxx` 打补丁，必然漏。 */
  --green-line:#b7e4cc; --amber-line:#f0d9a8; --red-line:#f5c2c9;
  --accent-line:#c7dbfb; --teal-line:#b3e3d4;
  --focus:0 0 0 3px rgba(47,111,237,.20);

  /* 1.7 提高可读性：--faint 原来是 #8b95a3，白底对比度 ≈3.05:1，
         11.5px 小字远不达 AA(4.5:1)。新增 --muted 专供小字。 */
  --muted:#69737f;
}

/* 深色模式：只覆盖颜色（间距/字号/圆角共用） —— 比原来逐条打补丁干净 */
html.dark{
  --bg:#0f1216; --card:#171b21; --ink:#e9edf2; --sub:#9aa5b1; --faint:#74808d;
  --muted:#8d98a5;
  --line:#242a32; --line2:#333b45;
  --accent:#6aa2ff; --accent-bg:#16233a; --accent-line:#28456f;
  --green:#4ad295; --green-bg:#102a1c; --green-line:#1f5340;
  --teal:#45c2a4; --teal-bg:#0f2a24; --teal-line:#1d5044;
  --amber:#e8ad4d; --amber-bg:#2e2411; --amber-line:#5c4718;
  --red:#f4838f; --red-bg:#311820; --red-line:#5e2c36;
  --sh-1:0 1px 2px rgba(0,0,0,.30);
  --sh-2:0 1px 3px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.55);
  --sh-3:0 12px 32px -8px rgba(0,0,0,.65);
  --focus:0 0 0 3px rgba(106,162,255,.28);
}

/* ── 2. 全局排版与可读性 ─────────────────────────────────────────────── */
body{
  font-size:var(--fs-4);
  line-height:var(--lh-body);
  letter-spacing:.006em;
  /* 数字列统一等宽数位，表格里不再出现跳动 */
  font-feature-settings:"tnum" 0;
}
/* 只在数字型容器开启 tabular，正文保持均衡字距 */
td.n, .kpi .v, .mono, .sf-line b, .pgbar, th{font-variant-numeric:tabular-nums}

/* 小字统一提到 --muted（对比度 5.1:1），--faint 只留给 11px 以下装饰 */
.dim, .card .s, .sec-t .hint, .kpi .l, .kpi .s{color:var(--muted)}
.bs, .sf-line, .sf-note, .ngrp-t, .fpb{color:var(--muted)}

/* 焦点可见性：全站键盘可达（原来只有输入框有效果，按钮完全没有） */
:where(button, [role="button"], a, select, input, .nv, .chip, .tag, th[data-sort]):focus-visible{
  outline:none; box-shadow:var(--focus); border-color:var(--accent);
  border-radius:var(--r-sm);
}

/* 滚动条：细一点，深色模式自动跟随 */
.view::-webkit-scrollbar, .tw::-webkit-scrollbar, .tblwrap::-webkit-scrollbar{width:9px;height:9px}
.view::-webkit-scrollbar-thumb, .tw::-webkit-scrollbar-thumb,
.tblwrap::-webkit-scrollbar-thumb{background:var(--line2);border-radius:var(--r-pill);
  border:2px solid transparent;background-clip:content-box}
.view::-webkit-scrollbar-thumb:hover, .tw::-webkit-scrollbar-thumb:hover,
.tblwrap::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box}

/* ── 3. 侧栏：从「一堆链接」变成有分组的导航 ────────────────────────── */
.side{width:224px;padding:var(--s5) var(--s4) var(--s4)}
.brand{padding:var(--s1) var(--s2) var(--s5);gap:var(--s4)}
.brand .logo{width:44px;height:44px;border-radius:var(--r-md);box-shadow:var(--sh-1)}
.brand::after{display:none}                      /* 品牌签名线在浅底上显得脏，去掉 */
.bn{font-size:var(--fs-5);font-weight:650;letter-spacing:-.01em}
.bs{font-size:var(--fs-2)}

nav{gap:var(--s1)}
.ngrp{margin-top:var(--s5)}
.ngrp:first-child{margin-top:0}
.ngrp-t{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--muted);
  padding:0 var(--s3) var(--s2);text-transform:uppercase;opacity:.85;
}
.nv{
  position:relative;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  font-size:var(--fs-4);color:var(--sub);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nv:hover{background:color-mix(in srgb, var(--accent) 7%, transparent);color:var(--ink)}
.nv.on{
  background:var(--accent-bg);color:var(--accent);font-weight:600;
}
.nv.on::before{                                   /* 左侧激活指示条：扫视时更快定位 */
  content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:var(--r-pill);background:var(--accent);
}
.nv .ic{width:15px;height:15px;border-radius:var(--r-sm);opacity:.5}
.nv.on .ic{opacity:.9}
.nv .ct{
  font-size:var(--fs-2);padding:0 var(--s1);border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--ink) 6%, transparent);color:var(--muted);
  min-width:20px;text-align:center;
}
.nv.on .ct{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent)}

.side-foot{border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s4)}
.sf-line{font-size:var(--fs-2);padding:var(--s1) var(--s3)}
.sf-note{font-size:var(--fs-1);line-height:1.65;border-top-style:dashed}

/* ── 4. 顶栏：控件的视觉权重分级（结构不变，只分级） ────────────────── */
.top{
  height:56px;padding:0 var(--s6);gap:var(--s4);
  background:color-mix(in srgb, var(--card) 88%, var(--bg));
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line);
}
.crumb{
  font-size:var(--fs-6);font-weight:650;letter-spacing:-.02em;
  /* ★ 原来被 flex 压成两行（「总览/盘」），必须 nowrap + 不参与压缩 */
  white-space:nowrap;flex:0 0 auto;
}
.top-logo{width:24px;height:24px;border-radius:var(--r-sm)}

.top-mid{max-width:520px}
.sbox{width:min(480px,100%)}
#gsearch{
  height:34px;font-size:var(--fs-3);padding:0 var(--s4);border-radius:var(--r-md);
  background:var(--bg);border:1px solid var(--line2);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
#gsearch:focus{border-color:var(--accent);background:var(--card);box-shadow:var(--focus)}
.spop{top:40px;border-radius:var(--r-md);box-shadow:var(--sh-3);border-color:var(--line2)}
.shit{padding:var(--s3) var(--s4);transition:background var(--t-fast) var(--ease)}
.shit .sn{font-size:var(--fs-3)}

/* 顶栏右侧：三组 —— 状态组 / 视图组 / 操作组，用发丝分隔线切开 */
.top-right{gap:var(--s2);align-items:center}
.top-right > *{flex:0 0 auto}
.acct-box{margin-right:var(--s2)}

/* 表单控件（账期/角色/按钮）统一高度 32px，视觉对齐 */
.sel, .btn, .top-right .btn.sm{
  height:32px;font-size:var(--fs-3);border-radius:var(--r-sm);
  border:1px solid var(--line2);background:var(--card);color:var(--ink);
  padding:0 var(--s3);display:inline-flex;align-items:center;gap:var(--s2);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover{background:color-mix(in srgb, var(--ink) 5%, var(--card));border-color:var(--line2)}
.btn:active{transform:translateY(.5px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:color-mix(in srgb, var(--accent) 88%, #000)}
.btn.icon{width:32px;padding:0;justify-content:center}

/* 主操作（刷新）加重：顶栏唯一实心按钮，扫视时一眼能找到 */
#refreshBtn{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;
  box-shadow:0 1px 2px rgba(47,111,237,.35);
}
#refreshBtn:hover{background:color-mix(in srgb, var(--accent) 88%, #000);color:#fff}

/* 状态 pill：低饱和、无边框噪音 */
.pill{
  height:26px;display:inline-flex;align-items:center;font-size:var(--fs-2);
  padding:0 var(--s3);border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--ink) 5%, transparent);color:var(--muted);
}
.pill.fresh{background:transparent;border:1px solid var(--line2)}
.pill.fresh.stale{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber)}

/* 演练模式：开关态用琥珀，但只做描边 + 淡底，避免和主色抢 */
.dry{height:30px;border-radius:var(--r-pill);padding:0 var(--s3);font-size:var(--fs-2)}
.dry:has(input:checked){background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber)}

/* ── 5. 内容区：疏密与层级 ───────────────────────────────────────────── */
.view{padding:var(--s7) var(--s6) var(--s8)}
.sec{margin-bottom:var(--s7)}

/* 区块标题：从「和正文差不多大」提到清晰的一级层次 */
.sec-t{
  font-size:var(--fs-5);font-weight:650;letter-spacing:-.01em;
  margin:0 0 var(--s4);gap:var(--s3);
}
.sec-t .hint{font-size:var(--fs-2);font-weight:400;line-height:1.6}

/* 卡片：统一 padding + 极轻阴影，去掉「白底 + 浅灰边」的扁平感 */
.card, .kpi, .asset{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.card{padding:var(--s5) var(--s6)}
.kpi{padding:var(--s5) var(--s5) var(--s5)}
.asset{padding:var(--s5)}

/* KPI：数值放大到 26px，标签/副标题拉开层级 */
.kpi .l{font-size:var(--fs-2);margin-bottom:var(--s2);letter-spacing:.01em}
.kpi .v{font-size:var(--fs-7);font-weight:650;line-height:1.15;letter-spacing:-.02em}
.kpi .s{font-size:var(--fs-2);margin-top:var(--s2)}

.grid{gap:var(--s4)}
/* 响应式网格：不再靠固定 4 列 + 1080 断点，改成按可用宽度自适应 */
.g4{grid-template-columns:repeat(auto-fit, minmax(212px, 1fr))}
.g3{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
.g2{grid-template-columns:repeat(auto-fit, minmax(320px, 1fr))}

/* ── 6. 表格：可读性重做 ─────────────────────────────────────────────── */
table{font-size:var(--fs-3)}
/* ★ 2026-10-19：列多时浏览器会先挤首列 —— 门店表实测被挤到 60px，
   店名竖排成 5 行。这里给首列保底宽度并强制不折行，超出就横向滚动（.tw 已 overflow:auto）。 */
.tw table > thead > tr > th:first-child,
.tw table > tbody > tr > td:first-child,
.tblwrap table > thead > tr > th:first-child,
.tblwrap table > tbody > tr > td:first-child{min-width:168px}
/* 同一问题不止首列：门店表的「城市」列被压成「吴/忠/市」三行。
   .tblwrap 里的表都是「短字段表」（门店/履约），统一 nowrap 更可读；
   商品中心的长文本表用的是 .pm-tblwrap/.tw，不受这条影响。 */
.tblwrap table > tbody > tr > td,
.tblwrap table > thead > tr > th{white-space:nowrap}
th, td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
th{
  background:color-mix(in srgb, var(--ink) 3%, var(--card));
  color:var(--muted);font-weight:600;font-size:var(--fs-2);letter-spacing:.02em;
  border-bottom:1px solid var(--line2);
  position:sticky;top:0;z-index:2;
}
/* 行 hover 与斑马线：长表横读不串行 */
tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--ink) 1.6%, transparent)}
tbody tr:hover td{background:color-mix(in srgb, var(--accent) 6%, transparent)}
tbody tr:last-child td{border-bottom:none}

/* 表格容器：滚动时给出「还有内容」的阴影暗示 */
.tw, .tblwrap{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  box-shadow:var(--sh-1);
  background-image:linear-gradient(var(--card) 30%, rgba(255,255,255,0)),
                   linear-gradient(rgba(255,255,255,0), var(--card) 70%),
                   radial-gradient(farthest-side at 50% 0, rgba(16,24,40,.10), transparent),
                   radial-gradient(farthest-side at 50% 100%, rgba(16,24,40,.10), transparent);
  background-repeat:no-repeat; background-size:100% 24px, 100% 24px, 100% 8px, 100% 8px;
  background-position:0 0, 0 100%, 0 0, 0 100%;
  background-attachment:local, local, scroll, scroll;
}
html.dark .tw, html.dark .tblwrap{background-image:none}

th[data-sort]{transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
th[data-sort]:hover{background:var(--accent-bg);color:var(--accent)}
th.sa::after{content:"↑";font-size:10px;margin-left:3px}
th.sd::after{content:"↓";font-size:10px;margin-left:3px}

.mono{font-size:var(--fs-2);color:var(--muted)}
td.n{font-variant-numeric:tabular-nums}

/* ── 7. 标签 / 徽标 / 进度条：统一形态 ──────────────────────────────── */
.tag, .chip, .sev, .fpb{font-weight:600;letter-spacing:.01em}
.tag{padding:2px var(--s2);border-radius:var(--r-sm);font-size:var(--fs-1);line-height:1.6}
.chip{
  padding:2px var(--s3);border-radius:var(--r-pill);font-size:var(--fs-1);
  background:color-mix(in srgb, var(--ink) 6%, transparent);color:var(--muted);
  border:1px solid transparent;transition:filter var(--t-fast) var(--ease)
}
.chip.bad{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.chip.warn{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)}
.chip.good{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.chip.act:hover{filter:brightness(.97)}

.L0,.L1{background:var(--green-bg);color:var(--green)}
.L2{background:var(--teal-bg);color:var(--teal)}
.L3{background:var(--amber-bg);color:var(--amber)}
.L4{background:var(--red-bg);color:var(--red)}

.sev{width:26px;border-radius:var(--r-sm);font-size:var(--fs-1);line-height:1.65}
.sev.P2{background:color-mix(in srgb, var(--ink) 6%, transparent);color:var(--muted)}

.bar{height:6px;border-radius:var(--r-pill);background:color-mix(in srgb, var(--ink) 8%, transparent)}
.bar > i{background:var(--accent);border-radius:var(--r-pill);transition:width var(--t-base) var(--ease)}

/* ── 8. 提示条 / 空态 / 骨架 ─────────────────────────────────────────── */
.fpbar{padding:var(--s2) var(--s6);background:var(--card);gap:var(--s2);font-size:var(--fs-2)}
.fp{
  padding:2px var(--s3);border-radius:var(--r-pill);border:1px solid var(--line2);
  background:var(--card);color:var(--muted);
}
.fp.b-period{border-color:var(--green-line);background:var(--green-bg);color:var(--green)}
.fp.b-realtime{border-color:var(--amber-line);background:var(--amber-bg);color:var(--amber)}
.fp.b-snapshot{border-color:var(--accent-line);background:var(--accent-bg);color:var(--accent)}
.fp.b-full{background:color-mix(in srgb, var(--ink) 5%, transparent)}

.sb-in, .alert, .todo{
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--card);
  box-shadow:var(--sh-1);
}
.sb-in{padding:var(--s3) var(--s4);background:var(--amber-bg);border-color:var(--amber-line)}
.sb-in.bad{background:var(--red-bg);border-color:var(--red-line)}
.alert{padding:var(--s4) var(--s5);margin-bottom:var(--s2)}
.todo{padding:var(--s4) var(--s5);margin-bottom:var(--s3);transition:box-shadow var(--t-fast) var(--ease)}
.todo:hover{box-shadow:var(--sh-2)}
.todo .rk{width:24px;height:24px;font-size:var(--fs-2)}

.empty{padding:var(--s8) var(--s6)}
.empty .et{font-size:var(--fs-5);margin-bottom:var(--s2)}

.sk-card{border-radius:var(--r-md);height:82px}

/* ── 9. 浮层：抽屉 / 弹窗 / toast ───────────────────────────────────── */
.drawer{border-radius:var(--r-lg) 0 0 var(--r-lg);box-shadow:var(--sh-3)}
.drawer-h{padding:var(--s4) var(--s6)}
.drawer-h .dt{font-size:var(--fs-5)}
.drawer-b{padding:var(--s5) var(--s6)}
.modal{background:rgba(15,18,22,.46);backdrop-filter:blur(2px)}
.modal .mb{
  border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-3);
  border:1px solid var(--line);
}
.modal .mt{font-size:var(--fs-5);margin-bottom:var(--s3)}
.toast{
  border-radius:var(--r-pill);padding:var(--s2) var(--s5);font-size:var(--fs-3);
  box-shadow:var(--sh-3);background:#1b2027;
}

/* ── 10. 响应式：从「挤成两行」改成「按角色重排」 ──────────────────── */
@media(max-width:1440px){
  .top-right{gap:var(--s2)}
  .view{padding:var(--s6) var(--s5) var(--s8)}
}
@media(max-width:1440px){
  /* 顶栏：搜索独占一行，操作组横向滚动但不折行（高度稳定在 2 行内）
     ★ 断点从 1200 提到 1440：1280 宽时 9 个控件仍然塞不进一行，右侧「刷新」被切掉。 */
  .top{height:auto;min-height:56px;padding:var(--s3) var(--s4);row-gap:var(--s2)}
  .top-mid{order:3;flex:1 1 100%;max-width:none}
  .sbox{width:100%}
  .top-right{order:2;width:auto;margin-left:auto;flex-wrap:nowrap;overflow-x:auto;
    overscroll-behavior-x:contain;scrollbar-width:none}
  .top-right::-webkit-scrollbar{display:none}
  .crumb{font-size:var(--fs-5)}
}
@media(max-width:1440px){
  .acct-pill{max-width:180px}
  .acct-pill i{display:none}          /* 窄档只留名字，岗位/范围放到 title */
}
@media(max-width:1100px){
  /* auto-fit 在 ~740px 内容宽会排成 3 列 + 1 张孤卡（实测 980 窗口），2 列更整齐 */
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .side{width:196px}
}
@media(max-width:820px){
  .side{width:100%;padding:var(--s2) var(--s3);border-radius:0}
  .nv{padding:var(--s2) var(--s3);font-size:var(--fs-3)}
  .view{padding:var(--s5) var(--s4) var(--s7)}
  /* 小屏表格：首列（门店/商品名）吸附，横向滚动时不丢上下文 */
  .tw table th:first-child, .tblwrap table th:first-child{
    position:sticky;left:0;z-index:3;background:var(--card);
    box-shadow:1px 0 0 var(--line);
  }
  .tw table td:first-child, .tblwrap table td:first-child{
    position:sticky;left:0;z-index:1;background:var(--card);
    box-shadow:1px 0 0 var(--line);
  }
}
@media(max-width:560px){
  .view{padding:var(--s4) var(--s3) var(--s6)}
  .sec-t{font-size:var(--fs-4)}
  .kpi .v{font-size:22px}
  .g4,.g3,.g2{grid-template-columns:1fr 1fr}
}

/* ── 11. 无障碍 / 动效偏好 ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
/* 高对比偏好：加深边框，去掉半透明背景 */
@media (prefers-contrast:more){
  :root{--line:#c9cfd8; --line2:#aeb6c2; --muted:#4d565f}
  .nv.on{outline:1px solid var(--accent)}
}

/* ── 12. 深色模式收口 ────────────────────────────────────────────────
   基础样式里有 12 条 `html.dark xxx{background:#242930}` 之类的硬编码补丁，
   特异性高于本文件的通用规则，会在深色下把 v2 的新配色顶掉。
   这里按同一选择器重新声明一遍，保证深浅两套走同一套 token。 */
html.dark .top{background:var(--card)}          /* 半透明叠加在深色下会把控件压暗 */
html.dark .btn, html.dark .sel{
  border-color:color-mix(in srgb, var(--ink) 20%, transparent);
  color:var(--ink);
}
html.dark .btn:hover, html.dark .sel:hover{
  border-color:color-mix(in srgb, var(--ink) 34%, transparent);
}
html.dark th{background:color-mix(in srgb, var(--ink) 6%, var(--card));color:var(--muted)}
html.dark tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--ink) 3%, transparent)}
html.dark tbody tr:hover td{background:color-mix(in srgb, var(--accent) 10%, transparent)}
html.dark .nv:hover{background:color-mix(in srgb, var(--accent) 14%, transparent)}
html.dark .btn:hover{background:color-mix(in srgb, var(--ink) 10%, var(--card))}
html.dark .pill, html.dark .chip, html.dark .fp.b-full{
  background:color-mix(in srgb, var(--ink) 10%, transparent)
}
html.dark .bar{background:color-mix(in srgb, var(--ink) 14%, transparent)}
html.dark .sev.P2{background:color-mix(in srgb, var(--ink) 10%, transparent);color:var(--muted)}
html.dark .asset.bad{background:color-mix(in srgb, var(--red) 10%, var(--card));border-color:var(--red-line)}
html.dark .toast{background:#e9edf2;color:#12161b}
html.dark .dry:has(input:checked){border-color:var(--amber-line)}
html.dark .spop{box-shadow:var(--sh-3)}
html.dark .drawer{box-shadow:var(--sh-3)}