/* ============================================================================
   自定义设置带来的样式联动（08）

   为什么单独一层：
   前面 7 个样式文件用的是**固定 px**，密度/字号这类偏好没法靠改一个变量全局生效。
   与其回去把 7 个文件里的几百处 px 都改成 calc()，不如在这里做**针对性覆盖**：
   只改「真正影响阅读与点按」的那批元素，范围可控、也容易回退。

   ⚠️ 深色模式的选择器分工（这是能做「强制浅色」的关键）：
     · :root[data-scheme="auto"] 与 :root:not([data-scheme]) → 跟随系统媒体查询
     · :root[data-scheme="dark"] → 显式深色
     · :root[data-scheme="light"] → 不匹配上面两个，于是回落到 00-tokens 的浅色默认值
   早先只写了媒体查询，所以「强制浅色」在深色系统上无效。
   ============================================================================ */

/* ---------------- 字号缩放 ----------------
   用 --fs 乘数作用在最主要的文字面：正文、行标题/副标题、导航、表格、按钮、标题。
   不追求「每个 px 都缩放」（那会把图标与间距也带偏），只保证读起来真的能变大变小。 */
body{font-size:calc(14px * var(--fs))}
.row .r-t{font-size:calc(13.5px * var(--fs))}
.row .r-s{font-size:calc(12px * var(--fs))}
.pg .pgn{font-size:calc(13px * var(--fs))}
.mod span:nth-child(2){font-size:calc(13.5px * var(--fs))}
.tbl th,.tbl td{font-size:calc(12.5px * var(--fs))}
.btn{font-size:calc(13px * var(--fs))}
.kv dt,.kv dd{font-size:calc(12.5px * var(--fs))}
.note,.hint{font-size:calc(12.5px * var(--fs))}
.bar .t,.bt{font-size:calc(16px * var(--fs))}
.card-hd h2{font-size:calc(14px * var(--fs))}
.kpi .v{font-size:calc(22px * var(--fs))}
.p-t{font-size:calc(16px * var(--fs))}
.mtabs button{font-size:calc(11px * var(--fs))}

/* ---------------- 界面密度 ----------------
   紧凑 = 行更矮、内边距更小（一屏能多看几行）；
   宽松 = 更好点按（触摸屏 / 高分辨率鼠标）。
   只动纵向，横向不动 —— 横向压缩会让中文列名挤在一起。 */
:root{--dens:1}
:root[data-density="compact"]{--dens:.78}
:root[data-density="loose"]{--dens:1.28}

.row{padding-top:calc(10px * var(--dens));padding-bottom:calc(10px * var(--dens))}
.pg{padding-top:calc(8px * var(--dens));padding-bottom:calc(8px * var(--dens))}
.mod{padding-top:calc(9px * var(--dens));padding-bottom:calc(9px * var(--dens))}
.btn{padding-top:calc(7px * var(--dens));padding-bottom:calc(7px * var(--dens))}
.tbl th,.tbl td{padding-top:calc(7px * var(--dens));padding-bottom:calc(7px * var(--dens))}
.card{padding-top:calc(14px * var(--dens));padding-bottom:calc(14px * var(--dens))}
.kv dt,.kv dd{padding-top:calc(6px * var(--dens));padding-bottom:calc(6px * var(--dens))}
.filters{padding-top:calc(9px * var(--dens));padding-bottom:calc(9px * var(--dens))}
.form-f label{margin-bottom:calc(5px * var(--dens))}

/* 紧凑模式：把一些可以省的上下留白收掉 */
:root[data-density="compact"] .sec-t{margin-top:calc(12px * var(--dens))}
:root[data-density="loose"] .sec-t{margin-top:calc(20px * var(--dens))}

/* ---------------- 深色 / 浅色 显式选择 ---------------- */

