/* ============================================================
   图标工坊 — 融合视图样式（#view-icons）

   与导航站共用 main.css 的设计 token（--surface / --border / --text /
   --r-card / --r-btn / --shadow-1 / --icon-bg 等），亮暗两套主题自动跟随
   [data-theme]，无需重复定义；仅预览棋盘底板等少数本视图专属色值定义在
   视图根上，亮暗都给全。

   设计约定（同站点）：
     - 卡片 12px 圆角 / 按钮、输入框 6px 圆角
     - 栅格对齐、充足留白、语义色变量，不写死色值
     - 禁：高饱和渐变、glow、厚重毛玻璃

   命名隔离：全部选择器带 #view-icons 前缀（tools.css 的 .btn/.btn-p 等
   按视图 id 分写，本视图须自带全套，否则按钮无样式且不报错）。
   ============================================================ */

/* 视图根：宽度占满容器并允许收缩（与 #view-spec 同款防抖——
   .view 默认 flex:0 1 auto 会随内容宽度抖动，不可写 flex:1） */
#view-icons { width: 100%; min-width: 0; color: var(--text); }

/* 本视图专属变量：预览底板（棋盘格衬底，凸显透明图标） */
#view-icons {
  --ic-preview-bg:
    linear-gradient(45deg, var(--icon-bg) 25%, transparent 25%, transparent 75%, var(--icon-bg) 75%),
    linear-gradient(45deg, var(--icon-bg) 25%, var(--surface) 25%, var(--surface) 75%, var(--icon-bg) 75%);
  --ic-preview-pos: 0 0, 9px 9px;
  --ic-preview-size: 18px 18px;
  --ic-grid-min: 100px;
  /* 卡片选中描边：亮色用主题色的鲜亮一档（比 --accent-text 深色文字更醒目），暗色用提亮版 */
  --ic-sel: #a6663d;
}
html[data-theme="dark"] #view-icons { --ic-sel: #d0a080; }

/* ---------- 容器 ---------- */
#view-icons .ic-body { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 24px 48px; }

/* 2026-10-23：视图内的页头（.ic-head）整条删除。
   原先 L3 项目内靠标题行面包屑「内置图标 / 项目库 / 项目名」回退，与全局顶栏的
   「← 返回 / 图标工坊」构成两层回退入口，语义打架。现改为：
     顶栏 = 工具层报站；来源 tab 常驻 = L1/L2/L3 的上行路径（项目内让「项目库」高亮）；
     项目名落到工具栏最左（.ic-proj-bar），与来源过滤同一位置互斥，不再多占一行。 */

/* ---------- 来源 tabs ---------- */
#view-icons .ic-tabs-row { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; }
#view-icons .ic-tabs-ops { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#view-icons .ic-tabs-row .ic-new-proj,
#view-icons .ic-tabs-row .ic-ip-lib { flex: none; }
#view-icons .ic-tabs { display: flex; gap: 4px; padding: 3px; background: var(--icon-bg); border-radius: 10px; width: max-content; max-width: 100%; }
#view-icons .ic-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: var(--hx-t13); line-height: 1; color: var(--text-2);
  border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  padding: 8px 14px; transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
#view-icons .ic-tab em { font-style: normal; font-size: var(--hx-t11); color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; }
#view-icons .ic-tab:hover { color: var(--text); }
#view-icons .ic-tab.is-on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-1); }
#view-icons .ic-tab.is-on em { color: var(--text-2); }

/* ---------- 项目条（项目内：工具栏最左的项目名 + 只读标 + 重命名） ---------- */
/* 与 .ic-src-drop 争同一个左侧槽位：L1/L2 显示来源过滤，L3 显示项目名，二者互斥。
   不设 flex:1，让右侧搜索框继续吸收剩余宽度；项目名超长自己省略。 */
#view-icons .ic-proj-bar { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; height: var(--ctl-h); }
#view-icons .ic-proj-bar[hidden] { display: none !important; }
#view-icons .ic-proj-name {
  font-size: var(--hx-t13); font-weight: 600; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 项目归属标签（他人项目标「只读」） */
#view-icons .ic-proj-tag {
  font-size: var(--hx-t11-5); color: var(--text-3); background: var(--icon-bg);
  border-radius: 999px; padding: 2px 8px; flex: none; white-space: nowrap;
}
/* 重命名：项目名后的铅笔图标键（16px 线性，与站点其它线性图标同风格） */
#view-icons .ic-proj-edit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; padding: 0;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--text-3);
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
#view-icons .ic-proj-edit:hover { background: var(--icon-bg); color: var(--text); }
#view-icons .ic-proj-edit svg { width: var(--hx-t14); height: var(--hx-t14); display: block; }
/* 项目内重命名输入框（替换 .ic-proj-name） */
#view-icons .ic-proj-rename {
  font: inherit; font-size: var(--hx-t13); font-weight: 600; color: var(--text);
  height: 26px; padding: 0 8px; min-width: 80px; max-width: 220px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-btn); outline: 0;
}
#view-icons .ic-proj-ops { display: flex; align-items: center; gap: 6px; flex: none; }

/* 问号悬停提示：替代长段备注（用户 2026-10-21：长说明改图标+悬停，需要时再看）
   全站提示图标规格统一（与 #view-anim .phint-i 对齐）：
   - 图形统一「ⓘ 信息圆标」，不用问号（问号像"提问/帮助"，ⓘ 才是"说明"）
   - 容器 16×16 圆形、svg 13×13、色 --text-3，hover 变 --text-2 + 浅底
   - 气泡：字号 12 / max-width 260 / shadow-2（浮层感），带小箭头指回触发点 */
#view-icons .ic-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; color: var(--text-3); cursor: help; border-radius: 50%; transition: color 0.12s var(--ease), background 0.12s var(--ease); }
#view-icons .ic-tip svg { width: var(--hx-t13); height: var(--hx-t13); display: block; }
#view-icons .ic-tip:hover, #view-icons .ic-tip:focus-visible { color: var(--text-2); background: var(--icon-bg); outline: none; }
#view-icons .ic-tip:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text-3); }
/* 气泡必须 fixed：外层 .ic-detail 是 overflow-y:auto，absolute 气泡会被面板裁掉
   （用户 2026-10-21 截图：左侧被切）。定位/收合由 icons-tool.js 的 tipShow 算，
   与 .ic-color-pop 同套路；is-on 由 JS 加。 */
#view-icons .ic-tip-b {
  position: fixed; z-index: 1200;
  width: max-content; max-width: 260px;
  padding: 8px 10px; border-radius: var(--r-btn);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2);
  font-size: var(--hx-t12); font-weight: 400; line-height: 1.6; color: var(--text-2); text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.12s var(--ease), visibility 0.12s;
}
#view-icons .ic-tip-b.is-on { opacity: 1; visibility: visible; }
/* 箭头指回触发点：--tip-arrow 由 JS 按触发点中心写入；is-above 时翻到下沿 */
#view-icons .ic-tip-b::before {
  content: ""; position: absolute; left: var(--tip-arrow, 50%); top: -5px;
  width: 8px; height: 8px; margin-left: -4px;
  background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
#view-icons .ic-tip-b.is-above::before { top: auto; bottom: -5px; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ---------- 三列布局（侧栏收窄，弱化） ---------- */
#view-icons .ic-layout { display: grid; grid-template-columns: 104px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }

/* ---------- 侧栏（分类导航，弱化：无边框无底色） ---------- */
#view-icons .ic-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
#view-icons .ic-side-block { background: transparent; border: 0; box-shadow: none; padding: 0; }
#view-icons .ic-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#view-icons .ic-side-t { font-size: var(--hx-t13); font-weight: 700; }
#view-icons .ic-side-hint { margin: 10px 0 0; font-size: var(--hx-t12); color: var(--text-3); line-height: 1.6; display: flex; align-items: center; gap: 5px; }

#view-icons .ic-proj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#view-icons .ic-proj-list li { margin: 0; }
#view-icons .ic-proj-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: var(--hx-t13); color: var(--text-2); text-align: left;
  border: 1px solid transparent; border-radius: var(--r-btn); background: transparent;
  padding: 7px 9px; cursor: pointer; transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
