/* ============================================================
 * 汉 · 中式图标系统 (Chinese Iconography)
 * 30+ 中国风 SVG 图标，作为 background-image 或内联 SVG 使用
 *
 * 使用方式：
 *   <span class="han-icon han-icon-seal"></span>
 *   <i class="han-icon han-icon-brush"></i>
 *
 * 所有图标尺寸默认 24x24，可通过 font-size 控制大小
 * ============================================================ */

/* ---------- 图标基础样式 ---------- */
.han-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

/* 图标尺寸变体 */
.han-icon--sm { width: 16px; height: 16px; }
.han-icon--lg { width: 32px; height: 32px; }
.han-icon--xl { width: 48px; height: 48px; }

/* 图标颜色变体 - 通过 filter 改变颜色 */
.han-icon--ink { filter: var(--han-icon-filter-ink, invert(0.3) sepia(0.5) saturate(1.5) hue-rotate(10deg)); }
.han-icon--vermilion { filter: var(--han-icon-filter-vermilion, brightness(0.8) saturate(1.2) sepia(0.3)); }
.han-icon--gold { filter: var(--han-icon-filter-gold, brightness(0.7) sepia(0.8) saturate(2)); }
.han-icon--light { filter: brightness(0) invert(1); }


/* ========================================================
 * 1. 印章/官印类 (Seal Icons)
 * ====================================================== */

/* 印章 */
.han-icon-seal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M8 8 h8 M8 12 h8 M8 16 h8'/%3E%3C/svg%3E");
}

/* 圆形印章 */
.han-icon-seal-round {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 9 l8 6 M16 9 l-8 6'/%3E%3C/svg%3E");
}

/* 玉玺 */
.han-icon-seal-imperial {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c68a2e' stroke-width='1.5'%3E%3Crect x='6' y='10' width='12' height='10' rx='1'/%3E%3Cpath d='M8 10 V6 Q12 4 16 6 V10'/%3E%3Ccircle cx='8' cy='7' r='1.5'/%3E%3Ccircle cx='16' cy='7' r='1.5'/%3E%3C/svg%3E");
}


/* ========================================================
 * 2. 文房四宝类 (Scholar Icons)
 * ====================================================== */

/* 毛笔 */
.han-icon-brush {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='1.5'%3E%3Cpath d='M4 20 L14 10 L18 6'/%3E%3Cpath d='M14 10 L16 8 L20 4'/%3E%3Cline x1='4' y1='20' x2='6' y2='22'/%3E%3C/svg%3E");
}

/* 墨锭 */
.han-icon-ink-stick {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2824' stroke-width='1.5'%3E%3Crect x='6' y='4' width='12' height='16' rx='1'/%3E%3Cpath d='M8 8 h8 M8 12 h8 M8 16 h8'/%3E%3C/svg%3E");
}

/* 砚台 */
.han-icon-inkstone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5a53' stroke-width='1.5'%3E%3Cellipse cx='12' cy='12' rx='10' ry='6'/%3E%3Cellipse cx='12' cy='10' rx='7' ry='4'/%3E%3C/svg%3E");
}

/* 宣纸 */
.han-icon-paper {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5a53' stroke-width='1.5'%3E%3Cpath d='M6 2 L18 2 L22 6 L22 22 L6 22 Z'/%3E%3Cpath d='M18 2 L18 6 L22 6'/%3E%3Cline x1='10' y1='12' x2='18' y2='12'/%3E%3Cline x1='10' y1='16' x2='18' y2='16'/%3E%3C/svg%3E");
}

/* 毛笔架 */
.han-icon-brush-rack {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='1.5'%3E%3Cpath d='M4 6 Q12 2 20 6'/%3E%3Cline x1='6' y1='6' x2='8' y2='20'/%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3Cline x1='18' y1='6' x2='16' y2='20'/%3E%3C/svg%3E");
}


/* ========================================================
 * 3. 自然元素类 (Nature Icons)
 * ====================================================== */