/* 自动：跟随系统（只在没显式指定、或显式 auto 时生效） */
@media (prefers-color-scheme:dark){
  :root[data-scheme="auto"],:root:not([data-scheme]){
    --bg:#14161a; --surface:#1b1e23; --surface2:#20242a; --surface3:#272c33;
    --line:#2c3138; --line2:#3a414a;
    --ink:#e8ebef; --ink2:#adb5bf; --ink3:#7e8792;
    --warn:#e0a94a; --warn-w:#332a18; --danger:#e0766a; --danger-w:#33211f;
    --ok:#5fbf8f;
    --sh:0 1px 2px rgba(0,0,0,.3);
    --sh-pop:0 8px 28px rgba(0,0,0,.5);
  }
}
/* 强制深色：不看系统 */
:root[data-scheme="dark"]{
  color-scheme:dark;
  --bg:#14161a; --surface:#1b1e23; --surface2:#20242a; --surface3:#272c33;
  --line:#2c3138; --line2:#3a414a;
  --ink:#e8ebef; --ink2:#adb5bf; --ink3:#7e8792;
  --warn:#e0a94a; --warn-w:#332a18; --danger:#e0766a; --danger-w:#33211f;
  --ok:#5fbf8f;
  --sh:0 1px 2px rgba(0,0,0,.3);
  --sh-pop:0 8px 28px rgba(0,0,0,.5);
}
/* 强制浅色：**必须把浅色值重新声明一遍**。
   ⚠️ 这里踩过一个坑：一开始只写了 `color-scheme:light`，以为「选择器不匹配媒体查询就等于浅色」。
      但 00-tokens.css 里那条 `@media (prefers-color-scheme:dark){ :root{...} }` 是**无条件命中**
      `:root` 的 —— 系统是深色时它照样把深色值写进去，而选择器层面「不匹配」并不能撤销
      已经生效的声明。结果就是：切到「强制浅色」时 data-scheme 变了、变量却没变，界面还是黑的。
      唯一可靠的做法是在更高优先级上把浅色值再写一遍。 */
:root[data-scheme="light"]{
  color-scheme:light;
  --bg:#f4f5f7; --surface:#fff; --surface2:#fafbfc; --surface3:#eef0f3;
  --line:#e2e5ea; --line2:#cdd2da;
  --ink:#171a1f; --ink2:#4d5560; --ink3:#7b838f;
  --brand-w:#e6f0ec; --brand-t:#bfd8cf;
  --warn:#8a5a12; --warn-w:#fdf3e2; --danger:#a33629; --danger-w:#fbecea;
  --ok:#1f6b4a;
  --sh:0 1px 2px rgba(23,26,31,.05);
  --sh-pop:0 8px 28px rgba(23,26,31,.13);
}
:root[data-scheme="auto"]{color-scheme:light dark}

/* ---------------- 自定义中心自己的样式 ---------------- */
.cz-sec{margin-bottom:14px}
.cz-row{
  display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:10px 16px;
  align-items:center;padding:calc(9px * var(--dens)) 0;border-bottom:1px solid var(--line);
}
.cz-row:last-child{border-bottom:0}
.cz-row > .cz-l{font-size:calc(13px * var(--fs));font-weight:600;color:var(--ink)}
.cz-row > .cz-r{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.cz-hint{flex-basis:100%;font-size:calc(12px * var(--fs));color:var(--ink3);line-height:1.55}
.cz-row input[type="range"]{width:min(280px,100%)}
.cz-val{
  font-variant-numeric:tabular-nums;font-size:calc(12.5px * var(--fs));
  color:var(--ink2);min-width:52px;text-align:right;
}
.cz-swatches{display:flex;flex-wrap:wrap;gap:8px}
.cz-sw{
  width:30px;height:30px;border-radius:var(--r-sm);border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);cursor:pointer;position:relative;
}
.cz-sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--surface)}
.cz-sw-name{font-size:calc(12px * var(--fs));color:var(--ink3)}

/* 模块/页面 列表（显隐 + 改名 + 图标 + 排序） */
.cz-list{display:flex;flex-direction:column;gap:6px}
.cz-item{
  display:flex;gap:8px;align-items:center;padding:calc(7px * var(--dens)) 9px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface2);
}
.cz-item.off{opacity:.5}
.cz-item .cz-grip{color:var(--ink3);cursor:grab;user-select:none;font-size:14px;line-height:1}
.cz-item input[type="text"]{flex:1;min-width:90px}
.cz-item .cz-ico{width:86px;flex:0 0 auto}
.cz-sub{padding-left:22px;display:flex;flex-direction:column;gap:6px;margin-top:4px}
.cz-sub-t{font-size:calc(12px * var(--fs));color:var(--ink3);padding:4px 0 0 9px}
.cz-preview{
  border:1px dashed var(--line2);border-radius:var(--r);padding:10px;
  background:var(--surface2);font-size:calc(12.5px * var(--fs));color:var(--ink2);
}
.cz-badge{font-size:calc(11px * var(--fs));padding:2px 7px;border-radius:999px;background:var(--surface3);color:var(--ink3)}
.cz-warn{color:var(--danger);font-size:calc(12px * var(--fs))}