#view-icons .ic-proj-item:hover { background: var(--icon-bg); color: var(--text); }
#view-icons .ic-proj-item.is-on { background: var(--accent-soft-bg); border-color: var(--accent-soft-border); color: var(--accent-text); font-weight: 600; }
#view-icons .ic-proj-item .ic-proj-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-icons .ic-proj-item .ic-proj-c { font-size: var(--hx-t11); color: var(--text-3); flex: none; }
#view-icons .ic-proj-item.is-on .ic-proj-c { color: var(--accent-text); opacity: 0.75; }
#view-icons .ic-proj-empty { font-size: var(--hx-t12); color: var(--text-3); padding: 10px 2px; line-height: 1.6; }

/* 项目行：主按钮 + 行内删除（二次点击确认） */
#view-icons .ic-proj-row { display: flex; align-items: stretch; gap: 2px; }
#view-icons .ic-proj-row .ic-proj-item { flex: 1; min-width: 0; }
#view-icons .ic-proj-del {
  flex: none; width: 26px; border: 1px solid transparent; border-radius: var(--r-btn);
  background: transparent; color: var(--text-3); cursor: pointer; font-size: var(--hx-t14); line-height: 1;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
#view-icons .ic-proj-del:hover { background: var(--danger-soft-bg); color: var(--danger-text); }

/* 侧栏操作行（导出 ZIP / 发布画廊） */
#view-icons .ic-side-ops { display: flex; gap: 6px; margin-top: 10px; }
#view-icons .ic-side-ops .btn { flex: 1; padding: 0 8px; }

/* 定制面板顶部：导入块（与下方定制区用分隔线隔开） */
#view-icons .ic-import { margin: 0 0 18px; }
#view-icons .ic-import .ic-upload-btn { width: 100%; }
#view-icons .ic-import .ic-side-hint { margin: 8px 0 0; }

/* ---------- IconPark 项目导入弹窗 ---------- */
/* ⚠️ [hidden] 必须显式压掉 display：否则 grid/flex 容器会把 UA 的 display:none 覆盖掉，
   「未选中不显示」就失效了（批量条、选中操作区都踩过这个坑）。 */
#view-icons [hidden] { display: none !important; }
/* ============================================================
   删除项目确认弹窗（2026-10-24）
   替代旧的「文字按钮二段点击 / 卡片内 ✓✕」：统一走模态确认，
   mask 与 box 分别淡入 / 缩放上位，退场同速反向（.is-open 控制）。
   ============================================================ */
/* 弹窗（遮罩 + 面板）统一走 helix.css 的弹层令牌：
   遮罩原先自成一套 rgba(15,18,25,.42) 且没有 blur，比首页弹窗浅一档、也没有毛玻璃，
   两个视图来回切能明显看出"不是一个站的弹窗"。令牌带旧皮肤 fallback，
   去掉 html 的 data-skin="helix" 时会回到原来的字面量，不影响回退对照。 */
#view-icons .ic-modal {
  position: fixed; inset: 0; z-index: var(--hx-z-tool, 400);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#view-icons .ic-modal[hidden] { display: none; }
#view-icons .ic-modal-mask {
  position: absolute; inset: 0;
  background: var(--hx-mask, rgba(15, 18, 25, 0.42));
  -webkit-backdrop-filter: blur(var(--hx-mask-blur, 3px));
          backdrop-filter: blur(var(--hx-mask-blur, 3px));
  opacity: 0; transition: opacity 0.18s var(--ease);
}
#view-icons .ic-modal.is-open .ic-modal-mask { opacity: 1; }
#view-icons .ic-modal-box {
  position: relative; width: 100%; max-width: 380px; text-align: center;
  background: var(--hx-dlg-bg, var(--surface));
  border: 1px solid var(--hx-dlg-line, var(--border));
  border-radius: var(--hx-dlg-radius, var(--r-card));
  box-shadow: var(--hx-dlg-shadow, var(--shadow-2));
  padding: 26px 24px 20px;
  opacity: 0; transform: scale(0.94) translateY(10px);
  /* 退场：is-open 摘掉即回到这条，0.12s 快出不拖沓 */
  transition: opacity 0.12s var(--ease), transform 0.12s var(--ease);
}
/* 入场：弹簧过冲落位（和首页大弹窗同一套语言）；JS 关闭时有 180ms 宽限，够播完 */
#view-icons .ic-modal.is-open .ic-modal-box {
  opacity: 1; transform: none;
  transition: opacity 0.2s var(--ease), transform 0.34s var(--hx-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
#view-icons .ic-modal-ico {
  width: 44px; height: 44px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--danger-soft-bg); color: var(--danger-text);
}
#view-icons .ic-modal-ico svg { width: 22px; height: 22px; display: block; }
#view-icons .ic-modal-t { margin: 0 0 8px; font-size: var(--hx-t15); font-weight: 700; color: var(--text); }
#view-icons .ic-modal-d { margin: 0 0 20px; font-size: var(--hx-t12-5); line-height: 1.6; color: var(--text-3); }
#view-icons .ic-modal-d b { color: var(--text); font-weight: 700; }
#view-icons .ic-modal-acts { display: flex; gap: 10px; }
#view-icons .ic-modal-acts .btn { flex: 1; justify-content: center; }
/* 卡片坍塌动画：确认删除后先播 260ms 再落库，列表刷新时视觉连贯 */
@keyframes ic-pcard-del {
  0%   { opacity: 1; transform: scale(1); filter: blur(0); }
  45%  { opacity: 0.5; transform: scale(0.97); }
  100% { opacity: 0; transform: scale(0.9) translateY(-6px); filter: blur(2px); }
}
#view-icons .ic-pcard.is-deleting {
  animation: ic-pcard-del 0.26s var(--ease) forwards;
  pointer-events: none;
}
/* ============================================================
   加入项目：目标选择弹窗（2026-10-24）
   复用 .ic-modal 开合动画；列表是 radio 语义的单择行，
   底部「新建项目」是虚线引导行（不是可选项目本身）。
   ============================================================ */
#view-icons .ic-pick-box { max-width: 420px; text-align: left; padding: 22px 22px 18px; }
#view-icons .ic-pick-box .ic-modal-t { text-align: left; }
#view-icons .ic-pick-box .ic-modal-d { margin-bottom: 14px; }
#view-icons .ic-pick-list {
  max-height: 264px; overflow-y: auto; margin: 0 0 10px;
  display: flex; flex-direction: column; gap: 6px;
}
#view-icons .ic-pick-empty { margin: 4px 0 8px; font-size: var(--hx-t12); color: var(--text-3); line-height: 1.6; }
#view-icons .ic-pick-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); color: var(--text); cursor: pointer; text-align: left;
  font-size: var(--hx-t13); transition: border-color 0.12s var(--ease), background 0.12s var(--ease);
}
#view-icons .ic-pick-row:hover { border-color: var(--accent-soft-border); }
#view-icons .ic-pick-row.is-on { border-color: var(--accent); background: var(--accent-soft-bg); }
#view-icons .ic-pick-dot {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--border-strong, var(--border));
  display: inline-flex; align-items: center; justify-content: center;
}
#view-icons .ic-pick-row.is-on .ic-pick-dot { border-color: var(--accent); }
#view-icons .ic-pick-row.is-on .ic-pick-dot::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
#view-icons .ic-pick-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#view-icons .ic-pick-ct { flex: none; font-size: var(--hx-t11); color: var(--text-3); font-variant-numeric: tabular-nums; }
#view-icons .ic-pick-new {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 9px 12px; margin-bottom: 14px;
  border: 1px dashed var(--border); border-radius: var(--r-card);
  background: transparent; color: var(--text-3); font-size: var(--hx-t12-5); cursor: pointer;
  transition: color 0.12s var(--ease), border-color 0.12s var(--ease);
}
#view-icons .ic-pick-new:hover { color: var(--accent-text); border-color: var(--accent-soft-border); }
#view-icons .ic-pick-new svg { width: var(--hx-t14); height: var(--hx-t14); }
#view-icons .ic-pick-new[disabled] { opacity: 0.5; pointer-events: none; }
#view-icons .ic-ip-modal { position: fixed; inset: 0; z-index: var(--hx-z-tool, 260); display: flex; align-items: center; justify-content: center; padding: 20px; }
#view-icons .ic-ip-mask {
  position: absolute; inset: 0;
  background: var(--hx-mask, rgba(15, 18, 25, 0.42));
  -webkit-backdrop-filter: blur(var(--hx-mask-blur, 3px));
          backdrop-filter: blur(var(--hx-mask-blur, 3px));
}
#view-icons .ic-ip-dlg {
  position: relative; width: 100%; max-width: 400px;
  background: var(--hx-dlg-bg, var(--surface));
  border: 1px solid var(--hx-dlg-line, var(--border));
  border-radius: var(--hx-dlg-radius, var(--r-card));
  box-shadow: var(--hx-dlg-shadow, var(--shadow-2));
  display: flex; flex-direction: column; overflow: hidden;
}
#view-icons .ic-ip-dlg-h { display: flex; align-items: center; gap: 6px; padding: 14px 12px 12px 16px; }
/* 标题不撑开：撑开会把问号和关闭键一起推到最右，两个小图标挤成一堆像"双关闭"。
   改成标题自然宽 + 弹性空隙，提示图标紧跟标题文字，关闭键始终在最右。 */