/* 莲花 */
.han-icon-lotus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fa68c' stroke-width='1.5'%3E%3Cpath d='M12 20 Q12 12 12 8 Q8 8 4 12 Q8 16 12 20'/%3E%3Cpath d='M12 20 Q12 12 12 8 Q16 8 20 12 Q16 16 12 20'/%3E%3Cpath d='M12 20 Q12 14 12 12 Q10 10 8 12 Q10 16 12 20'/%3E%3C/svg%3E");
}

/* 祥云 */
.han-icon-cloud {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5a53' stroke-width='1.5'%3E%3Cpath d='M4 16 Q4 12 8 12 Q8 8 12 8 Q16 8 16 12 Q20 12 20 16 Z'/%3E%3Cpath d='M8 14 Q8 12 10 12 Q12 12 12 14'/%3E%3C/svg%3E");
}

/* 山水 */
.han-icon-mountain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a7263' stroke-width='1.5'%3E%3Cpath d='M2 20 L8 8 L12 14 L16 6 L22 20'/%3E%3Cpath d='M8 12 L10 14'/%3E%3Cpath d='M14 10 L16 12'/%3E%3C/svg%3E");
}

/* 松树 */
.han-icon-pine {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c59' stroke-width='1.5'%3E%3Cline x1='12' y1='22' x2='12' y2='10'/%3E%3Cpath d='M8 14 L12 8 L16 14'/%3E%3Cpath d='M6 18 L12 12 L18 18'/%3E%3Cpath d='M10 10 L12 4 L14 10'/%3E%3C/svg%3E");
}

/* 竹叶 */
.han-icon-bamboo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c59' stroke-width='1.5'%3E%3Cline x1='6' y1='2' x2='6' y2='22'/%3E%3Cline x1='18' y1='2' x2='18' y2='22'/%3E%3Cpath d='M6 6 Q10 4 14 6'/%3E%3Cpath d='M6 12 Q10 10 14 12'/%3E%3Cpath d='M6 18 Q10 16 14 18'/%3E%3Cpath d='M18 8 Q20 6 22 8'/%3E%3Cpath d='M18 14 Q20 12 22 14'/%3E%3C/svg%3E");
}

/* 梅花 */
.han-icon-plum {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='1.5'%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Ccircle cx='8' cy='12' r='2'/%3E%3Ccircle cx='16' cy='12' r='2'/%3E%3Ccircle cx='10' cy='16' r='2'/%3E%3Ccircle cx='14' cy='16' r='2'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E");
}

/* 菊花 */
.han-icon-chrysanthemum {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c68a2e' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 4 L12 8 M12 16 L12 20 M4 12 L8 12 M16 12 L20 12 M6 6 L9 9 M15 15 L18 18 M18 6 L15 9 M9 15 L6 18'/%3E%3C/svg%3E");
}


/* ========================================================
 * 4. 传统文化类 (Culture Icons)
 * ====================================================== */

/* 灯笼 */
.han-icon-lantern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='1.5'%3E%3Cpath d='M8 4 L16 4 L16 6 L20 8 L20 14 L16 16 L16 20 L8 20 L8 16 L4 14 L4 8 L8 6 Z'/%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3C/svg%3E");
}

/* 折扇 */
.han-icon-fan {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5a53' stroke-width='1.5'%3E%3Cpath d='M12 22 Q12 12 4 6 Q12 8 20 6 Q12 12 12 22'/%3E%3Cline x1='12' y1='12' x2='4' y2='6'/%3E%3Cline x1='12' y1='12' x2='12' y2='4'/%3E%3Cline x1='12' y1='12' x2='20' y2='6'/%3E%3Cline x1='12' y1='12' x2='8' y2='4'/%3E%3Cline x1='12' y1='12' x2='16' y2='4'/%3E%3C/svg%3E");
}

