/* IconMenu —— 「我的」页的功能行（Figma 1872:17139）与两列入口（1872:17199 / 1872:17201）。

   两种形态：
     mode="row"  白卡 343×87，三项（图标 40 圆底 + 12px 文案），gap 66
     mode="duo"  白卡 343×66，两列各 165（文案左 + 48 图标右）
     mode="list" 白卡 343×66，单行（左文案 + 右侧计数与箭头） */

.mzh-icon-menu {
  position: absolute;
  left: var(--mine-content-x);
  background: var(--case-card-bg);
  border-radius: var(--mine-func-radius);
  overflow: clip;
}

.mzh-icon-menu--row {
  top: var(--mine-func-y);
  width: var(--mine-func-w);
  height: var(--mine-func-h);
  display: flex;
  align-items: center;
  /* ★ 设计稿三项在卡内 x=36/150/264 —— **固定步进 114**，不是等分。
     等分会把第三项推到 268（设计是 264），并让第二项偏 +6。 */
  gap: var(--mine-func-gap);
  padding: var(--mine-func-pad-y) var(--mine-func-pad-x);
}

/* row 形态用绝对定位逐项落位（设计稿是固定步进，见上） */
.mzh-icon-menu--row .mzh-icon-menu__item:nth-child(1) { left: var(--mine-func-item1-x); }
.mzh-icon-menu--row .mzh-icon-menu__item:nth-child(2) { left: var(--mine-func-item2-x); }
.mzh-icon-menu--row .mzh-icon-menu__item:nth-child(3) { left: var(--mine-func-item3-x); }

.mzh-icon-menu--row .mzh-icon-menu__item {
  position: absolute;
  top: var(--mine-func-item-y);
  /* ★ 设计稿框宽不等（48/48/40），40 圆底在 48 框内居中（x4），
     第三项框本身就是 40（圆底 x0）。逐项给出各自宽度。 */
  width: var(--mine-func-item-w1);
}

.mzh-icon-menu--row .mzh-icon-menu__item:nth-child(3) { width: var(--mine-func-item-w3); }

.mzh-icon-menu--duo,
.mzh-icon-menu--list {
  width: var(--mine-func-w);
  height: var(--mine-two-col-h);
}

/* ---- duo 形态：★ 设计稿是**两张独立白卡**，不是一张卡内两列 ----
   实测设计稿白色覆盖列段：x 16..180 与 x 194..358（各 165 宽），中间 13px 露出绿底。
   若用「一张 343 宽卡 + grid 两列」，中间不透明 → 视觉上连成一片。 */
.mzh-icon-menu--duo {
  top: var(--mine-two-col-y);
  width: auto;
  height: var(--mine-two-col-h);
  display: grid;
  grid-template-columns: var(--mine-two-col-w) var(--mine-two-col-w);
  column-gap: var(--mine-two-col-gap);
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.mzh-icon-menu--duo .mzh-icon-menu__duo {
  width: var(--mine-two-col-w);
  height: var(--mine-two-col-h);
  background: var(--case-card-bg);
  border-radius: var(--mine-func-radius);
  overflow: clip;
}

.mzh-icon-menu--list {
  top: var(--mine-fav-y);
  display: flex;
  align-items: center;
}

/* ---- row 形态：图标 + 文案 ---- */
.mzh-icon-menu__item {
  flex: none;
  width: var(--mine-func-icon-box);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mine-func-text-gap);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.mzh-icon-menu__item--wide { width: var(--mine-func-icon-box); }

.mzh-icon-menu__icon-box {
  position: relative;
  width: var(--mine-func-icon-box);
  height: var(--mine-func-icon-box);
  border-radius: var(--mine-func-icon-radius);
  background: var(--mine-func-icon-bg);
  overflow: clip;
  flex: none;
}

.mzh-icon-menu__icon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: var(--mine-func-icon);
  height: var(--mine-func-icon);
  display: block;
}

.mzh-icon-menu__label {
  font-size: var(--mine-func-text-size);
  line-height: var(--typography-caption-line-height);
  color: var(--button-secondary-fg-default);
  white-space: nowrap;
}

/* ---- duo / list 形态：左文案 + 右图标 ---- */
.mzh-icon-menu__duo {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: var(--mine-two-col-text-x);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.mzh-icon-menu__duo-icon {
  position: absolute;
  /* ★ 设计稿 1872:17174：图标在**列内 left 112**、48×48、列内 top 9。
     之前误当 right 用（token 描述写的是 left），图标跑到了列右端。 */
  left: var(--mine-two-col-icon-x);
  top: var(--mine-two-col-icon-y);
  width: var(--mine-two-col-icon);
  height: var(--mine-two-col-icon);
  display: block;
}

.mzh-icon-menu__duo-label {
  font-size: var(--mine-two-col-text-size);
  line-height: var(--typography-subtitle-line-height);
  color: var(--button-secondary-fg-default);
  white-space: nowrap;
}

.mzh-icon-menu__list-label {
  font-size: var(--mine-two-col-text-size);
  line-height: var(--typography-subtitle-line-height);
  color: var(--button-secondary-fg-default);
  white-space: nowrap;
  flex: 1 1 auto;
}

.mzh-icon-menu__count {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--mine-points-gap);
  margin-right: var(--mine-content-x);
  font-size: var(--mine-fav-count-size);
  line-height: var(--typography-body-line-height);
  color: var(--color-text-tertiary);
}

.mzh-icon-menu__count-arrow {
  width: var(--mine-fav-arrow);
  height: var(--mine-fav-arrow);
  display: block;
}