/* ============================================================
   图标设计规范层 · Icon System
   ------------------------------------------------------------
   目标：让全站图标（后台菜单 / 前台导航 / 快捷入口 / 全局小图标）
        在「立体感、层次感、精细度」上达到国际一流水准，
        并与品牌深绿体系、前后端整体视觉语言严格统一。

   四条设计原则：
     ① 统一网格 —— 全部 24×24 视框、1.8px 圆头描边、视觉重心居中；
     ② 统一容器 —— 图标一律放进「内凹圆角底 + 细描边」的槽位里，
        槽位承担 3D 感，图形保持干净（不靠描边粗细堆立体）；
     ③ 统一光效 —— 顶光（内高光）+ 环境辉光（品牌色），
        克制使用，不做廉价霓虹；
     ④ 统一节奏 —— hover 微抬升 + 图标自身微缩放，
        只动 transform（合成层），不触发重排。

   性能约束：
     · 不新增 backdrop-filter（最贵）；
     · 发光用 box-shadow 而非 filter:drop-shadow；
     · 动效只用 transform / opacity。
   ============================================================ */

/* ============================================================
   1. 基础：SVG 图标容器通用规格
   ------------------------------------------------------------
   ⚠ 关键设计决策（2026-10-11 修正）：
     emoji 容器的尺寸由 **font-size** 决定（font-size:18px → 图标 18px），
     而 font-size 对 SVG **完全无效**，SVG 会回退到默认尺寸（300×150）
     导致图标撑破容器。

     因此默认规则必须是 `width/height: 1em` —— 让 SVG 严格复刻
     emoji 的字号驱动行为，任何原本用 emoji 的地方无需改 font-size
     即可得到尺寸完全一致的矢量图标。

   绝不能用 `width:100%;height:100%`：
     父容器若没有明确宽高（如 .ck-kpi-ico 这类 flex 子项），
     100% 会形成循环依赖，浏览器按默认尺寸解算 → 图标巨大。
   ============================================================ */
.ico-svg,
[data-ico-svg] svg {
  display: block;
  width: 1em;
  height: 1em;
  flex: none;
  /* 抗锯齿：让细描边在低密度屏不发虚 */
  shape-rendering: geometricPrecision;
  transition: transform 220ms cubic-bezier(.34, 1.42, .64, 1),
              opacity 180ms linear;
}

/* ============================================================
   2. 后台侧栏 · 菜单图标
   ============================================================ */
/* 子菜单已升级为「树形轨道 + 节点圆点」设计（admin.css 主导），
   旧 emoji 图标槽位全面退役 */
.sidebar .nav-item > span:first-child { display: none !important; }

/* —— 主菜单图标：内凹圆角槽位（3D 的主要来源）—— */
.sidebar .nav-group-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 8px;
  color: rgba(199, 210, 254, .92);
  /* 槽位底：极淡内凹 */
  background: rgba(255, 255, 255, .07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),      /* 顶光 */
    inset 0 -1px 0 rgba(0, 0, 0, .14);            /* 底部接触影 */
  transition: background-color 220ms linear,
              box-shadow 220ms linear,
              transform 220ms cubic-bezier(.34, 1.42, .64, 1);
}
.sidebar .nav-group-ico svg {
  width: 16px;
  height: 16px;
}
/* 折叠态：图标放大居中 */
.sidebar.is-collapsed .nav-group-ico {
  width: 30px;
  height: 30px;
}
.sidebar.is-collapsed .nav-group-ico svg { width: 18px; height: 18px; }

/* 悬停：槽位微亮 */
.sidebar .nav-group-title:hover .nav-group-ico {
  background: rgba(255, 255, 255, .13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 4px 12px -4px rgba(52, 211, 153, .40);
  color: var(--c-surface);
}
/* 当前分组：品牌辉光 + 图标提亮 */
.sidebar .nav-group.active-group .nav-group-ico {
  background: linear-gradient(145deg, rgba(52, 211, 153, .30), rgba(16, 185, 129, .20));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 0 0 1px rgba(52, 211, 153, .42),
    0 6px 18px -6px rgba(52, 211, 153, .55);
  color: var(--brand-1);
}

/* ============================================================
   3. 前台 · 底部 Tab 图标
   ============================================================ */
.tab .tab-ico svg {
  transition: transform 260ms cubic-bezier(.34, 1.42, .64, 1);
}
.tab.active .tab-ico svg {
  transform: translateY(-1px) scale(1.06);
  filter: drop-shadow(0 2px 5px rgba(16, 185, 129, .45));
}

/* ============================================================
   4. 金刚区 / 快捷入口 · 图标
   ============================================================ */
/* has-bg（有底色时）：图标反白 + 轻微内阴影增强"印"在色块上的立体感 */
.hs-nav-ico.has-bg .hs-nav-svg {
  filter: drop-shadow(0 1px 2px rgba(4, 47, 34, .28));
}
/* 无底色时：给一层同色辉光，让图标从白底"浮"起来 */
.hs-nav-svg {
  filter: drop-shadow(0 2px 4px color-mix(in srgb, currentColor 26%, transparent));
  transition: transform 240ms cubic-bezier(.34, 1.42, .64, 1),
              filter 240ms linear;
}
.hs-nav-item:hover .hs-nav-svg,
.hs-nav:hover .hs-nav-svg {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 4px 8px color-mix(in srgb, currentColor 34%, transparent));
}

