/* ===== 纯 CSS 导航图标库（彩色版 + 二维码图标） ===== */

.ico {
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  font-size: inherit;
  vertical-align: middle;
}

/* 1. 姓名查询 —— 人像 + 帽子 */
.ico-name::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 42%;
  height: 42%;
  transform: translateX(-50%);
  background: currentColor;
  border-radius: 50% 50% 45% 45%;
}
.ico-name::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  width: 62%;
  height: 30%;
  transform: translateX(-50%);
  background: currentColor;
  border-radius: 50% 50% 0 0;
}

/* 2. 考号查询 —— 证件卡片 */
.ico-id::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 18%;
  width: 76%;
  height: 64%;
  border: 0.14em solid currentColor;
  border-radius: 0.18em;
  box-sizing: border-box;
}
.ico-id::after {
  content: "";
  position: absolute;
  left: 26%;
  top: 44%;
  width: 48%;
  height: 0.14em;
  background: currentColor;
  border-radius: 0.1em;
  box-shadow: 0 -0.28em 0 currentColor;
}

/* 3. 学科名次 —— 列表序号 */
.ico-rank::before {
  content: "";
  position: absolute;
  left: 30%;
  top: 18%;
  width: 58%;
  height: 0.14em;
  background: currentColor;
  border-radius: 0.1em;
  box-shadow: 0 0.3em 0 currentColor, 0 0.6em 0 currentColor;
}
.ico-rank::after {
  content: "";
  position: absolute;
  left: 12%;
  top: 16%;
  width: 0.14em;
  height: 0.14em;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0.3em 0 currentColor, 0 0.6em 0 currentColor;
}

/* 4. 成绩曲线 —— 折线图 */
.ico-chart::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 20%;
  width: 76%;
  height: 60%;
  border-left: 0.12em solid currentColor;
  border-bottom: 0.12em solid currentColor;
  box-sizing: border-box;
}
.ico-chart::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 30%;
  width: 0.16em;
  height: 0.16em;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0.22em -0.14em 0 currentColor, 0.44em -0.06em 0 currentColor, 0.66em 0.06em 0 currentColor;
}

/* 5. 三率分析 —— 百分比 % */
.ico-percent {
  background: linear-gradient(45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%);
}
.ico-percent::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 18%;
  width: 0.22em;
  height: 0.22em;
  border: 0.12em solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}
.ico-percent::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 18%;
  width: 0.22em;
  height: 0.22em;
  border: 0.12em solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}

/* 6. 分段分析 —— 分层堆叠 */
.ico-layer::before {
  content: "";
  position: absolute;
  left: 14%;
  top: 20%;
  width: 72%;
  height: 0.18em;
  background: currentColor;
  border-radius: 0.1em;
  box-shadow: 0 0.28em 0 currentColor, 0 0.56em 0 currentColor;
}

/* 7. 文件/报表 */
.ico-file::before {
  content: "";
  position: absolute;
  left: 22%;
  top: 14%;
  width: 56%;
  height: 72%;
  border: 0.12em solid currentColor;
  border-radius: 0.12em;
  box-sizing: border-box;
}
.ico-file::after {
  content: "";
  position: absolute;
  left: 32%;
  top: 34%;
  width: 36%;
  height: 0.1em;
  background: currentColor;
  border-radius: 0.1em;
  box-shadow: 0 0.22em 0 currentColor, 0 0.44em 0 currentColor;
}

/* 8. 通知公告 —— 喇叭 */
.ico-horn::before {
  content: "";
  position: absolute;
  left: 20%;
  top: 38%;
  width: 0.28em;
  height: 0.28em;
  background: currentColor;
  border-radius: 0.06em;
}
.ico-horn::after {
  content: "";
  position: absolute;
  left: 34%;
  top: 22%;
  width: 0.5em;
  height: 0.6em;
  background: currentColor;
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
  border-radius: 0.06em;
}

/* ===== 9. 二维码图标 ===== */
/* ::before 画三个实心定位角 */
.ico-qr::before {
  content: "";
  position: absolute;
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
  box-sizing: border-box;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 34% 34%, 34% 34%, 34% 34%;
  background-position: 0 0, 100% 0, 0 100%;
}

/* ::after 画三个定位角内的白色镂空 + 右下散点 */
.ico-qr::after {
  content: "";
  position: absolute;
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
  box-sizing: border-box;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size:
    18% 18%,
    18% 18%,
    18% 18%,
    12% 12%,
    12% 12%,
    12% 12%,
    12% 12%,
    12% 12%;
  background-position:
    8% 8%,
    74% 8%,
    8% 74%,
    60% 60%,
    78% 60%,
    60% 78%,
    78% 78%,
    69% 69%;
}