/* 茶壶 */
.han-icon-teapot {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6458' stroke-width='1.5'%3E%3Cpath d='M6 8 L18 8 L18 14 Q18 18 12 18 Q6 18 6 14 Z'/%3E%3Cpath d='M18 10 Q22 10 22 14 Q22 16 20 16'/%3E%3Cpath d='M9 4 L15 4 L14 8 L10 8 Z'/%3E%3C/svg%3E");
}

/* 围棋 */
.han-icon-go {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3Cline x1='9' y1='3' x2='9' y2='21'/%3E%3Cline x1='15' y1='3' x2='15' y2='21'/%3E%3Ccircle cx='9' cy='9' r='1.5' fill='%232a2824'/%3E%3Ccircle cx='15' cy='15' r='1.5' fill='%23faf6ea'/%3E%3C/svg%3E");
}

/* 古琴 */
.han-icon-guqin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4c30' stroke-width='1.5'%3E%3Cpath d='M2 16 Q6 8 12 12 Q18 16 22 8'/%3E%3Cline x1='4' y1='16' x2='20' y2='10'/%3E%3Cline x1='6' y1='18' x2='18' y2='8'/%3E%3Cline x1='8' y1='20' x2='16' y2='6'/%3E%3C/svg%3E");
}

/* 竹简 */
.han-icon-bamboo-scroll {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7862' stroke-width='1.5'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cline x1='4' y1='8' x2='20' y2='8'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='16' x2='20' y2='16'/%3E%3C/svg%3E");
}

/* 宝塔 */
.han-icon-pagoda {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5a53' stroke-width='1.5'%3E%3Cpath d='M12 2 L12 4'/%3E%3Cpath d='M10 4 L14 4 L14 6 L18 8 L18 10 L6 10 L6 8 L10 6 Z'/%3E%3Cpath d='M8 10 L16 10 L16 12 L20 14 L20 16 L4 16 L4 14 L8 12 Z'/%3E%3Cpath d='M6 16 L18 16 L18 20 L6 20 Z'/%3E%3C/svg%3E");
}


/* ========================================================
 * 5. 文化符号类 (Symbol Icons)
 * ====================================================== */

/* 万字符 */
.han-icon-wanzi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5a53' stroke-width='2'%3E%3Crect x='8' y='4' width='8' height='16'/%3E%3Crect x='4' y='8' width='16' height='8'/%3E%3Cpath d='M12 4 L12 8 L16 8'/%3E%3Cpath d='M12 20 L12 16 L8 16'/%3E%3Cpath d='M4 12 L8 12 L8 8'/%3E%3Cpath d='M20 12 L16 12 L16 16'/%3E%3C/svg%3E");
}

/* 回纹符号 */
.han-icon-huiwen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5a53' stroke-width='1.5'%3E%3Cpath d='M4 4 L4 12 L12 12 L12 8 L8 8 L8 16 L16 16 L16 12 L12 12'/%3E%3C/svg%3E");
}

/* 太极 */
.han-icon-taiji {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2 Q12 7 12 12 Q12 17 12 22 Q7 22 4 17 Q4 7 12 2' fill='%233e3b36'/%3E%3Ccircle cx='12' cy='7' r='1.5' fill='%23faf6ea'/%3E%3Ccircle cx='12' cy='17' r='1.5' fill='%233e3b36'/%3E%3C/svg%3E");
}

/* 铜钱 */
.han-icon-coin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c68a2e' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3C/svg%3E");
}


/* ========================================================
 * 6. 装饰线条类 (Decoration Icons)
 * ====================================================== */

/* 装饰点 */
.han-icon-dot-deco {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5a53' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='6' opacity='0.5'/%3E%3Ccircle cx='12' cy='12' r='9' opacity='0.25'/%3E%3C/svg%3E");
}

/* 回纹装饰 */
.han-icon-deco-line {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' fill='none' stroke='%235e5a53' stroke-width='1.5'%3E%3Cpath d='M4 12 Q12 4 24 12 Q36 20 44 12'/%3E%3Ccircle cx='4' cy='12' r='2'/%3E%3Ccircle cx='44' cy='12' r='2'/%3E%3C/svg%3E");
  width: 48px;
}