#view-icons .ic-ip-dlg-h h2 { min-width: 0; font-size: var(--hx-t14); font-weight: 700; color: var(--text); }
#view-icons .ic-ip-dlg-h .ic-ip-hd-gap { flex: 1 1 auto; min-width: 8px; }
/* 关闭键：必须显式清 padding。#view-icons button 全局给了 padding:0 12px，
   28px 宽减去 24px 内边距只剩 4px 内容区，svg 被压成一条竖线（"小方块"）。 */
#view-icons .ic-ip-x { flex: none; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-btn); background: transparent; color: var(--text-3); cursor: pointer; transition: color 0.12s var(--ease), background 0.12s var(--ease); }
#view-icons .ic-ip-x:hover { background: var(--icon-bg); color: var(--text); }
#view-icons .ic-ip-x:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text-3); }
#view-icons .ic-ip-x svg { width: var(--hx-t16); height: var(--hx-t16); display: block; }
#view-icons .ic-ip-dlg-b { padding: 0 16px 4px; display: flex; flex-direction: column; gap: 13px; }
#view-icons .ic-ip-fld { display: flex; flex-direction: column; gap: 6px; }
#view-icons .ic-ip-fld-t { font-size: var(--hx-t11-5); font-weight: 600; color: var(--text-3); }
/* ⚠️ 两个输入框必须共用同一条规则：以前只写了 .ic-ip-url，
   .ic-ip-name 落回浏览器默认样式（2px 黑边 + 聚焦黑框），跟旁边的链接框完全不像一套。 */
#view-icons .ic-ip-name,
#view-icons .ic-ip-url {
  width: 100%; height: 32px; font: inherit; font-size: var(--hx-t12-5); color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-btn);
  padding: 0 10px; outline: 0;
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
#view-icons .ic-ip-name:focus,
#view-icons .ic-ip-url:focus { border-color: var(--text-3); box-shadow: 0 0 0 3px var(--overlay-dim); }
#view-icons .ic-ip-name::placeholder,
#view-icons .ic-ip-url::placeholder { color: var(--text-3); }
/* 颜色三档：单选行（用户 2026-10-21 三轮定稿）。
   真正的诉求不是"不能做成控件"，而是「**次要选项不该抢夺视线，但要有色彩识别**」：
   - 选中 = 主题色文字（--accent-text，5:1+ 对软底）+ 极淡主题色底（--accent-soft-bg，8%），
     有块状锚点能一眼看出选了哪档，又因为底色近乎透明而不会盖过上面两个输入框。
   - 未选中 = --text-3 纯灰，无底色。
   - hover = 仅文字变深（--text-2），不填底 —— hover 底色会和选中底色抢。
   - 选项之间靠容器 gap 留白分隔，不加 · 也不加竖线（用户 2026-10-21：点去掉）。 */
#view-icons .ic-ip-seg { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; max-width: 100%; }
/* padding 0 6px 是浅色底的留白量（选中态底色要包住文字，不贴边）。 */
#view-icons .ic-ip-seg .ic-seg-b {
  flex: none; height: 24px; padding: 0 6px; margin: 0;
  font-size: var(--hx-t12-5); line-height: 1; white-space: nowrap;
  border: 0; border-radius: var(--r-btn); background: transparent;
  color: var(--text-3);
  transition: color 0.12s var(--ease), background 0.12s var(--ease);
}
#view-icons .ic-ip-seg .ic-seg-b:hover { color: var(--text-2); background: transparent; }
#view-icons .ic-ip-seg .ic-seg-b:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text-3); }
/* ⚠️ 必须显式写 background（transparent / accent-soft-bg）。通用规则 .ic-seg-b.is-on 有
   `background: var(--text)`（第 419 行），本选择器虽然特异性更高但没声明 background 时
   仍会取那条的值 → 选中项变黑底黑字。hover 变体同样要覆盖，否则点击态会闪回黑底。 */
#view-icons .ic-ip-seg .ic-seg-b.is-on {
  color: var(--accent-text); font-weight: 600; background: var(--accent-soft-bg);
}
#view-icons .ic-ip-seg .ic-seg-b.is-on:hover { background: var(--accent-soft-bg); }
#view-icons .ic-ip-check { display: flex; align-items: center; gap: 7px; font-size: var(--hx-t12); color: var(--text-2); cursor: pointer; user-select: none; }
#view-icons .ic-ip-check input { width: 14px; height: 14px; accent-color: var(--text); cursor: pointer; margin: 0; }
#view-icons .ic-ip-dlg-f { display: flex; gap: 8px; padding: 14px 16px 16px; }
#view-icons .ic-ip-dlg-f > button { flex: 1 1 0; min-width: 0; height: 32px; font-size: var(--hx-t12-5); }
#view-icons .ic-ip-modal.is-busy .ic-ip-mask { cursor: default; }
#view-icons .ic-ip-modal.is-busy .ic-ip-x { opacity: .4; pointer-events: none; }

/* 行内重命名输入框：样式见上方「项目条」段（.ic-proj-rename） */

/* ---------- 主区：工具栏 / 搜索 ---------- */
#view-icons .ic-main { min-width: 0; }
/* 工具栏吸顶：长列表滚动时搜索框常驻，避免翻到下面还要滚回顶部改关键词。
   top:0 时头部已滚出视口，故贴视口顶端；背景必须不透明，否则卡片会从字缝里透出来。
   2026-10-22：删掉 0 1px 0 投影线——通长横线在这页是纯装饰（不透明背景已解决透出问题），
   用户反馈「线条过多割裂」，分层改由留白承担（margin-bottom 4 → 10）。 */
#view-icons .ic-toolbar {
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 20;
  margin: 0 0 10px;
  padding: 8px 0 10px;
  background: var(--bg);
}
#view-icons .ic-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: var(--ctl-h); padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn); color: var(--text-3); transition: border-color 0.12s var(--ease); }
#view-icons .ic-search:focus-within { border-color: var(--border-strong); }
#view-icons .ic-search svg { width: var(--hx-t15); height: var(--hx-t15); flex: none; }
#view-icons .ic-search input { flex: 1; min-width: 0; font: inherit; font-size: var(--hx-t13); color: var(--text); background: transparent; border: 0; outline: 0; }
#view-icons .ic-search input::placeholder { color: var(--text-3); }
#view-icons .ic-count { flex: none; font-size: var(--hx-t12); color: var(--text-3); }
/* 内置来源下拉：搜索框左侧，控制 内置 Lucide（含 Feather）/ IconPark 两源显隐。
   popover 用 fixed 定位（#ic-main 是滚动容器，absolute 会被裁；与色板弹层同套路）。 */
#view-icons .ic-src-drop { position: relative; flex: none; }
#view-icons .ic-src-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--ctl-h); padding: 0 10px;
  font: inherit; font-size: var(--hx-t13); color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-btn); cursor: pointer; white-space: nowrap;
  transition: border-color .12s var(--ease), color .12s var(--ease);
}
#view-icons .ic-src-btn:hover { border-color: var(--border-strong); color: var(--text); }
#view-icons .ic-src-btn[data-state="some"] { color: var(--text); border-color: var(--ic-sel); }
#view-icons .ic-src-btn svg { width: var(--hx-t14); height: var(--hx-t14); flex: none; transition: transform .15s var(--ease); }
#view-icons .ic-src-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
#view-icons .ic-src-pop {
  position: fixed; z-index: var(--hx-z-anchor, 60); min-width: 160px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
