/* ============================================================================
   图标风格 · 5 档可切换（2026-10-03 老板需求）
   ----------------------------------------------------------------------------
   入口：「我的 → 我的工具 → 图标风格」；点开弹面板，5 档里挑一个，
        选择存在浏览器本地（localStorage: cm_ico_style），下次打开还是它。

   🔴 为什么不给 5 档各做一套图片素材：
      Fluent Emoji 官方只有 3D / Flat 两套；「毛绒 / 膨胀 / 水晶」全网都没有
      现成的整套中英图标包 ⇒ 只能**用渲染管线把同一套 3D 图加工出来**。
      5 档里只有「经典」不用图片 —— 回到最初的 emoji 字符（HTML 里 data-e
      一直留着原 emoji，本来就是给回退用的）。

   🔴 两个 SVG 滤镜在 index.html 里以内联 defs 提供：
      #cmIcoPlush   —— feTurbulence + feDisplacementMap：让边缘「长毛」
      #cmIcoInflate —— feMorphology(dilate) + feGaussianBlur：把图形吹胖、边角变圆
      两个都写了 color-interpolation-filters="sRGB"（不写会按 linearRGB 算、颜色发灰）。
      ⚠️ 这两个滤镜的计算量都不小，194 个图标同时挂上时手机上可能掉帧 ——
         真要卡就把 feTurbulence 那档（绒绒）换成不带 url() 的纯 CSS 版本。

   🔴 本文件必须排在 icons3d.css **之后**加载：同特异性下后加载必胜。
   🔴 新增类名一律带 `isw-` 前缀（icon style widget），防跨功能吃样式。
   🔴 面板挂在 document.body 上，**不写进默认 display:none 的子页**（父级不渲染时
      getComputedStyle 会骗过断言，详见项目铁律）。
   ========================================================================== */

/* ============================ 面板：遮罩 + 卡片 ============================ */
.isw-mask {
  display: none;
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(38, 25, 14, .45);
  -webkit-tap-highlight-color: transparent;
}
.isw-mask.open { display: flex; align-items: center; justify-content: center; padding: 18px; }

.isw-sheet {
  width: min(430px, 94vw);
  max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  background: #fff; border-radius: 22px;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 18px 50px rgba(80, 50, 20, .28);
}