/* 印章文字标记 */
.han-icon-seal-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c0392b' stroke='%23c68a2e' stroke-width='1'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Ctext x='12' y='16' text-anchor='middle' font-size='10' font-family='serif' fill='%23faf6ea'>印</text%3E%3C/svg%3E");
}


/* ========================================================
 * 7. 交互图标类 (UI Icons)
 * ====================================================== */

/* 菜单 */
.han-icon-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='2'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}

/* 关闭 */
.han-icon-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* 搜索 */
.han-icon-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* 箭头 */
.han-icon-arrow-right {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}

/* 下拉箭头 */
.han-icon-chevron-down {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* 上箭头 */
.han-icon-chevron-up {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='2'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
}

/* 左箭头 */
.han-icon-chevron-left {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='2'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

/* 右箭头 */
.han-icon-chevron-right {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}


/* ========================================================
 * 8. 功能图标类 (Functional Icons)
 * ====================================================== */

/* 用户 */
.han-icon-user {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='1.5'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* 购物车 */
.han-icon-cart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='1.5'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}

/* 收藏 */
.han-icon-heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='1.5'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

/* 分享 */
.han-icon-share {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='1.5'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
}

/* 邮件 */
.han-icon-mail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='1.5'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

/* 电话 */
.han-icon-phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='1.5'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* 位置 */
.han-icon-location {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='1.5'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* 日历 */
.han-icon-calendar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='1.5'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}


/* ========================================================
 * 9. 状态图标类 (Status Icons)
 * ====================================================== */

/* 成功 */
.han-icon-success {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c59' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8 12 11 15 16 9'/%3E%3C/svg%3E");
}

/* 警告 */
.han-icon-warning {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c68a2e' stroke-width='2'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* 错误 */
.han-icon-error {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}

/* 信息 */
.han-icon-info {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a5285' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* 帮助 */
.han-icon-help {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}


/* ========================================================
 * 10. 加载动画图标 (Loading Icons)
 * ====================================================== */

/* 墨迹加载 */
.han-icon-loading-ink {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3b36' stroke-width='2'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56' opacity='0.3'/%3E%3C/svg%3E");
  animation: han-spin 1s linear infinite;
}

/* 印章加载 */
.han-icon-loading-seal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' opacity='0.4'/%3E%3Crect x='4' y='4' width='16' height='16' rx='2' stroke-dasharray='20' stroke-dashoffset='15'/%3E%3C/svg%3E");
  animation: han-spin 1.5s linear infinite;
}

/* 旋转动画 */
@keyframes han-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* ========================================================
 * 11. SVG Icon Inline Variant
 * 内联 SVG 图标 - 可直接嵌入 HTML
 * ====================================================== */

/* 可复制的 SVG 模板 - 用于需要灵活控制颜色的场景 */
.han-icon-svg {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.han-icon-svg svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 图标与文字间距 */
.han-icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--han-space-2);
}

.han-icon-text .han-icon {
  flex-shrink: 0;
}


/* ========================================================
 * 12. 主题感知图标颜色
 * 根据当前主题自动调整图标颜色
 * ====================================================== */

/* 深色主题图标调整 */
:where(:root[data-color-mode='dark'], [data-han-scope][data-color-mode='dark'], [data-han-scope] [data-color-mode='dark']) .han-icon {
  opacity: 0.9;
}

/* 主题特定图标颜色 */
:where(:root[data-theme='wuxia'], [data-han-scope][data-theme='wuxia'], [data-han-scope] [data-theme='wuxia']) .han-icon,
:where(:root[data-theme='qinhan'], [data-han-scope][data-theme='qinhan'], [data-han-scope] [data-theme='qinhan']) .han-icon {
  opacity: 0.85;
}