/* ============================================================
   5. 通用小图标容器（各页面 emoji 图标槽位）
   ============================================================ */
/* 尺寸已由基础规则的 1em 统一接管，这里只做色彩与质感的分工。 */
[data-ico-svg] svg {
  color: inherit;
}

/* ============================================================
   5a. 图标 + 文字 混合型容器
   ------------------------------------------------------------
   背景：顶栏门户按钮原本是「🌐 用户端」这种 emoji+文字的纯文本，
   升级后需要保证图标与文字基线对齐、间距均匀，
   否则图标会顶到文字或出现错位。
   ============================================================ */
.ico-svg-inline {
  display: inline-block;
  vertical-align: -0.14em;      /* 与文字视觉基线对齐 */
  margin-right: 5px;
  color: currentColor;
  opacity: .92;
}
.ico-svg-label { vertical-align: baseline; }

/* 顶栏门户按钮：图标槽位化，与整体视觉语言一致 */
.topbar-link,
.topbar-bell,
.topbar-cmd,
.topbar-density,
.topbar-theme {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.topbar-link .ico-svg-inline,
.topbar-bell .ico-svg-inline,
.topbar-cmd .ico-svg-inline,
.topbar-density .ico-svg-inline,
.topbar-theme .ico-svg-inline {
  width: 15px;
  height: 15px;
  margin-right: 0;
  vertical-align: middle;
  flex: none;
  color: currentColor;
  opacity: .85;
  transition: opacity 200ms linear, transform 220ms cubic-bezier(.34, 1.42, .64, 1);
}
.topbar-link:hover .ico-svg-inline,
.topbar-bell:hover .ico-svg-inline,
.topbar-cmd:hover .ico-svg-inline,
.topbar-theme:hover .ico-svg-inline {
  opacity: 1;
  transform: scale(1.1);
}
/* 铃铛/搜索是纯图标按钮，需居中 */
.topbar-bell, .topbar-cmd, .topbar-density, .topbar-theme {
  justify-content: center;
}
.topbar-bell .ico-svg, .topbar-cmd .ico-svg,
.topbar-density .ico-svg, .topbar-theme .ico-svg {
  width: 16px; height: 16px;
}

/* ============================================================
   5b. 数据看板 KPI 卡 · 图标槽位
   ------------------------------------------------------------
   截图问题：emoji 换成 SVG 后图标过大、色调过重，与卡片内
   「大数字 + 小标签」的排版层级打架。

   对标顶级后台（Linear / Stripe / Vercel 看板）的做法：
     · 图标放进固定尺寸的圆角槽位，而不是裸奔；
     · 图标色调压到「品牌绿 40% 混合」，退居辅助层，
       不与 KPI 数值争夺视觉焦点；
     · 槽位用极淡品牌底 + 细描边，形成层次但不发闷；
     · 悬浮时槽位亮起、图标微缩放 —— 有反馈但不喧宾夺主。
   ============================================================ */
.ck-kpi-ico,
.ck-todo-ico,
.ck-hero-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  /* 图标色调：品牌绿与白 40:60 混合 —— 清晰可读但不抢焦点 */
  color: color-mix(in srgb, var(--v-600, var(--brand-2)) 40%, var(--c-surface, var(--c-surface)));
  background: color-mix(in srgb, var(--v-600, var(--brand-2)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--v-600, var(--brand-2)) 14%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: background-color 220ms linear, border-color 220ms linear,
              color 220ms linear, box-shadow 220ms linear,
              transform 220ms cubic-bezier(.34, 1.42, .64, 1);
}
.ck-kpi-ico svg,
.ck-todo-ico svg,
.ck-hero-ico svg { width: 17px; height: 17px; }
.ck-hero-ico { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
.ck-hero-ico svg { width: 20px; height: 20px; }

/* 悬浮：槽位点亮 + 图标微抬 */
.ck-kpi:hover .ck-kpi-ico {
  color: var(--v-600, var(--brand-2));
  background: color-mix(in srgb, var(--v-600, var(--brand-2)) 14%, transparent);
  border-color: color-mix(in srgb, var(--v-600, var(--brand-2)) 26%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
              0 4px 12px -6px color-mix(in srgb, var(--v-600, var(--brand-2)) .55);
  transform: translateY(-1px);
}
.ck-kpi:hover .ck-kpi-ico svg { transform: scale(1.08); }

/* 暗色：槽位提亮、图标用亮品牌色 */
html[data-theme="dark"] .ck-kpi-ico,
html[data-theme="dark"] .ck-todo-ico,
html[data-theme="dark"] .ck-hero-ico,
html[data-theme="tech"] .ck-kpi-ico,
html[data-theme="tech"] .ck-todo-ico,
html[data-theme="tech"] .ck-hero-ico {
  color: var(--brand-4);
  background: rgba(52, 211, 153, .12);
  border-color: rgba(52, 211, 153, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .ck-kpi:hover .ck-kpi-ico,
html[data-theme="tech"] .ck-kpi:hover .ck-kpi-ico {
  background: rgba(52, 211, 153, .20);
  border-color: rgba(52, 211, 153, .36);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .ck-kpi-ico,
  html:not([data-theme="light"]) .ck-todo-ico,
  html:not([data-theme="light"]) .ck-hero-ico {
    color: var(--brand-4);
    background: rgba(52, 211, 153, .12);
    border-color: rgba(52, 211, 153, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  }
}

/* —— 容器统一质感：内凹 + 细边 —— */
.uc-entry-ico, .uc-group-ico, .rights-ico, .pa-ico, .pm-ico,
.invite-banner-ico, .inv-two-ico, .inv-rew-ico, .wallet-banner-ico,
.ledger-ico, .wse-ico, .shop-balance-ico, .shop-ico, .fb-ico, .od-ico,
.diy-comp-ico, .diy-mod-ico, .diy-page-setbar-ico, .todo-ico,
.kp-card-ico, .kp-todo-ico, .xst-step-ico, .cd-item-ico, .qb-ico,
.nav-ico, .dash-ico, .appt-ico, .rr-pick-ico, .rr-rule-ico {
  transition: box-shadow 220ms linear, transform 220ms cubic-bezier(.34, 1.42, .64, 1);
}
.uc-entry-ico:hover, .rights-ico:hover, .shop-ico:hover, .fb-ico:hover,
.diy-comp-ico:hover, .kp-card-ico:hover, .cd-item-ico:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 14px -6px rgba(6, 95, 70, .34);
}

/* ============================================================
   6. 空态 / 大图标 · 专属质感
   ============================================================ */
.ap-empty-ico, .kp-empty-ico, .kp-error-ico, .ins-empty-ico, .rr-empty-ico,
.px-state-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(150deg, var(--v-50, var(--brand-purple-soft)), color-mix(in srgb, var(--v-100, var(--v-100)) 60%, var(--c-surface, var(--c-surface))));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 8px 20px -8px rgba(6, 95, 70, .28);
  color: var(--v-600, var(--brand-2));
}
.ap-empty-ico svg, .kp-empty-ico svg, .kp-error-ico svg,
.ins-empty-ico svg, .rr-empty-ico svg, .px-state-ico svg {
  width: 48%;
  height: 48%;
}

/* ============================================================
   7. Toast 状态图标 · 语义着色
   ============================================================ */
.admin-toast-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex: 0 0 18px;
  border-radius: 6px;
}
.admin-toast-ico svg { width: 13px; height: 13px; }

/* ============================================================
   8. 暗色主题 · 图标描边微调
   ============================================================ */
/* 深底上 1.8px 描边偏细，视觉会发虚 → 提到 1.9 并提亮 */
html[data-theme="dark"] .sidebar .nav-item > span:first-child svg,
html[data-theme="tech"] .sidebar .nav-item > span:first-child svg {
  stroke-width: 1.9;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .sidebar .nav-item > span:first-child svg {
    stroke-width: 1.9;
  }
  .ap-empty-ico, .kp-empty-ico, .kp-error-ico, .ins-empty-ico, .rr-empty-ico, .px-state-ico {
    background: linear-gradient(150deg, #14291F, #0F2019);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 20px -8px rgba(0, 0, 0, .6);
    color: var(--brand-1);
  }
  .sidebar .nav-item > span:first-child {
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .3);
  }
}

/* ============================================================
   9. 降动效
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ico-svg, [data-ico-svg] svg,
  .sidebar .nav-item > span:first-child,
  .hs-nav-svg, .tab .tab-ico svg {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   10. 打印 / 强制色模式 —— 去掉装饰，保结构可读
   ============================================================ */
@media print {
  .sidebar .nav-item > span:first-child { box-shadow: none; background: none; }
}
@media (forced-colors: active) {
  .ico-svg, [data-ico-svg] svg { forced-color-adjust: auto; }
  .sidebar .nav-item > span:first-child { box-shadow: none; border: 1px solid CanvasText; }
}