/* ══════════════════════════════════════════════════════════════════
   技能 / 专家自定义图标（迁移 076）— 展示组件 .ei-* + 作者选择器 .ip-*
   组件在 static/js/EntityIcon.js，后端语义见 core/icons.py。

   这里**只**定义“作者设了图标才用到”的类：配色 .ei-c-*、图片 .ei-img、
   emoji .ei-emoji。容器尺寸 / 圆角仍由各调用点原有的类负责（mkt-card-icon /
   re-card-av / sp-mkt-card-icon / at-icon …），故未设图标的实体渲染结果与
   引入前逐字节一致。本文件被所有展示技能 / 专家的页面引入。
   ══════════════════════════════════════════════════════════════════ */

/* ── 未设图标时的哈希色板 .pm-ic-0..4 ──────────────────────────────────
   `<EntityIcon palette="pm-ic" mod={5}/>` 三处调用点（技能广场卡片 / 榜单头像 /
   作者图标选择器预览）按 id 哈希取其中一色。类名带 pm- 前缀纯属历史 —— 它原本
   定义在 presetmarket.css 里，那个文件随首登展示墙一起删掉了，只有这 5 条还活着，
   于是搬到这里（改名会同时动三个调用点，不值得）。 */
.pm-ic-0{background:linear-gradient(135deg,#4D8AFF,#165DFF)}
.pm-ic-1{background:linear-gradient(135deg,#A78BFA,#7C3AED)}
.pm-ic-2{background:linear-gradient(135deg,#5ED47E,#00B42A)}
.pm-ic-3{background:linear-gradient(135deg,#FBBF55,#F77234)}
.pm-ic-4{background:linear-gradient(135deg,#22D3EE,#0891B2)}

/* ── 作者可选配色（与 core/icons.ICON_COLORS 一一对应）───────────── */
.ei-c-violet{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.ei-c-blue  {background:linear-gradient(135deg,#4d8aff,#165dff)}
.ei-c-cyan  {background:linear-gradient(135deg,#22d3ee,#0891b2)}
.ei-c-teal  {background:linear-gradient(135deg,#2dd4bf,#0d9488)}
.ei-c-green {background:linear-gradient(135deg,#5ed47e,#00b42a)}
.ei-c-amber {background:linear-gradient(135deg,#fbbf24,#d97706)}
.ei-c-orange{background:linear-gradient(135deg,#fb923c,#ea580c)}
.ei-c-rose  {background:linear-gradient(135deg,#fb7185,#e11d48)}
.ei-c-pink  {background:linear-gradient(135deg,#f472b6,#db2777)}
.ei-c-slate {background:linear-gradient(135deg,#94a3b8,#475569)}

/* ── 上传的图片：铺满容器，不要渐变底透出来 ───────────────────────── */
.ei-has-img{background:var(--bg2,#f2f3f5)!important;overflow:hidden;padding:0}
.ei-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ── emoji：比首字母略大一点，行高压平避免撑高容器 ─────────────────── */
.ei-emoji{font-size:1.15em;line-height:1;font-weight:400;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* ══════════════════════════════════════════════════════════════════
   作者侧选择器（技能编辑器 / 专家编辑器内）
   ══════════════════════════════════════════════════════════════════ */
.ip-wrap{display:flex;flex-direction:column;gap:8px}
.ip-row{display:flex;align-items:center;gap:12px}
.ip-preview{
  width:52px;height:52px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:#fff;
}
.ip-actions{display:flex;flex-wrap:wrap;gap:6px}
.ip-btn{
  padding:5px 11px;border-radius:7px;border:1px solid var(--brd);
  background:var(--bg0);color:var(--tx1);font-size:12.5px;cursor:pointer;
  transition:all .15s;
}
.ip-btn:hover:not(:disabled){border-color:var(--acc-b);color:var(--acc-b)}
.ip-btn:disabled{opacity:.55;cursor:not-allowed}
.ip-btn-ghost{color:var(--tx2)}
.ip-hint{font-size:11.5px;color:var(--tx3);line-height:1.5}
.ip-err{font-size:12px;color:#f53f3f}
.ip-sec{font-size:11.5px;color:var(--tx3);margin-top:2px}

.ip-emojis{display:flex;flex-wrap:wrap;gap:5px}
.ip-emoji{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--brd);
  background:var(--bg0);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .12s;
}
.ip-emoji:hover:not(:disabled){border-color:var(--acc-b);transform:translateY(-1px)}
.ip-emoji.on{border-color:var(--acc-b);box-shadow:0 0 0 2px rgba(22,93,255,.18)}
.ip-emoji:disabled{opacity:.55;cursor:not-allowed}
.ip-emoji-more{width:auto;padding:0 8px;font-size:11.5px;color:var(--tx2)}

.ip-custom{
  width:100%;padding:6px 10px;border-radius:7px;border:1px solid var(--brd);
  background:var(--bg0);color:var(--tx1);font-size:13px;
}
.ip-custom:focus{outline:none;border-color:var(--acc-b)}

.ip-colors{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ip-color{
  width:26px;height:26px;border-radius:8px;border:2px solid transparent;
  cursor:pointer;transition:all .12s;padding:0;
}
.ip-color:hover:not(:disabled){transform:translateY(-1px)}
.ip-color.on{border-color:var(--tx1);box-shadow:0 0 0 2px var(--bg0) inset}
.ip-color:disabled{opacity:.55;cursor:not-allowed}
.ip-color-auto{
  width:auto;padding:0 9px;height:26px;font-size:11.5px;
  border:1px solid var(--brd);background:var(--bg0);color:var(--tx2);
}
.ip-color-auto.on{border-color:var(--acc-b);color:var(--acc-b)}

/* ── 列表行里的小图标（团队控制台等文字行）—— 仅在作者设了图标时渲染 ──── */
.ei-li{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#fff;
}

/* 专家编辑器里技能行的迷你图标 */
.re-skill-ico{
  width:20px;height:20px;border-radius:6px;flex-shrink:0;margin-right:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;
}