#view-icons .ic-src-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: var(--r-btn); cursor: pointer;
  font-size: var(--hx-t13); color: var(--text); user-select: none;
}
#view-icons .ic-src-opt:hover { background: var(--accent-soft-bg); }
#view-icons .ic-src-opt input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; cursor: pointer; flex: none; }

/* ---------- 图标网格 ---------- */
/* 窗口化外包层：spacer 补偿已回收内容的高度（JS 按实测像素写入），网格本体只渲染视口附近的卡片 */
#view-icons .ic-spacer { height: 0; }
#view-icons .ic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ic-grid-min), 1fr)); gap: 12px; }
/* ⚠️ `display: grid` 会压过 UA 的 [hidden]{display:none} —— 项目库层级要收起网格
   （否则上一级的图标卡片会留在项目卡片下面一起显示，见 syncChrome 里 grid.hidden） */
#view-icons .ic-grid[hidden] { display: none; }
/* ---------- 加载态（进入项目 / 拉取项目库） ---------- */
#view-icons .ic-loading {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: var(--hx-z-tool, 400);
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; background: var(--hx-dlg-bg, var(--surface));
  border: 1px solid var(--hx-dlg-line, var(--border)); border-radius: var(--r-card);
  color: var(--text-2); font-size: var(--hx-t13);
  box-shadow: var(--hx-dlg-shadow, var(--shadow-2));
}
#view-icons .ic-loading[hidden] { display: none; }
#view-icons .ic-spin {
  width: 16px; height: 16px; flex: none;
  border: 2px solid var(--border-strong, var(--border)); border-top-color: var(--accent);
  border-radius: 50%; animation: ic-spin 0.7s linear infinite;
}
@keyframes ic-spin { to { transform: rotate(360deg); } }
/* 「全部」视图的分类分组小标题：跨列。
   2026-10-22：删掉右侧 1px 延伸线（::after）——二十多个分类就是二十多条通长横线，
   把网格切得稀碎（用户：线条过多割裂）。分组改由「字号/字重 + 上下留白」区分：
   上方 22px 断组、下方 8px 衔接首行卡片。 */
#view-icons .ic-cat-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 22px 2px 8px; }
#view-icons .ic-cat-head:first-child { margin-top: 2px; }
#view-icons .ic-cat-head-t { font-size: var(--hx-t12); font-weight: 700; color: var(--text-2); letter-spacing: 0.2px; white-space: nowrap; }

/* ---------- 项目内分组（2026-10-23）----------
   分区标题比「分类小标题」多一条发丝线：分类是浏览用的索引，分组是用户自己的容器，
   有边界才像「一摞」。未分组用虚线，一眼看出它不是真组。
   操作钮（改名/删除）跟随卡片「⋯」同一规矩——悬停才显形，静止时不添噪音。 */
#view-icons .ic-grp-head {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  margin: 22px 2px 8px; padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
#view-icons .ic-grp-head:first-child { margin-top: 2px; }
#view-icons .ic-grp-head.is-none { border-bottom-style: dashed; }
#view-icons .ic-grp-t { font-size: var(--hx-t12-5); font-weight: 700; color: var(--text); letter-spacing: 0.2px; }
#view-icons .ic-grp-head.is-none .ic-grp-t { color: var(--text-2); font-weight: 600; }
#view-icons .ic-grp-n {
  font-size: var(--hx-t11); color: var(--text-3); font-variant-numeric: tabular-nums;
  padding: 0 5px; border-radius: 4px; background: var(--icon-bg); line-height: calc(16px * var(--hx-fsk, 1));
}
#view-icons .ic-grp-ops { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .12s var(--ease); }
#view-icons .ic-grp-head:hover .ic-grp-ops,
#view-icons .ic-grp-ops:focus-within { opacity: 1; }
@media (hover: none) { #view-icons .ic-grp-ops { opacity: 1; } }
#view-icons .ic-grp-b {
  width: 22px; height: 22px; display: grid; place-items: center; padding: 0;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--text-3); cursor: pointer;
  transition: background-color .12s var(--ease), color .12s var(--ease);
}
#view-icons .ic-grp-b svg { width: var(--hx-t13); height: var(--hx-t13); }
#view-icons .ic-grp-b:hover { background: var(--icon-bg); color: var(--text); }
#view-icons .ic-grp-b.is-danger:hover,
#view-icons .ic-grp-b.is-confirm { background: var(--danger-soft-bg); color: var(--danger-text); }
#view-icons .ic-grp-hint {
  grid-column: 1 / -1; margin: -2px 2px 12px;
  font-size: var(--hx-t12); color: var(--text-3); line-height: 1.6;
}
#view-icons .ic-grp-input {
  font: inherit; font-size: var(--hx-t12-5); font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--accent); border-radius: 6px;
  padding: 3px 8px; outline: none; min-width: 168px; max-width: 100%;
}
#view-icons .ic-grp-input::placeholder { color: var(--text-3); font-weight: 500; }
/* 新建分组时的临时标题行：输入框本身就是「组名」，不加额外框套 */
#view-icons .ic-grp-new .ic-grp-t { display: flex; }

/* 分组选择弹层（复用 .ic-card-pop 的定位与外观，只补内容排版） */
#view-icons .ic-grp-pop { min-width: 176px; max-height: 302px; overflow-y: auto; }
#view-icons .ic-grp-pop .ic-cpop-b { gap: 8px; }
#view-icons .ic-grp-pop-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-icons .ic-grp-pop-ck { color: var(--accent-text); font-size: var(--hx-t12); }
#view-icons .ic-cpop-b.is-accent { color: var(--accent-text); }
#view-icons .ic-grp-pop-in { padding: 5px; }
#view-icons .ic-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  min-height: 112px; padding: 14px 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  cursor: pointer; overflow: hidden;
  transition: border-color 0.12s var(--ease), background 0.12s var(--ease), transform 0.12s var(--ease);
}
#view-icons .ic-card:hover { border-color: var(--border-strong); background: var(--icon-bg); }
/* 选中态：琥珀描边（1px 边框 + 1px 外描边叠成 ~2px），不用对勾、不用黑色 */
#view-icons .ic-card.is-sel { border-color: var(--ic-sel); box-shadow: 0 0 0 1px var(--ic-sel); }
/* 卡片「⋯」快捷操作钮（2026-10-23）：**悬停才显示**（常驻会分散扫图标的视线）。
   触屏没有 hover 语义 → @media (hover: none) 保留常驻低透明度，否则平板上该功能彻底点不到。
   键盘 Tab 聚焦时同样显形（opacity 0 的元素仍可聚焦，故不能用 visibility）。 */
/* ⚠️ 右上角：来源角标（.ic-card-src）在左上，两者各占一角不叠死 */
/* 2026-10-23 用户：去掉边框线——不再画 1px 描边方框，悬停反馈改由底色承担（否则 hover 没手感） */
#view-icons .ic-card-more {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  background: var(--surface); border: 0; border-radius: 6px;
  color: var(--text-3); cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .12s var(--ease), color .12s var(--ease), background-color .12s var(--ease);
}
#view-icons .ic-card:hover .ic-card-more,
#view-icons .ic-card-more:focus-visible,
#view-icons .ic-card-more.is-on { opacity: 1; pointer-events: auto; }
/* 触屏兜底：没有 hover，只能常驻（半隐状态，不抢视线） */
@media (hover: none) {
  #view-icons .ic-card-more { opacity: .45; pointer-events: auto; }
}
#view-icons .ic-card-more:hover { color: var(--text); background: var(--icon-bg); }
#view-icons .ic-card-more svg { width: var(--hx-t13); height: var(--hx-t13); display: block; }
/* 单图标快捷弹层：fixed + JS 摆位（与取色弹层同一套规矩），右缘不出视口 */
#view-icons .ic-card-pop {
  position: fixed; z-index: var(--hx-z-anchor, 90); min-width: 152px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