.isw-head { display: flex; align-items: center; justify-content: space-between; }
.isw-title { font-size: 17px; font-weight: 800; color: #2B2118; }
.isw-close {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: #9A8C7E; background: #F6F1EA; cursor: pointer;
}
.isw-close:active { background: #EDE4D9; }
.isw-sub { font-size: 12.5px; color: #9A8C7E; margin: 4px 0 14px; }

.isw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.isw-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 8px 12px;
  border: 2px solid #F0E7DC; border-radius: 16px; background: #FFFCF8;
  cursor: pointer; font-family: inherit; text-align: center;
  transition: border-color .16s, background .16s, transform .12s;
}
.isw-item:active { transform: scale(.97); }
.isw-item.on { border-color: #F95901; background: #FFF6F0; }

.isw-item .isw-pv {
  position: relative; width: 52px; height: 52px;
  border-radius: 15px;          /* 「色块」档的预览要显示成圆角方块，其余档无底色、看不出来 */
  display: flex; align-items: center; justify-content: center;
}
.isw-item .isw-pv > img { width: 100%; height: 100%; display: block; object-fit: contain; }

.isw-nm { margin-top: 6px; font-size: 14.5px; font-weight: 700; color: #2B2118; }
.isw-sb { font-size: 11.5px; color: #A99A8B; }

.isw-tick {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; font-weight: 700; color: #fff; background: #F95901;
}
.isw-item.on .isw-tick { display: flex; }

/* ===================== ① 经典：以立体图标为基准的朴素平面版 =====================
   🔴 2026-10-03（第二轮，老板令）：经典/色块两档**以立体图标为基准**——
      不再显示 emoji，直接用 <img> 本体（src 本来就是 icons/3d-trim/*.png），
      图案与立体档 100% 同源。data-e 仍同步在容器上（syncEmoji 不动），只是不再渲染。
   经典质感 = **颜色照旧**（绝不降饱和、绝不灰度），靠**浅色圆角底盘**与「立体」区分：
   立体档图标是「裸」立在卡片上的（icons3d.css 把底盘清零过），经典档把底盘还回来 ——
   这是早期图标的经典特征，图标缩到 76% 让四周露出暖米色底盘。 */
html[data-ico="classic"] .func-ico.i3d,
html[data-ico="classic"] .af-ico.i3d,
html[data-ico="classic"] .tab-ico.i3d,
.isw-item .isw-pv[data-pv="classic"] {
  background: #F5EFE7;                       /* 暖米白底盘：白卡片上看得出，又不脏 */
  box-shadow: 0 2px 6px rgba(90, 60, 30, .10);
}
html[data-ico="classic"] .func-ico.i3d > img,
html[data-ico="classic"] .af-ico.i3d > img,
html[data-ico="classic"] .tab-ico.i3d > img,
.isw-item .isw-pv[data-pv="classic"] > img {
  width: 76%; height: 76%;
  filter: saturate(1.08) brightness(1.01) contrast(.99);
}

/* ===================== ② 立体：现在这版（Fluent 3D） =====================
   与 icons3d.css 的基础规则同参数，写在这里是**为了预览格能单独指定**。 */
html[data-ico="solid"] .func-ico.i3d > img,
html[data-ico="solid"] .af-ico.i3d > img,
html[data-ico="solid"] .tab-ico.i3d > img,
.isw-item .isw-pv[data-pv="solid"] > img {
  filter: saturate(1.18) brightness(.97) contrast(.97) drop-shadow(0 1px 1px rgba(70, 45, 20, .10));
}

/* ===================== ③ 绒绒：毛绒（整块绒布的柔钝感） =====================
   参考老板给的毛绒桌面图。三件事一起做才像：
     ① SVG 滤镜把边缘「啃」出毛茬（feDisplacementMap，scale 5.2 ≈ 边缘抖动 ±2.6px）
     ② 颜色被绒布吃掉一截：饱和 .78 / 提亮 1.1 / 对比 .88
     ③ 四周垫一层白色柔光当绒毛反光，再给一层很软的外阴影
   ⚠️ 这里**必须**比前几档「脏」一点，太干净就不像绒毛了。 */
/* 🔴 2026-10-03：毛绒的 filter（url(#cmIcoPlush) 啃毛 + 绒布吃色 + 柔光）已迁到
   index.html 的内联 <style id="cmIcoSvgFix">。
   原因有二：① 外部 CSS 里的 url(#id) 相对**本 CSS 文件**解析，永远找不到
   index.html 里的 <filter> ⇒ filter 整条失效（computed=none），从未渲染过；
   ② icon-style.js 曾给真图档 inline filter:none，连纯 CSS 滤镜也一并压死（已改）。
   改毛绒参数（feTurbulence/feDisplacementMap/吃色）→ 只改 index.html 内联块。 */

/* ===================== ④ 果冻：膨胀（充气软糖） =====================
   参考老板给的「大厂 LOGO 膨胀」图：形状被吹胖、边角变圆、颜色更饱和更亮，
   左上角补一块高光、外圈补暖色溢出光 ⇒ 有「鼓起来」的体积感。
   ⚠️ 高光层要挂 ::after，所以容器得是 position:relative（见下面那条）。 */
/* 🔴 2026-10-03：果冻的 filter（url(#cmIcoInflate) 膨胀 + 溢光）已迁到 index.html
   内联 <style id="cmIcoSvgFix">（外部 CSS 的 url(#id) 相对本文件解析、永远失效）。
   这里只保留不需要 SVG 滤镜的部分。 */
html[data-ico="jelly"] .func-ico.i3d > img,
html[data-ico="jelly"] .af-ico.i3d > img,
html[data-ico="jelly"] .tab-ico.i3d > img,
.isw-item .isw-pv[data-pv="jelly"] > img {
  transform: scale(1.06);
}

/* ===================== ⑤ 琉璃：水晶（通透冷调） =====================
   参考老板给的水晶桌面图（透明玻璃 + 高光折射）：冷色偏移 + 大幅提亮 +
   略降饱和 + 半透明 + 蓝调投影，再叠一道斜向高光条。 */
html[data-ico="crystal"] .func-ico.i3d > img,
html[data-ico="crystal"] .af-ico.i3d > img,
html[data-ico="crystal"] .tab-ico.i3d > img,
.isw-item .isw-pv[data-pv="crystal"] > img {
  filter: saturate(.55) brightness(1.25) contrast(1) hue-rotate(-16deg)
          drop-shadow(0 0 2px rgba(255, 255, 255, .95))
          drop-shadow(0 1px 4px rgba(120, 180, 245, .65));
  opacity: .8;
}

/* ============ 果冻 / 琉璃 的高光层（两条风格共用一套写法） ============
   ⚠️ 必须 position:absolute —— 容器的 display 是 flex，静态伪元素会挤占布局。
   🔴 inset 用百分比对图标本体（约占容器 88%）做大致对齐，不做像素级精确。 */
html[data-ico="jelly"]  .func-ico.i3d,
html[data-ico="jelly"]  .af-ico.i3d,
html[data-ico="jelly"]  .tab-ico.i3d,
html[data-ico="crystal"] .func-ico.i3d,
html[data-ico="crystal"] .af-ico.i3d,
html[data-ico="crystal"] .tab-ico.i3d { position: relative; }

html[data-ico="jelly"] .func-ico.i3d::after,
html[data-ico="jelly"] .af-ico.i3d::after,
html[data-ico="jelly"] .tab-ico.i3d::after,
.isw-item .isw-pv[data-pv="jelly"]::after {
  content: ''; position: absolute; pointer-events: none;
  left: 16%; top: 10%; width: 44%; height: 32%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}

html[data-ico="crystal"] .func-ico.i3d::after,
html[data-ico="crystal"] .af-ico.i3d::after,
html[data-ico="crystal"] .tab-ico.i3d::after,
.isw-item .isw-pv[data-pv="crystal"]::after {
  content: ''; position: absolute; pointer-events: none;
  inset: 6% 10% 44% 14%;
  border-radius: 60% 40% 55% 45%;
  background: linear-gradient(140deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .25) 38%, rgba(255, 255, 255, 0) 72%);
}

/* ===================== ⑥ 色块：以立体图标为基准的渐变色块版 =====================
   老板 2026-10-03：「这个最早的图标版本…把这版的风格加到图标风格功能里说」
   —— 保留**最早那一版**的彩色渐变圆角方块底；2026-10-03 第二轮起方块里的图案
      不再用 emoji，改为立体图本体（以立体图标为基准，见下方规则）。

   🔴 配色不是新配的，是**从当年那版抽回来的**：
      `_backups/<各次备份>/index.html` 里每个功能都带 `.f-xxx` 类，按 `data-action`
      抽成 ACTION_COLOR（105 条，见 icon-style.js），所以**同一个功能还是当年那个色**。
      色值也照抄当年的定义（连 `f-ledger` / `f-qrgen` 这些功能专用色都一并捞回来了）。

   🔴 底色由 JS 以 **inline style** 下发：
      配色是"每个功能一个色"、还要随档位开关，选择器表达不了。
      切到别的档时 JS 会把 inline background 清空。
   ============================================================================ */
/* ===================== ⑥ 色块：以立体图标为基准的渐变色块版 =====================
   🔴 2026-10-03（第二轮，老板令）：同经典档——不再显示 emoji，改用立体图本体，
      缩到 84% 让四周露出**每功能一色的渐变底**（inline 由 JS applyBlock 下发），
      即「最早那版：彩色圆角方块 + 图案」的回归，图案以立体档为基准。
   图标在色块上去掉 drop-shadow（渐变底上再投影子会显脏），略提饱和保持鲜亮。 */
html[data-ico="block"] .func-ico.i3d > img,
html[data-ico="block"] .af-ico.i3d > img,
html[data-ico="block"] .tab-ico.i3d > img,
.isw-item .isw-pv[data-pv="block"] > img {
  width: 84%; height: 84%;
  filter: saturate(1.12);
}

/* 色块档要把图标容器**原本的投影**还回来（icons3d.css 当年为 3D 图清零过）；
   渐变底由 JS 下发，这里只管投影，免得跟 inline 打架。 */
html[data-ico="block"] .func-ico.i3d,
html[data-ico="block"] .af-ico.i3d,
html[data-ico="block"] .tab-ico.i3d {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

/* ===================== 预览格的「真图档」 =====================
   🔴 绒绒 / 果冻 / 琉璃三档已换成真图：面板预览由 JS 换成该档成品图并加 `.isw-real`，
      所以上面那几条「拿同一张 3D 图套滤镜去模拟」的规则必须**让位** ——
      否则真图上面又叠一层滤镜，面板显示的就不是全站实际效果了。
   特异性：(0,4,1) / (0,4,0) ＞ 上面各档的 (0,3,1)，稳赢，不需要 !important。 */
.isw-item .isw-pv.isw-real[data-pv] > img {
  filter: none; opacity: 1; transform: none;
}
.isw-item .isw-pv.isw-real[data-pv]::after { display: none; }