#view-icons .ic-card-pop[hidden] { display: none !important; }
#view-icons .ic-cpop-b {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: var(--r-btn);
  background: transparent; font: inherit; font-size: var(--hx-t12-5); color: var(--text);
  text-align: left; cursor: pointer;
}
#view-icons .ic-cpop-b:hover { background: var(--icon-bg); }
#view-icons .ic-cpop-b.is-danger { color: var(--danger-text); }
#view-icons .ic-cpop-hr { border: 0; border-top: 1px solid var(--border); margin: 4px 6px; }
/* 图标居中于上部柔性区（卡片不再强制正方形，文字锚定底部，避免大片留白） */
#view-icons .ic-card .ic-card-ico { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; margin: 2px 0 5px; }
/* 卡片图标尺寸跟随「图标大小」滑杆：SVG 自带 width/height 属性（= state.size），
   这里不能再写死像素——旧的 width:36px;height:36px 覆盖了属性，导致滑杆改了网格纹丝不动
   （用户 2026-10-21：调了大小看着没反应）。max-width 兜住 96px 上限，别撑破卡片。 */
#view-icons .ic-card .ic-card-ico svg { width: auto; height: auto; max-width: 100%; max-height: 120px; display: block; }
/* 文字行：单行锚定底部（卡片宽度 76~90px，放不下中英两段，英文名走 title 悬停提示） */
#view-icons .ic-card .ic-card-txt { display: block; width: 100%; min-width: 0; text-align: center; }
#view-icons .ic-card .ic-card-cn,
#view-icons .ic-card .ic-card-n { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-icons .ic-card .ic-card-cn { font-size: var(--hx-t13); line-height: 1.35; color: var(--text-2); }
#view-icons .ic-card .ic-card-n { font-size: var(--hx-t12); line-height: 1.35; color: var(--text-3); }
#view-icons .ic-card:hover .ic-card-cn { color: var(--text); }
#view-icons .ic-card:hover .ic-card-n { color: var(--text-2); }
#view-icons .ic-card .ic-card-src { position: absolute; top: 6px; left: 6px; font-size: var(--hx-t9-5); color: var(--text-3); background: var(--icon-bg); border-radius: 4px; padding: 1px 5px; }

#view-icons .ic-sentinel { height: 1px; }

/* ---------- 空态 ---------- */
#view-icons .ic-empty { text-align: center; padding: 56px 20px; color: var(--text-2); }
#view-icons .ic-empty-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: var(--r-btn); background: var(--icon-bg); color: var(--text-3); display: grid; place-items: center; }
#view-icons .ic-empty-icon svg { width: 26px; height: 26px; }
#view-icons .ic-empty-t { margin: 0 0 6px; font-size: var(--hx-t14); font-weight: 700; color: var(--text); }
#view-icons .ic-empty-h { margin: 0 0 16px; font-size: var(--hx-t12-5); color: var(--text-3); }
/* 空项目上传卡（2026-10-23）：没有图标时，搜索 / 全局定制都收起，上传引导占满主区正中。
   ① 水平居中：限宽 + margin auto；② 垂直居中：flex 列 + min-height 吃掉视口剩余高度，
   别贴在上面一排控件底下；③ 卡片化：浅底 + 虚线边，让它看起来就是一块"上传区"而不是漂着的文字。 */
#view-icons .ic-empty.is-proj {
  max-width: 520px; margin: 0 auto;
  min-height: min(58vh, 560px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 28px;
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 12px;
}
#view-icons .ic-empty.is-proj .ic-empty-icon { width: 64px; height: 64px; margin-bottom: 18px; }
#view-icons .ic-empty.is-proj .ic-empty-icon svg { width: 30px; height: 30px; }
#view-icons .ic-empty.is-proj .ic-empty-t { font-size: var(--hx-t16); }
#view-icons .ic-empty.is-proj .ic-empty-h { font-size: var(--hx-t13); }
#view-icons .ic-empty-up { display: flex; align-items: center; justify-content: center; gap: 10px; }
#view-icons .ic-empty-up[hidden] { display: none !important; }

/* ---------- 详情 / 定制面板 ---------- */
#view-icons .ic-detail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); padding: 16px; }
#view-icons .ic-detail-h { margin: 0 0 14px; font-size: var(--hx-t13); font-weight: 700; color: var(--text); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#view-icons .ic-detail-empty { text-align: center; padding: 36px 8px; }
#view-icons .ic-detail-empty-icon { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: var(--r-btn); background: var(--icon-bg); color: var(--text-3); display: grid; place-items: center; }
#view-icons .ic-detail-empty-icon svg { width: 24px; height: 24px; }
#view-icons .ic-detail-empty-t { margin: 0 0 6px; font-size: var(--hx-t13-5); font-weight: 700; color: var(--text); }
#view-icons .ic-detail-empty-h { margin: 0; font-size: var(--hx-t12); color: var(--text-3); line-height: 1.6; }

#view-icons .ic-preview { display: grid; place-items: center; min-height: 148px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--ic-preview-bg); background-position: var(--ic-preview-pos); background-size: var(--ic-preview-size); }
#view-icons .ic-preview svg { display: block; }
#view-icons .ic-detail-name { margin: 10px 2px 14px; font-size: var(--hx-t13); font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 主题风格分段 */
#view-icons .ic-theme-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
#view-icons .ic-theme-b { display: flex; flex-direction: column; align-items: center; gap: 5px; font: inherit; font-size: var(--hx-t11); color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn); padding: 8px 4px; cursor: pointer; transition: border-color 0.12s var(--ease), color 0.12s var(--ease), background 0.12s var(--ease); }
#view-icons .ic-theme-b:hover { border-color: var(--border-strong); color: var(--text); }
#view-icons .ic-theme-b.is-on { border-color: var(--text); color: var(--text); font-weight: 600; background: var(--icon-bg); }
#view-icons .ic-theme-b .ic-theme-demo { width: 18px; height: 18px; display: grid; place-items: center; }
#view-icons .ic-theme-b .ic-theme-demo svg { width: 100%; height: 100%; }
/* 造型模式：主题按钮内嵌该造型枚数（线/填多少、总共多少一眼看清） */

/* 控件行 */
#view-icons .ic-ctrl { position: relative; margin-bottom: 14px; }
#view-icons .ic-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--hx-t12); color: var(--text-2); margin-bottom: 7px; }
#view-icons .ic-label b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
/* （原「填充不透明度」独立行的 .ic-label-sub 已随该行一起撤掉：2026-10-24 收进填充色弹层） */

#view-icons .ic-color-row { display: flex; align-items: center; gap: 8px; }
#view-icons .ic-color-chip {
  width: 34px; height: 30px; padding: 3px; flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn);
  cursor: pointer; transition: border-color 0.12s var(--ease);
}
#view-icons .ic-color-chip:hover, #view-icons .ic-color-chip[aria-expanded="true"] { border-color: var(--border-strong); }
#view-icons .ic-color-chip-fill { display: block; width: 100%; height: 100%; border-radius: 3px; background: #18181b; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
/* 双色档「填充颜色」控件：复用取色弹层的色块 + hex，外加一个回到「自动」的小按钮 */
#view-icons .ic-fill-auto {
  margin-left: auto; height: 30px; padding: 0 10px; flex: 0 0 auto;
  font-size: var(--hx-t12); color: var(--text-2); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn);
  transition: border-color 0.12s var(--ease), color 0.12s var(--ease);
}
#view-icons .ic-fill-auto:hover { border-color: var(--border-strong); color: var(--text); }

/* 色板弹层：推荐色收在这里，面板只留色块 + 色值。
   注意用 fixed 定位——面板本身是 overflow:auto 的滚动容器，absolute 会被裁掉。 */
#view-icons .ic-color-pop {
  position: fixed; left: 0; top: 0; z-index: var(--hx-z-anchor, 60); width: 232px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-2); padding: 10px;
}
#view-icons .ic-color-pop[hidden] { display: none; }
/* 色板格子用固定尺寸：全局 `#view-icons button` 有 height:var(--ctl-h)，会跟 aspect-ratio 打架把列宽顶到 30px */
#view-icons .ic-swatches { display: grid; grid-template-columns: repeat(8, 22px); justify-content: space-between; }
#view-icons .ic-color-pop .ic-swatch {
  width: 22px; height: 22px; padding: 0; border-radius: 5px;
  border: 1px solid var(--border); cursor: pointer; transition: transform 0.1s var(--ease);
}
#view-icons .ic-color-pop .ic-swatch:hover { transform: scale(1.15); z-index: 1; }
/* 无级取色：SV 方块（横向饱和度 / 纵向明度）+ 色相条，弹层内一次搞定，不弹系统取色器 */
#view-icons .ic-sv {
  position: relative; height: 148px; margin-top: 9px; border-radius: 8px;
  border: 1px solid var(--border); cursor: crosshair; touch-action: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0), #000),
    linear-gradient(to right, #fff, rgba(255, 255, 255, 0)),
    hsl(var(--sv-h, 0) 100% 50%);
}
#view-icons .ic-sv-dot {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 2px solid var(--bg); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
}
#view-icons .ic-color-pop .ic-hue {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 14px; margin: 9px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 7px;
  background: linear-gradient(to right, #ff0000, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000);
  outline: 0; cursor: pointer;
}
#view-icons .ic-color-pop .ic-hue::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
}
#view-icons .ic-color-pop .ic-hue::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* 自定义色值：和推荐色同处一个弹层，直接输 hex，不再弹第二层系统取色器 */
#view-icons .ic-color-custom { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
#view-icons .ic-color-custom-t { flex: 0 0 auto; font-size: var(--hx-t11-5); color: var(--text-3); }
/* 提高特异性：.ic-hex 的通用内边距在后面定义，会盖掉这里的紧凑尺寸 */
#view-icons .ic-color-pop .ic-pop-hex { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 6px; text-align: center; }
/* 填充不透明度：不再在面板里单独占一行，收进「填充颜色」色块的取色弹层（2026-10-24 用户要求）。
   只在 fillColor 弹层显示，顶部分割线把它和取色区隔开 */
#view-icons .ic-pop-op { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); }
#view-icons .ic-pop-op[hidden] { display: none !important; }
#view-icons .ic-pop-op-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: var(--hx-t11-5); color: var(--text-3); }
#view-icons .ic-pop-op-h b { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* 弹层比面板窄，数字框收窄一点，滑块才有拖动余量 */
#view-icons .ic-pop-op .ic-num { width: 44px; flex: 0 0 auto; }

#view-icons input[type="range"] { width: 100%; accent-color: var(--text); }

/* 端点/拐点类型：三张等宽圆角卡片。选中态与「风格」按钮（.ic-theme-b）同一套 token：
   1px 中性描边 + --icon-bg 浅底 + 600 字重，不再用强调色 —— 强调色只属于 L1 主题层
   （--ic-sel / --accent-soft-bg 会把控件选中态染成主色，与风格按钮并排时像两套设计系统）。
   2026-10-22 用户：「端点拐点类型按钮能不能和风格的按钮保持一致？」
   作用域仅限 #ic-caps / #ic-joins，不影响上传弹窗里那段文字分段控件（.ic-ip-seg）。
   注：原选择器写成 .ic-ctrl-caps（HTML 实际父级是 .ic-ctrl，无 -caps 后缀）→ 整块失效。 */
#view-icons #ic-caps,
#view-icons #ic-joins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
#view-icons #ic-caps .ic-seg-b,
#view-icons #ic-joins .ic-seg-b {
  display: flex; align-items: center; justify-content: center;
  /* 2026-10-24 用户：「端点拐点按钮高度与风格的按钮一致」——原先写死 46px，
     与「图标风格」三宫格（--ctl-h，30/32px）并排时高出一截，同一列控件不齐基线。
     现在直接吃同一个 token，任何皮肤改 --ctl-h 都自动跟齐。 */
  height: var(--ctl-h); padding: 0; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  background: var(--surface); color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.12s var(--ease), background 0.12s var(--ease), color 0.12s var(--ease);
}
#view-icons #ic-caps .ic-seg-b:hover,
#view-icons #ic-joins .ic-seg-b:hover { border-color: var(--border-strong); color: var(--text); }
#view-icons #ic-caps .ic-seg-b.is-on,
#view-icons #ic-joins .ic-seg-b.is-on {
  border-color: var(--text); background: var(--icon-bg); color: var(--text); font-weight: 600;
}
#view-icons #ic-caps .ic-seg-b:focus-visible,
#view-icons #ic-joins .ic-seg-b:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
#view-icons #ic-caps .ic-seg-b svg,
#view-icons #ic-joins .ic-seg-b svg { width: var(--hx-t20); height: var(--hx-t20); display: block; }
#view-icons .ic-seg-b { font: inherit; font-size: var(--hx-t12); color: var(--text-2); background: var(--surface); border: 0; border-right: 1px solid var(--border); padding: 6px 11px; cursor: pointer; transition: background 0.12s var(--ease), color 0.12s var(--ease); }
#view-icons .ic-seg-b:last-child { border-right: 0; }
#view-icons .ic-seg-b:hover { background: var(--icon-bg); color: var(--text); }
#view-icons .ic-seg-b.is-on { background: var(--text); color: var(--bg); font-weight: 600; }

#view-icons .ic-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#view-icons .ic-acts .btn { flex: 1 1 calc(50% - 4px); }
#view-icons .ic-acts .btn-p { flex: 1 1 100%; }

/* ---------- 按钮全套（tools.css 按视图 id 分写，本视图须自带） ---------- */
#view-icons .btn,
#view-icons button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: var(--hx-t13); line-height: 1;
  height: var(--ctl-h); padding: 0 var(--ctl-px);
  border: 1px solid var(--border); border-radius: var(--r-btn);
  background: var(--surface); color: var(--text);
  cursor: pointer;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease), color 0.12s var(--ease);
}
#view-icons button:disabled { opacity: 0.45; cursor: not-allowed; }
#view-icons button:disabled:hover { background: var(--surface); border-color: var(--border); }
#view-icons button:hover,
#view-icons .btn:hover { background: var(--icon-bg); border-color: var(--border-strong); }
#view-icons .btn-p { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
#view-icons .btn-p:hover { background: var(--btn-p-hover); border-color: var(--btn-p-hover); color: #fff; } /* hover 底色 --btn-p-hover 亮暗都是深灰，字必须固定白（用 var(--bg) 会在暗色下深字叠深底 1.5:1） */
#view-icons .btn-p:disabled { background: var(--border); border-color: var(--border); color: var(--text-3); cursor: not-allowed; opacity: 1; }
#view-icons .btn-sm { height: var(--ctl-h-sm); padding: 0 10px; font-size: var(--hx-t12); }

/* 拖拽上传时整页高亮（drop-zone 语义，照站内 .drop.over 弱化版） */
#view-icons.ic-dragover .ic-body { filter: none; }
#view-icons.ic-dragover::after {
  content: "松开鼠标，上传 SVG 到当前项目";
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  font-size: var(--hx-t15); font-weight: 700; color: var(--text);
  background: var(--icon-bg);
  border: 2px dashed var(--text); border-radius: 12px;
  pointer-events: none;
}

/* ---------- 项目库（lib 模式） ---------- */
#view-icons .ic-layout.no-side { grid-template-columns: minmax(0, 1fr) 300px; }
/* 定制面板整块收起时（项目库列表 / 空项目）布局跟着收成单列：
   只把 .ic-detail 设 hidden，grid 仍是「主区 + 300px」两列，右边会留一条空白列
   （用户 2026-10-23 截图指出）。⚠️ 必须写在 .no-side 之后：两者特异性相同，后来者胜。 */
#view-icons .ic-layout:has(.ic-detail[hidden]) { grid-template-columns: minmax(0, 1fr); }
/* 项目库卡片：2026-10-21 放大重排（原来是一行小字，挤在 240px 格里）
   结构：首字色块 + 名称/元信息 + 枚数胶囊 + 两个图标操作键 */
#view-icons .ic-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
#view-icons .ic-pcard {
  display: flex; align-items: center; gap: 12px;
  min-height: 76px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 14px 16px; transition: border-color 0.12s var(--ease), background 0.12s var(--ease);
}
#view-icons .ic-pcard:hover { border-color: var(--border-strong); background: var(--icon-bg); }
#view-icons .ic-pcard-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
/* 首字块：库里没有头像字段，用项目名开头做一个视觉锚点（不冒充 logo） */
#view-icons .ic-pcard-mono {
  flex: none; width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border);
  color: var(--accent-text); font-size: var(--hx-t15); font-weight: 700; letter-spacing: 0.3px;
}
#view-icons .ic-pcard-body { flex: 1; min-width: 0; }
#view-icons .ic-pcard-name { display: block; font-size: var(--hx-t15); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-icons .ic-pcard-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-width: 0; }
#view-icons .ic-pcard-meta-t { font-size: var(--hx-t12); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-icons .ic-pcard-badges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
#view-icons .ic-pbadge { font-size: var(--hx-t10); font-weight: 600; border-radius: 4px; padding: 1px 5px; }
#view-icons .ic-pbadge.is-mine { color: var(--accent-text); background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border); }
#view-icons .ic-pbadge.is-adm { color: var(--danger-text); background: var(--danger-soft-bg); border: 1px solid var(--danger-soft-border); }
/* 枚数胶囊：把数字从元信息里拎出来，一眼看到规模 */
#view-icons .ic-pcard-count {
  flex: none; font-size: var(--hx-t11-5); font-weight: 600; color: var(--text-2);
  background: var(--icon-bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
#view-icons .ic-pcard-ops { display: flex; gap: 4px; flex: none; }
/* 操作收成图标键：文字按钮在放大后的卡片里太占地方 */
#view-icons .ic-pcard-ico {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-btn);
  background: transparent; color: var(--text-3); cursor: pointer;
  transition: color 0.12s var(--ease), background 0.12s var(--ease), border-color 0.12s var(--ease);
}
#view-icons .ic-pcard-ico svg { width: var(--hx-t15); height: var(--hx-t15); }
#view-icons .ic-pcard-ico:hover { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
#view-icons .ic-pcard-ico.is-danger:hover { color: var(--danger-text); background: var(--danger-soft-bg); border-color: var(--danger-soft-border); }
/* 删除确认态：卡片描边转红给「正在待确认」的上下文，确认键实心红、取消键保持中性 */
/* ⚠️ 工具页跑在 #legacy-app 里，而旧皮肤有一条 `#legacy-app #view-icons .ic-pcard`
   （两个 id，特异性更高）改写了边框 → 确认态的红描边会被它压掉，所以这里把同款选择器
   再写一遍，保证「待确认」一定有红框 */
#view-icons .ic-pcard.is-arming,
#legacy-app #view-icons .ic-pcard.is-arming { border-color: var(--danger-soft-border); }
#view-icons .ic-pcard.is-arming .ic-pcard-mono { background: var(--danger-soft-bg); border-color: var(--danger-soft-border); color: var(--danger-text); }
#view-icons .ic-pcard-ico.is-ok { color: var(--surface); background: var(--danger-text); border-color: var(--danger-text); }
#view-icons .ic-pcard-ico.is-ok:hover { color: var(--surface); background: var(--danger-text); border-color: var(--danger-text); opacity: 0.86; }
#view-icons .ic-pcard-rename { width: 100%; min-width: 0; font: inherit; font-size: var(--hx-t14); color: var(--text); background: var(--surface); border: 1px solid var(--text); border-radius: var(--r-btn); padding: 6px 9px; outline: 0; }
/* 缩略区：自定义图（img）与默认首字块（mono）共用 44×44 盒子；可写时浮出更换/清除键 */
#view-icons .ic-pcard-thumb { position: relative; flex: none; width: 44px; height: 44px; border-radius: 11px; overflow: hidden; }
#view-icons .ic-pcard-img { display: block; width: 100%; height: 100%; object-fit: cover; }
#view-icons .ic-pcard-thumb.is-edit { cursor: pointer; }
#view-icons .ic-pcard-edit,
#view-icons .ic-pcard-clear {
  position: absolute; display: grid; place-items: center;
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; opacity: 0;
  transition: opacity 0.12s var(--ease);
}
#view-icons .ic-pcard-edit { right: 2px; bottom: 2px; }
#view-icons .ic-pcard-clear { right: 2px; top: 2px; background: var(--danger-text, #c0392b); }
#view-icons .ic-pcard-edit svg, #view-icons .ic-pcard-clear svg { width: var(--hx-t12); height: var(--hx-t12); }
#view-icons .ic-pcard-thumb.is-edit:hover .ic-pcard-edit,
#view-icons .ic-pcard-thumb.is-edit:hover .ic-pcard-clear { opacity: 1; }
#view-icons .ic-pcard-thumb.is-edit:focus-within .ic-pcard-edit { opacity: 1; }

/* 项目库「只看我的」筛选 chip */
#view-icons .ic-lib-mine {
  flex: none; font: inherit; font-size: var(--hx-t12); color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; transition: background 0.12s var(--ease), color 0.12s var(--ease), border-color 0.12s var(--ease);
}
#view-icons .ic-lib-mine:hover { color: var(--text); border-color: var(--border-strong); }
#view-icons .ic-lib-mine.is-on { background: var(--accent-soft-bg); border-color: var(--accent-soft-border); color: var(--accent-text); font-weight: 600; }

/* 上传「去色」开关 */
#view-icons .ic-mono-toggle { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: var(--hx-t12); color: var(--text-2); cursor: pointer; user-select: none; }
#view-icons .ic-mono-toggle input { width: 14px; height: 14px; accent-color: var(--text); cursor: pointer; margin: 0; }
#view-icons .ic-mono-toggle:hover { color: var(--text); }

/* 原色插画提示（全局定制不适用时） */
#view-icons .ic-color-note { margin: 0 0 12px; font-size: var(--hx-t11-5); color: var(--text-3); line-height: 1.6; background: var(--icon-bg); border-radius: var(--r-btn); padding: 8px 10px; }

/* 危险按钮（删除项目） */
#view-icons .ic-danger-b { color: var(--danger-text); border-color: var(--danger-soft-border); }
#view-icons .ic-danger-b:hover { background: var(--danger-soft-bg); border-color: var(--danger-text); color: var(--danger-text); }

/* ---------- 视图内 toast ---------- */
#view-icons .ic-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px);
  max-width: min(520px, calc(100vw - 48px));
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-2, rgba(0, 0, 0, 0.12));
  font-size: var(--hx-t13); line-height: 1.5; padding: 10px 16px; border-radius: 8px;
  box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; z-index: 80;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
#view-icons .ic-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 响应式 ----------
   1280 起就让定制面板换行：1181–1280 区间若硬撑三栏，主区只剩 556–772px，
   网格一屏放不下几枚；换成「侧栏 + 主区」两栏、面板全宽垫底更实用。
   ⚠️ 阈值是「视口 ≤1280」不是 1240——1280 本身不满足 max-width:1240，曾因此白改一轮。 */
@media (max-width: 1280px) {
  #view-icons .ic-layout { grid-template-columns: 104px minmax(0, 1fr); }
  #view-icons .ic-detail { grid-column: 1 / -1; position: static; max-height: none; overflow: visible; }
}
@media (max-width: 860px) {
  #view-icons .ic-layout { grid-template-columns: minmax(0, 1fr); }
  /* .no-side（项目态双列）特异性高于上方单列规则，窄屏必须同选择器压回单列，
     否则 300px 详情面板把主区挤成 26px（项目条/工具栏全部挤扁的根因） */
  #view-icons .ic-layout.no-side { grid-template-columns: minmax(0, 1fr); }
  #view-icons .ic-side { position: static; }
  /* 卡片随基础值 100px：390px 手机仍是 3 列（3×100+2×12=324 ≤ 366），名称不再截断 */
  /* 窄屏头部规则已随 .ic-head 删除（2026-10-23）：项目名现在在工具栏内，
     与搜索框同排时会自己省略，不需要单独的换行处理 */
}

/* ================= 2026-10-20 重构：分类导航 / 多选 / 全局定制 ================= */

/* ---------- 侧栏：分类导航 ---------- */
#view-icons .ic-side-n { font-size: var(--hx-t11); color: var(--text-3); font-weight: 400; }
#view-icons .ic-side-n:empty { display: none; }
#view-icons .ic-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - 220px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
/* 细滚动条：侧栏只有 104px，Windows 默认滚动条又粗又抢版面；webkit 手工收窄到 6px，悬停加深 */
#view-icons .ic-cat-list::-webkit-scrollbar { width: 6px; }
#view-icons .ic-cat-list::-webkit-scrollbar-track { background: transparent; }
#view-icons .ic-cat-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
#view-icons .ic-cat-list:hover::-webkit-scrollbar-thumb { background: var(--text-3); }
/* 「全部」行吸顶：34 行必然超屏，滚到底也能一键回全部；底色遮住下面滚过的行（与 body 背景同色） */
#view-icons .ic-cat-list li { margin: 0; }
/* 滚动跟随态（is-cur）：网格往下滚时自动标出当前所在分类——只换文字色/字重，不加底色，
   与筛选态（is-on，有底色）明确区分；两条同时命中时 is-on 胜出（规则排在后面） */
#view-icons .ic-cat-b.is-cur { color: var(--accent-text); font-weight: 600; }
#view-icons .ic-cat-b {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: var(--hx-t12-5); color: var(--text-2); text-align: left;
  border: 0; border-radius: var(--r-btn); background: transparent;
  padding: 7px 9px; cursor: pointer; transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
#view-icons .ic-cat-b:hover { background: var(--icon-bg); color: var(--text); }
#view-icons .ic-cat-b.is-on { background: var(--accent-soft-bg); color: var(--accent-text); font-weight: 600; }
#view-icons .ic-cat-b .ic-cat-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-icons .ic-cat-b .ic-cat-c { font-size: var(--hx-t11); color: var(--text-3); flex: none; font-variant-numeric: tabular-nums; }
#view-icons .ic-cat-b.is-on .ic-cat-c { color: var(--accent-text); opacity: 0.75; }

/* ---------- 项目内 chip（项目卡标签） ---------- */
#view-icons .ic-proj-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
#view-icons .ic-proj-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: var(--hx-t12); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  padding: 5px 10px; cursor: pointer; transition: border-color 0.12s var(--ease), color 0.12s var(--ease), background 0.12s var(--ease);
}
#view-icons .ic-proj-chip:hover { border-color: var(--border-strong); color: var(--text); }
#view-icons .ic-proj-chip.is-on { background: var(--accent-soft-bg); border-color: var(--accent-soft-border); color: var(--accent-text); font-weight: 600; }
#view-icons .ic-proj-chip .ic-chip-c { font-size: var(--hx-t11); color: var(--text-3); }
#view-icons .ic-proj-chip.is-on .ic-chip-c { color: var(--accent-text); opacity: 0.75; }
#view-icons .ic-proj-chip .ic-chip-del { border: 0; background: transparent; color: var(--text-3); font-size: var(--hx-t13); line-height: 1; padding: 0 2px; cursor: pointer; border-radius: 4px; }
#view-icons .ic-proj-chip .ic-chip-del:hover { color: var(--danger-text); background: var(--danger-soft-bg); }
#view-icons .ic-proj-chip .ic-chip-del.is-confirm { color: var(--danger-text); background: var(--danger-soft-bg); font-size: var(--hx-t11); padding: 1px 5px; }
#view-icons .ic-proj-chip .ic-proj-rename { font: inherit; font-size: var(--hx-t12); color: var(--text); background: var(--surface); border: 1px solid var(--text); border-radius: 6px; padding: 2px 6px; outline: 0; width: 110px; }

/* ---------- 批量操作（已并入右侧「选中操作」区，2 列栅格） ---------- */
#view-icons .ic-bulk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }

/* ---------- 网格卡片：多选态（选中色见上方 .ic-card.is-sel） ---------- */
#view-icons .ic-card { position: relative; }

/* ---------- 定制面板：全局样式 ---------- */
#view-icons .ic-g-apply { font-size: var(--hx-t11); font-weight: 400; color: var(--text-3); margin-left: 6px; }
#view-icons .ic-g-body { margin-top: 4px; }
/* 选中「保原色」图标时：调色 / 线型那一套对它无效，收起；但「图标大小」照常生效
   （itemSvg 会按当前尺寸补 width/height），所以只保留带 .ic-keep 的那一行。
   用类切换而不是 hidden 属性：ic-ctrl-fill 自己的 hidden 语义由主题态管理，不能覆盖。 */
#view-icons .ic-g-body.ic-orig-mode .ic-ctrl { display: none; }
#view-icons .ic-g-body.ic-orig-mode .ic-ctrl.ic-keep { display: block; }
#view-icons .ic-g-body.ic-orig-mode .ic-reset { display: none; }
#view-icons .ic-g-ops { margin-top: 18px; }
#view-icons .ic-sel-n { font-size: var(--hx-t11); color: var(--text-3); font-weight: 400; margin-left: 6px; }
/* 单选时名字拼在枚数后面（如「已选 1 枚 · 下箭头」），长名字要能截断而不是把操作行顶宽 */
#view-icons .ic-sel-n {
  display: inline-block; max-width: 168px; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#view-icons .ic-sel-n.has { color: var(--accent-text); font-weight: 600; }

/* 主题三宫格（线性/填充/双色）
   高度显式锁 --ctl-h（30px，站点标准控件高度）：原来靠 padding 9px + 行盒自然撑出
   30px，字号一改就漂到 31/32，与相邻控件不在一条基线上。 */
#view-icons .ic-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#view-icons .ic-theme-grid .ic-theme-b {
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: var(--hx-t12-5); color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn);
  height: var(--ctl-h); padding: 0 4px; cursor: pointer;
  transition: border-color 0.12s var(--ease), color 0.12s var(--ease), background 0.12s var(--ease);
}
#view-icons .ic-theme-grid .ic-theme-b:hover { border-color: var(--border-strong); color: var(--text); }
#view-icons .ic-theme-grid .ic-theme-b.is-on { border-color: var(--text); color: var(--text); font-weight: 600; background: var(--icon-bg); }

/* 颜色行：色块 + hex 输入 */
#view-icons .ic-hex {
  flex: 1; min-width: 0; font: inherit; font-size: var(--hx-t12); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn);
  padding: 6px 8px; outline: 0; font-variant-numeric: tabular-nums;
}
#view-icons .ic-hex:focus { border-color: var(--text); }

/* 滑块 + 数字步进行 */
#view-icons .ic-slider-row { display: flex; align-items: center; gap: 10px; }
#view-icons .ic-slider-row input[type="range"] { flex: 1; min-width: 0; }
#view-icons .ic-num {
  width: 56px; flex: none; font: inherit; font-size: var(--hx-t12); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn);
  padding: 5px 6px; outline: 0; text-align: center; font-variant-numeric: tabular-nums;
}
#view-icons .ic-num:focus { border-color: var(--text); }

/* 端点/拐点图标按钮（svg 示意） */
#view-icons .ic-seg .ic-seg-b svg { width: var(--hx-t20); height: var(--hx-t20); display: block; }
#view-icons .ic-seg .ic-seg-b { padding: 7px 12px; }

/* 清空配置 */
#view-icons .ic-reset { width: 100%; margin-top: 2px; }

/* ---------- 响应式补（与上面 1280 同步：面板全宽后的连带调整） ---------- */
@media (max-width: 1280px) {
  #view-icons .ic-cat-list { max-height: none; }
  /* 面板变全宽后，批量按钮不再撑成超宽格，退回自然宽度一行排开
     （必须写在 .ic-bulk 基础规则之后：同特异性后来者胜） */
  #view-icons .ic-bulk { display: flex; flex-wrap: wrap; }
  #view-icons .ic-bulk .btn { flex: 0 0 auto; min-width: 104px; }
}

/* ---------- 补：项目 chip 内裸按钮 / 空提示 / 预览名 / 空预览提示 ---------- */
#view-icons .ic-proj-chip .ic-chip-b {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; padding: 0; margin: 0;
  font: inherit; font-size: var(--hx-t12); color: inherit; cursor: pointer;
  max-width: 100%;
}
#view-icons .ic-proj-chip .ic-chip-b .ic-proj-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-icons .ic-chips-empty { font-size: var(--hx-t12); color: var(--text-3); padding: 4px 2px; }

/* 预览图标名（全局样式预览下方） */
#view-icons .ic-prev-name {
  display: block; margin: 8px 2px 0; font-size: var(--hx-t11-5); color: var(--text-3);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-height: 15px;
}
#view-icons .ic-prev-name:not(:empty) { color: var(--text-2); }

/* 未点选时的预览占位提示 */
#view-icons .ic-preview-hint { font-size: var(--hx-t12); color: var(--text-3); text-align: center; line-height: 1.7; padding: 0 16px; max-width: 220px; }

/* 导出区操作提示（多选复制 = 合并 SVG，可粘贴设计软件） */
#view-icons .ic-ops-hint { margin: 10px 0 0; font-size: var(--hx-t11-5); color: var(--text-3); line-height: 1.6; }