/* ==================== 全局基础样式（原子类库） ==================== */
/* 设计原则：
1. 类名采用「缩写+值」的语义化命名（如 w100 = width:100%、mt-10 = margin-top:10px）
2. 按「重置 → 尺寸 → 排版 → 布局 → 视觉 → 边距 → 交互」的逻辑分组
3. 所有尺寸类默认包含 box-sizing: border-box，避免宽高溢出
*/

/* ==================== 1. 全局基础重置（核心必加） ==================== */
*,
*::before,
*::after {box-sizing: border-box; margin: 0;padding: 0;}
img {vertical-align: middle; /* 消除图片底部默认空白间隙 */ border: 0; /* 清除部分浏览器默认边框 */}
/* 水平翻转 */
.flip-horizontal {   transform: scaleX(-1); -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.img-cover {width: 100%;height: 100%; object-fit: cover; object-position: center; display: block; }/*图片铺满容器、不变形、裁剪多余*/

/* 图片容器：固定尺寸，隐藏溢出，避免布局变化 */
.img-container {width: 100%;height: 100%;display: flex;overflow: hidden;align-items: center;justify-content: center;}
.img-container img {
  transition: transform 0.3s ease;
  transform-origin: center center;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* 等比裁剪填满 */
  object-position: center;
  display: block;       /* 消除图片底部留白 */	  
}
.img-container:hover img {transform: scale(1.05);/* 放大倍，可根据需求调整 */}

/* 内部阴影效果 */
.inner-shadow {box-shadow: inset 2px 4px rgba(0, 0, 0, 0.06);} 

/* 基础灰色透明投影样式 */
.box-shadow {
	box-shadow: px 12px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease;
}
.box-shadow:hover {
	box-shadow: 8px 24px rgba(0, 0, 0, 0.15);
}

/* 基础灰色透明投影样式 */
.box-shadow-single {
	box-shadow: 4px 12px rgba(0, 0, 0, 0.0);
	transition: box-shadow 0.3s ease;
}
.box-shadow-single:hover {
	box-shadow: 8px 24px rgba(0, 0, 0, 0.15);
	background: linear-gradient(180deg, #fff 0%, #E8F1FF 100%);
}

/* 卡片风格投影 */
.card-shadow {box-shadow: 2px 10px rgba(0, 0, 0, 0.08);}
.card-shadow:hover {box-shadow: 6px 20px rgba(0, 0, 0, 0.12);}

/* 悬浮效果投影 */
.hover-lift {
	box-shadow: 3px 3px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
	transform: translateY(-8px);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
}

/* 悬浮效果无投影 */
.hover-lift2 {transition: transform 0.3s ease;}
.hover-lift2:hover {transform: scale(1.1) translateY(-8px);}


/* 8.3 过渡动画（通用） */
.transition { transition: all 0.3s ease; }

/* 8.4 阴影效果 */
.shadow-sm { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }  /* 小阴影 */
.shadow-md { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }  /* 中阴影 */
.shadow-lg { box-shadow: 0 8px 16px rgba(0,0,0,0.1); } /* 大阴影 */

/* 自定义字体 */
@font-face {
  font-family: 'HarmonyOSSans';
  src: url("../font/HarmonyOS_Sans_SC_Regular.woff2") format("woff2"),
	   url("../font/HarmonyOS_Sans_SC_Regular.woff") format("woff"),
	   url("../font/HarmonyOS_Sans_SC_Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url("../font/Roboto-Regular.woff2") format("woff2"),
	   url("../font/Roboto-Regular.woff") format("woff"),
	   url("../font/Roboto-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}
@font-face {
	font-family: SourceHanSerifCN-Bold;
	src: url("../font/SourceHanSerifCN-Bold.otf");
}

@font-face {
	font-family: Impact;
	src: url("../font/Impact.ttf");
}



/* ==================== 3. 文本排版类 ==================== */
/* 3.1 文本对齐 */
.text-l { text-align: left; }
.text-c { text-align: center; }
.text-r { text-align: right; }
/* 3.2 垂直对齐（行内/行内块元素 单元格） */
.text-t { vertical-align: top; }
.text-m { vertical-align: middle; }
.text-b { vertical-align: bottom; }
/* 3.3 两端对齐（兼容多浏览器） */
.text-justify {
    text-align: justify;
    text-justify: distribute-all-lines; /* IE6-8 兼容 */
    text-align-last: justify; /* IE9+ / 现代浏览器 */
    -moz-text-align-last: justify; /* Firefox 兼容 */
    -webkit-text-align-last: justify; /* Chrome/Safari 兼容 */
}
/* 3.4 首行缩进 */
.text-indent   { text-indent: 2em; } /* 标准2字符缩进 */
/* 3.5 文本换行/溢出 */
.text-nowrap { white-space: nowrap; } /* 强制不换行 */
.text-break  { word-break: break-all; } /* 强制换行（包含英文） */
/* 3.6 文本溢出省略号 */
/* 单行溢出 */
/* 多行溢出（仅WebKit内核浏览器） */
.text-line1 {display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.text-line2 {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.text-line3 {display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.text-line4 {display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.text-line5 {display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.text-line6 {display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.text-line7 {display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.text-line8 {display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.text-line9 {display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.text-line10 {display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}

/* ==================== 4. 布局/定位类 ==================== */
/* 4.1 浮动/清除浮动 */
.float-none  { float: none; }
.float-l     { float: left; }
.float-r     { float: right; }
.float-c     { width: fit-content; margin: 0 auto; } /* 浮动元素水平居中 */
.float-clear { display: flow-root; } /* 现代浏览器清除浮动（替代clearfix） */

/* 4.2 定位方式 */
.position-r  { position: relative; }  /* 相对定位 */
.position-a  { position: absolute; }  /* 绝对定位 */
.position-f  { position: fixed; }     /* 固定定位 */
.position-s  { position: static; }    /* 静态定位（默认） */
.position-st { position: sticky; }    /* 粘性定位（吸顶/吸底常用） */

/* 4.3 定位位置（0值） */
.top-0    { top: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }

/* 4.4 居中/显示类 */
.margin-center { margin: 0 auto; } /* 块级元素水平居中 */
.block         { display: block; } /* 转为块级元素 */

/* layui-row 等高列 */
.equal-height-row{
	display: flex; /* 核心：将行设置为flex容器 */
	align-items: stretch; /* 让子元素（列）拉伸至容器高度 */
}

/* 4.5 弹性布局（Flex） */
/* 基础：必须加在父元素上 */
.flex {display: flex;}
.flex-col {display: flex; flex-direction: column;}
.flex-row {display: flex; flex-direction: row;}
/* 垂直方向 */
.flex-top {ustify-content: flex-start;}
.flex-middle {justify-content: center;}
.flex-bottom {justify-content: flex-end;}
/* 水平方向 */
.flex-left {align-items: flex-start;}
.flex-center {align-items: center;}
.flex-right {align-items: flex-end;}
/* 排列 */
.flex-between {justify-content: space-between; /* 两端对齐 两边贴边，中间等距*/}
.flex-around {justify-content: space-around; /* 环绕分布 左右两边有一半空隙  中间空隙是两边的 2 倍*/}
.flex-evenly {justify-content: space-evenly; /* 完全平均分布 所有间距完全相等（最常用）*/}
/* 子项比例 */
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }
.flex-6 { flex: 6; }
.flex-7 { flex: 7; }
.flex-8 { flex: 8; }
.flex-9 { flex: 9; }
.flex-10 { flex: 10; }
.flex-11 { flex: 11; }
.flex-12 { flex: 12; }
.flex-13 { flex: 13; }
.flex-14 { flex: 14; }
.flex-15 { flex: 15; }
.flex-16 { flex: 16; }
.flex-17 { flex: 17; }
.flex-18 { flex: 18; }
.flex-19 { flex: 19; }
.flex-20 { flex: 20; }


/* 4.6 溢出处理 */
.overflow-h      { overflow: hidden; } /* 隐藏溢出 + 阻断margin折叠 */
.overflow-a      { overflow: auto; }   /* 溢出时显示滚动条 */
.overflow-s      { overflow: scroll; } /* 强制显示滚动条 */
.visible-hidden  { visibility: hidden; } /* 隐藏但占位置 */
.display-none    { display: none; }    /* 隐藏且不占位置 */

/* ==================== 5. 视觉样式类（颜色/边框/圆角） ==================== */
/* 5.1 基础颜色（文字+背景） */
/* 纯色 */
.fc-white { color: #ffffff; }
.fc-black { color: #000000; }
.fc-red   { color: #c81e1e; }
.bg-white { background-color: #ffffff; }
.bg-black { background-color: #000000; }
.bg-red   { background-color: #c81e1e; }

/* ===================== 1. 中性灰度（页面背景/分割线/禁用文字） ===================== */
.fc-gray-100 { color: #f9fafb; }
.fc-gray-200 { color: #f3f4f6; }
.fc-gray-300 { color: #e5e7eb; }
.fc-gray-400 { color: #9ca3af; }
.fc-gray-500 { color: #6b7280; }
.fc-gray-600 { color: #4b5563; }
.fc-gray-700 { color: #333333; }

.bg-gray-100 { background-color: #f9fafb; }
.bg-gray-200 { background-color: #f3f4f6; }
.bg-gray-300 { background-color: #e5e7eb; }
.bg-gray-400 { background-color: #9ca3af; }
.bg-gray-500 { background-color: #6b7280; }
.bg-gray-600 { background-color: #4b5563; }
.bg-gray-700 { background-color: #333333; }

/* ===================== 2. 品牌蓝（主色调：官网/政务/企业通用） ===================== */
.fc-blue-100 { color: #e0f7ff; }
.fc-blue-200 { color: #b3e0ff; }
.fc-blue-300 { color: #80c8ff; }
.fc-blue-400 { color: #4da6ff; }
.fc-blue-500 { color: #1890ff; }
.fc-blue-600 { color: #0066cc; }
.fc-blue-700 { color: #004c99; }

.bg-blue-100 { background-color: #e0f7ff; }
.bg-blue-200 { background-color: #b3e0ff; }
.bg-blue-300 { background-color: #80c8ff; }
.bg-blue-400 { background-color: #4da6ff; }
.bg-blue-500 { background-color: #1890ff; }
.bg-blue-600 { background-color: #0066cc; }
.bg-blue-700 { background-color: #004c99; }

/* ===================== 3. 暖蛋黄（你钟爱的风格：活动/卡片/温馨模块） ===================== */
.fc-yellow-100 { color: #fffbeb; }
.fc-yellow-200 { color: #fff1cc; }
.fc-yellow-300 { color: #ffe79a; }
.fc-yellow-400 { color: #ffd966; }
.fc-yellow-500 { color: #ffc107; }
.fc-yellow-600 { color: #ff9800; }
.fc-yellow-700 { color: #e67700; }

.bg-yellow-100 { background-color: #fffbeb; }
.bg-yellow-200 { background-color: #fff1cc; }
.bg-yellow-300 { background-color: #ffe79a; }
.bg-yellow-400 { background-color: #ffd966; }
.bg-yellow-500 { background-color: #ffc107; }
.bg-yellow-600 { background-color: #ff9800; }
.bg-yellow-700 { background-color: #e67700; }

/* ===================== 4. 橙色（强调色：按钮/热门/警示） ===================== */
.fc-orange-100 { color: #fff2e8; }
.fc-orange-200 { color: #ffe5d1; }
.fc-orange-300 { color: #ffd3b0; }
.fc-orange-400 { color: #ffb888; }
.fc-orange-500 { color: #ff944d; }
.fc-orange-600 { color: #ff7a29; }
.fc-orange-700 { color: #e85d0c; }

.bg-orange-100 { background-color: #fff2e8; }
.bg-orange-200 { background-color: #ffe5d1; }
.bg-orange-300 { background-color: #ffd3b0; }
.bg-orange-400 { background-color: #ffb888; }
.bg-orange-500 { background-color: #ff944d; }
.bg-orange-600 { background-color: #ff7a29; }
.bg-orange-700 { background-color: #e85d0c; }

/* ===================== 5. 绿色（成功色：正常/完成/安全） ===================== */
.fc-green-100 { color: #f0fff4; }
.fc-green-200 { color: #e0f7ee; }
.fc-green-300 { color: #bcf0dd; }
.fc-green-400 { color: #86e0c1; }
.fc-green-500 { color: #36d399; }
.fc-green-600 { color: #10b981; }
.fc-green-700 { color: #059669; }

.bg-green-100 { background-color: #f0fff4; }
.bg-green-200 { background-color: #e0f7ee; }
.bg-green-300 { background-color: #bcf0dd; }
.bg-green-400 { background-color: #86e0c1; }
.bg-green-500 { background-color: #36d399; }
.bg-green-600 { background-color: #10b981; }
.bg-green-700 { background-color: #059669; }

/* ===================== 6. 红色（危险色：错误/删除/热门警告） ===================== */
.fc-red-100 { color: #fff0f0; }
.fc-red-200 { color: #ffe2e2; }
.fc-red-300 { color: #ffc9c9; }
.fc-red-400 { color: #ff9e9e; }
.fc-red-500 { color: #ff6b6b; }
.fc-red-600 { color: #f53f3f; }
.fc-red-700 { color: #d92121; }

.bg-red-100 { background-color: #fff0f0; }
.bg-red-200 { background-color: #ffe2e2; }
.bg-red-300 { background-color: #ffc9c9; }
.bg-red-400 { background-color: #ff9e9e; }
.bg-red-500 { background-color: #ff6b6b; }
.bg-red-600 { background-color: #f53f3f; }
.bg-red-700 { background-color: #d92121; }

/* ===================== 7. 紫色（优雅色：轻奢/创意/女性向） ===================== */
.fc-purple-100 { color: #f5f0ff; }
.fc-purple-200 { color: #ebe0ff; }
.fc-purple-300 { color: #d8c4ff; }
.fc-purple-400 { color: #b996ff; }
.fc-purple-500 { color: #9366ff; }
.fc-purple-600 { color: #7346ef; }
.fc-purple-700 { color: #5533cc; }

.bg-purple-100 { background-color: #f5f0ff; }
.bg-purple-200 { background-color: #ebe0ff; }
.bg-purple-300 { background-color: #d8c4ff; }
.bg-purple-400 { background-color: #b996ff; }
.bg-purple-500 { background-color: #9366ff; }
.bg-purple-600 { background-color: #7346ef; }
.bg-purple-700 { background-color: #5533cc; }

/* 功能色（成功/警告/危险/信息） */
.fc-success { color: #00b42a; }
.fc-warning { color: #ff7d00; }
.fc-danger  { color: #f53f3f; }
.fc-info    { color: #168cff; }

.bg-success { background-color: #00b42a; }
.bg-warning { background-color: #ff7d00; }
.bg-danger  { background-color: #f53f3f; }
.bg-info    { background-color: #168cff; }





/* 1. 柔和蓝白渐变（适合卡片、表单背景） */
.gradient-light-blue {
  background: linear-gradient(180deg, #f0f8ff 0%, #e6f7ff 100%);
}

/* 2. 清新粉白渐变（适合女性向、轻量界面） */
.gradient-light-pink {
  background: linear-gradient(180deg, #fff5f7 0%, #ffe5ec 100%);
}

/* 3. 温暖黄白渐变（适合提示、轻量强调区域） */
.gradient-light-yellow {
  background: linear-gradient(180deg, #fffbf0 0%, #fff3cd 100%);
}

/* 4. 自然绿白渐变（适合环保、健康类场景） */
.gradient-light-green {
  background: linear-gradient(180deg, #f0fff4 0%, #d4edda 100%);
}

/* 5. 中性灰蓝渐变（适合通用内容区域） */
.gradient-light-gray {
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
}

/* 6. 双色调淡紫渐变（轻量装饰性背景） */
.gradient-light-purple {
  background: linear-gradient(180deg, #f5f3ff 0%, #e9d8fd 100%);
}

/* 7. 低饱和度渐变（极简风格，几乎无色彩感） */
.gradient-ultra-light {
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
}

/* 5.2 边框样式 */
/* 实线边框（默认浅灰色） */
.border-solid        { border: 1px #EBEBEB solid; }
.border-top-solid    { border-top: 1px #EBEBEB solid; }
.border-bottom-solid { border-bottom: 1px #EBEBEB solid; }
.border-left-solid   { border-left: 1px #EBEBEB solid; }
.border-right-solid  { border-right: 1px #EBEBEB solid; }

/* 虚线边框（默认浅灰色） */
.border-top-dashed    { border-top: 1px #EBEBEB dashed; }
.border-bottom-dashed { border-bottom: 1px #EBEBEB dashed; }
.border-left-dashed   { border-left: 1px #EBEBEB dashed; }
.border-right-dashed  { border-right: 1px #EBEBEB dashed; }

/* 5.3 圆角样式（常用尺寸） */
.border-radius-0      { border-radius: 0; } 
.border-radius-1      { border-radius: 1px; } 
.border-radius-2      { border-radius: 2px; } 
.border-radius-3      { border-radius: 3px; } 
.border-radius-4      { border-radius: 4px; }
.border-radius-5      { border-radius: 5px; }
.border-radius-6      { border-radius: 6px; }
.border-radius-7      { border-radius: 7px; }
.border-radius-8      { border-radius: 8px; }
.border-radius-9      { border-radius: 9px; }
.border-radius-10      { border-radius: 10px; }
.border-radius-circle { border-radius: 50%; }
.border-radius-half   { border-radius: 999px; }

/* 上边框圆角 - 无圆角 */
.border-top-radius-0 { 
  border-top-left-radius: 0; 
  border-top-right-radius: 0; 
}
/* 上边框圆角 - 1px 至 10px 系列 */
.border-top-radius-1 { 
  border-top-left-radius: 1px; 
  border-top-right-radius: 1px; 
}
.border-top-radius-2 { 
  border-top-left-radius: 2px; 
  border-top-right-radius: 2px; 
}
.border-top-radius-3 { 
  border-top-left-radius: 3px; 
  border-top-right-radius: 3px; 
}
.border-top-radius-4 { 
  border-top-left-radius: 4px; 
  border-top-right-radius: 4px; 
}
.border-top-radius-5 { 
  border-top-left-radius: 5px; 
  border-top-right-radius: 5px; 
}
.border-top-radius-6 { 
  border-top-left-radius: 6px; 
  border-top-right-radius: 6px; 
}
.border-top-radius-7 { 
  border-top-left-radius: 7px; 
  border-top-right-radius: 7px; 
}
.border-top-radius-8 { 
  border-top-left-radius: 8px; 
  border-top-right-radius: 8px; 
}
.border-top-radius-9 { 
  border-top-left-radius: 9px; 
  border-top-right-radius: 9px; 
}
.border-top-radius-10 { 
  border-top-left-radius: 10px; 
  border-top-right-radius: 10px; 
}

/* 下边框圆角 - 无圆角 */
.border-bottom-radius-0 { 
  border-bottom-left-radius: 0; 
  border-bottom-right-radius: 0; 
}
/* 下边框圆角 - 1px 至 10px 系列 */
.border-bottom-radius-1 { 
  border-bottom-left-radius: 1px; 
  border-bottom-right-radius: 1px; 
}
.border-bottom-radius-2 { 
  border-bottom-left-radius: 2px; 
  border-bottom-right-radius: 2px; 
}
.border-bottom-radius-3 { 
  border-bottom-left-radius: 3px; 
  border-bottom-right-radius: 3px; 
}
.border-bottom-radius-4 { 
  border-bottom-left-radius: 4px; 
  border-bottom-right-radius: 4px; 
}
.border-bottom-radius-5 { 
  border-bottom-left-radius: 5px; 
  border-bottom-right-radius: 5px; 
}
.border-bottom-radius-6 { 
  border-bottom-left-radius: 6px; 
  border-bottom-right-radius: 6px; 
}
.border-bottom-radius-7 { 
  border-bottom-left-radius: 7px; 
  border-bottom-right-radius: 7px; 
}
.border-bottom-radius-8 { 
  border-bottom-left-radius: 8px; 
  border-bottom-right-radius: 8px; 
}
.border-bottom-radius-9 { 
  border-bottom-left-radius: 9px; 
  border-bottom-right-radius: 9px; 
}
.border-bottom-radius-10 { 
  border-bottom-left-radius: 10px; 
  border-bottom-right-radius: 10px; 
}

/* ==================== 6. 字体样式类 ==================== */
/* 6.1 字体大小（px） */
.fs-8  { font-size: 8px; }
.fs-10 { font-size: 10px; }
.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-25 { font-size: 25px; }
.fs-30 { font-size: 30px; }
.fs-35 { font-size: 35px; }
.fs-40 { font-size: 40px; }
.fs-45 { font-size: 45px; }
.fs-50 { font-size: 50px; }
.fs-60 { font-size: 60px; }
.fs-70 { font-size: 70px; }
.fs-80 { font-size: 80px; }
.fs-90 { font-size: 90px; }
.fs-100 { font-size: 100px; }
.fs-120 { font-size: 120px; }
.fs-140 { font-size: 140px; }
.fs-160 { font-size: 160px; }
.fs-180 { font-size: 170px; }
.fs-200 { font-size: 200px; }
.fs-250 { font-size: 250px; }
.fs-300 { font-size: 300px; }

/* 6.2 字体样式（粗细/斜体） */
.fw-b { font-weight: bold; }	/* 加粗 */
.fs-i { font-style: italic; }	/* 斜体 */
.fw-n { font-weight: normal; }	/* 取消加粗 */

/* 6.3 行高（px） */
/* 行高（line-height）原子类：5px 递增，覆盖 10px ~ 500px */
.lh-10  { line-height: 10px; }
.lh-15  { line-height: 15px; }
.lh-18  { line-height: 18px; }
.lh-20  { line-height: 20px; }
.lh-25  { line-height: 25px; }
.lh-30  { line-height: 30px; }
.lh-35  { line-height: 35px; }
.lh-40  { line-height: 40px; }
.lh-45  { line-height: 45px; }
.lh-50  { line-height: 50px; }
.lh-55  { line-height: 55px; }
.lh-60  { line-height: 60px; }
.lh-65  { line-height: 65px; }
.lh-70  { line-height: 70px; }
.lh-75  { line-height: 75px; }
.lh-80  { line-height: 80px; }
.lh-85  { line-height: 85px; }
.lh-90  { line-height: 90px; }
.lh-95  { line-height: 95px; }
.lh-100 { line-height: 100px; }
.lh-105 { line-height: 105px; }
.lh-110 { line-height: 110px; }
.lh-115 { line-height: 115px; }
.lh-120 { line-height: 120px; }
.lh-125 { line-height: 125px; }
.lh-130 { line-height: 130px; }
.lh-135 { line-height: 135px; }
.lh-140 { line-height: 140px; }
.lh-145 { line-height: 145px; }
.lh-150 { line-height: 150px; }
.lh-155 { line-height: 155px; }
.lh-160 { line-height: 160px; }
.lh-165 { line-height: 165px; }
.lh-170 { line-height: 170px; }
.lh-175 { line-height: 175px; }
.lh-180 { line-height: 180px; }
.lh-185 { line-height: 185px; }
.lh-190 { line-height: 190px; }
.lh-195 { line-height: 195px; }
.lh-200 { line-height: 200px; }
.lh-205 { line-height: 205px; }
.lh-210 { line-height: 210px; }
.lh-215 { line-height: 215px; }
.lh-220 { line-height: 220px; }
.lh-225 { line-height: 225px; }
.lh-230 { line-height: 230px; }
.lh-235 { line-height: 235px; }
.lh-240 { line-height: 240px; }
.lh-245 { line-height: 245px; }
.lh-250 { line-height: 250px; }
.lh-255 { line-height: 255px; }
.lh-260 { line-height: 260px; }
.lh-265 { line-height: 265px; }
.lh-270 { line-height: 270px; }
.lh-275 { line-height: 275px; }
.lh-280 { line-height: 280px; }
.lh-285 { line-height: 285px; }
.lh-290 { line-height: 290px; }
.lh-295 { line-height: 295px; }
.lh-300 { line-height: 300px; }
.lh-305 { line-height: 305px; }
.lh-310 { line-height: 310px; }
.lh-315 { line-height: 315px; }
.lh-320 { line-height: 320px; }
.lh-325 { line-height: 325px; }
.lh-330 { line-height: 330px; }
.lh-335 { line-height: 335px; }
.lh-340 { line-height: 340px; }
.lh-345 { line-height: 345px; }
.lh-350 { line-height: 350px; }
.lh-355 { line-height: 355px; }
.lh-360 { line-height: 360px; }
.lh-365 { line-height: 365px; }
.lh-370 { line-height: 370px; }
.lh-375 { line-height: 375px; }
.lh-380 { line-height: 380px; }
.lh-385 { line-height: 385px; }
.lh-390 { line-height: 390px; }
.lh-395 { line-height: 395px; }
.lh-400 { line-height: 400px; }
.lh-405 { line-height: 405px; }
.lh-410 { line-height: 410px; }
.lh-415 { line-height: 415px; }
.lh-420 { line-height: 420px; }
.lh-425 { line-height: 425px; }
.lh-430 { line-height: 430px; }
.lh-435 { line-height: 435px; }
.lh-440 { line-height: 440px; }
.lh-445 { line-height: 445px; }
.lh-450 { line-height: 450px; }
.lh-455 { line-height: 455px; }
.lh-460 { line-height: 460px; }
.lh-465 { line-height: 465px; }
.lh-470 { line-height: 470px; }
.lh-475 { line-height: 475px; }
.lh-480 { line-height: 480px; }
.lh-485 { line-height: 485px; }
.lh-490 { line-height: 490px; }
.lh-495 { line-height: 495px; }
.lh-500 { line-height: 500px; }

/* ==================== 7. 边距类（Margin/Padding） ==================== */
/* 命名规则：
- m = margin / p = padding
- t = top / b = bottom / l = left / r = right
- x = 左右（left+right） / y = 上下（top+bottom）
- 后缀数字 = 像素值（如 mt-10 = margin-top:10px）
*/

/* 7.1 外边距（Margin） */
/* 5px */
.m-2    { margin: 2px; }
.mt-2   { margin-top: 2px; }
.mb-2   { margin-bottom: 2px; }
.ml-2   { margin-left: 2px; }
.mr-2   { margin-right: 2px; }
.mx-2   { margin-left: 2px; margin-right: 2px; }
.my-2   { margin-top: 2px; margin-bottom: 2px; }

/* 5px */
.m-5    { margin: 5px; }
.mt-5   { margin-top: 5px; }
.mb-5   { margin-bottom: 5px; }
.ml-5   { margin-left: 5px; }
.mr-5   { margin-right: 5px; }
.mx-5   { margin-left: 5px; margin-right: 5px; }
.my-5   { margin-top: 5px; margin-bottom: 5px; }

/* 10px */
.m-10   { margin: 10px; }
.mt-10  { margin-top: 10px; }
.mb-10  { margin-bottom: 10px; }
.ml-10  { margin-left: 10px; }
.mr-10  { margin-right: 10px; }
.mx-10  { margin-left: 10px; margin-right: 10px; }
.my-10  { margin-top: 10px; margin-bottom: 10px; }

/* 20px */
.m-20   { margin: 20px; }
.mt-20  { margin-top: 20px; }
.mb-20  { margin-bottom: 20px; }
.ml-20  { margin-left: 20px; }
.mr-20  { margin-right: 20px; }
.mx-20  { margin-left: 20px; margin-right: 20px; }
.my-20  { margin-top: 20px; margin-bottom: 20px; }

/* 30px */
.m-30   { margin: 30px; }
.mt-30  { margin-top: 30px; }
.mb-30  { margin-bottom: 30px; }
.ml-30  { margin-left: 30px; }
.mr-30  { margin-right: 30px; }
.mx-30  { margin-left: 30px; margin-right: 30px; }
.my-30  { margin-top: 30px; margin-bottom: 30px; }

/* 40px */
.mt-40  { margin-top: 40px; }
.mb-40  { margin-bottom: 40px; }
.ml-40  { margin-left: 40px; }
.mr-40  { margin-right: 40px; }
.mx-40  { margin-left: 40px; margin-right: 40px; }
.my-40  { margin-top: 40px; margin-bottom: 40px; }

/* 50px */
.mt-50  { margin-top: 50px; }
.mb-50  { margin-bottom: 50px; }
.ml-50  { margin-left: 50px; }
.mr-50  { margin-right: 50px; }
.mx-50  { margin-left: 50px; margin-right: 50px; }
.my-50  { margin-top: 50px; margin-bottom: 50px; }

/* 60px */
.mt-60  { margin-top: 60px; }
.mb-60  { margin-bottom: 60px; }
.ml-60  { margin-left: 60px; }
.mr-60  { margin-right: 60px; }
.mx-60  { margin-left: 60px; margin-right: 60px; }
.my-60  { margin-top: 60px; margin-bottom: 60px; }

/* 70px */
.mt-70  { margin-top: 70px; }
.mb-70  { margin-bottom: 70px; }
.ml-70  { margin-left: 70px; }
.mr-70  { margin-right: 70px; }
.mx-70  { margin-left: 70px; margin-right: 70px; }
.my-70  { margin-top: 70px; margin-bottom: 70px; }

/* 80px */
.mt-80  { margin-top: 80px; }
.mb-80  { margin-bottom: 80px; }
.ml-80  { margin-left: 80px; }
.mr-80  { margin-right: 80px; }
.mx-80  { margin-left: 80px; margin-right: 80px; }
.my-80  { margin-top: 80px; margin-bottom: 80px; }

/* 90px */
.mt-90  { margin-top: 90px; }
.mb-90  { margin-bottom: 90px; }
.ml-90  { margin-left: 90px; }
.mr-90  { margin-right: 90px; }
.mx-90  { margin-left: 90px; margin-right: 90px; }
.my-90  { margin-top: 90px; margin-bottom: 90px; }

/* 100px */
.mt-100 { margin-top: 100px; }
.mb-100 { margin-bottom: 100px; }
.ml-100 { margin-left: 100px; }
.mr-100 { margin-right: 100px; }
.mx-100 { margin-left: 100px; margin-right: 100px; }
.my-100 { margin-top: 100px; margin-bottom: 100px; }

/* 120px */
.mt-120 { margin-top: 120px; }
.mb-120 { margin-bottom: 120px; }
.ml-120 { margin-left: 120px; }
.mr-120 { margin-right: 120px; }
.mx-120 { margin-left: 120px; margin-right: 120px; }
.my-120 { margin-top: 120px; margin-bottom: 120px; }

/* 140px */
.mt-140 { margin-top: 140px; }
.mb-140 { margin-bottom: 140px; }
.ml-140 { margin-left: 140px; }
.mr-140 { margin-right: 140px; }
.mx-140 { margin-left: 140px; margin-right: 140px; }
.my-140 { margin-top: 140px; margin-bottom: 140px; }

/* 160px */
.mt-160 { margin-top: 160px; }
.mb-160 { margin-bottom: 160px; }
.ml-160 { margin-left: 160px; }
.mr-160 { margin-right: 160px; }
.mx-160 { margin-left: 160px; margin-right: 160px; }
.my-160 { margin-top: 160px; margin-bottom: 160px; }

/* 180px */
.mt-180 { margin-top: 180px; }
.mb-180 { margin-bottom: 180px; }
.ml-180 { margin-left: 180px; }
.mr-180 { margin-right: 180px; }
.mx-180 { margin-left: 180px; margin-right: 180px; }
.my-180 { margin-top: 180px; margin-bottom: 180px; }

/* 200px */
.mt-200 { margin-top: 200px; }
.mb-200 { margin-bottom: 200px; }
.ml-200 { margin-left: 200px; }
.mr-200 { margin-right: 200px; }
.mx-200 { margin-left: 200px; margin-right: 200px; }
.my-200 { margin-top: 200px; margin-bottom: 200px; }

/* 7.2 内边距（Padding） */
/* 5px */
.p-5    { padding: 5px; }
.pt-5   { padding-top: 5px; }
.pb-5   { padding-bottom: 5px; }
.pl-5   { padding-left: 5px; }
.pr-5   { padding-right: 5px; }
.px-5   { padding-left: 5px; padding-right: 5px; }
.py-5   { padding-top: 5px; padding-bottom: 5px; }

/* 10px */
.p-10   { padding: 10px; }
.pt-10  { padding-top: 10px; }
.pb-10  { padding-bottom: 10px; }
.pl-10  { padding-left: 10px; }
.pr-10  { padding-right: 10px; }
.px-10  { padding-left: 10px; padding-right: 10px; }
.py-10  { padding-top: 10px; padding-bottom: 10px; }

/* 20px */
.p-20   { padding: 20px; }
.pt-20  { padding-top: 20px; }
.pb-20  { padding-bottom: 20px; }
.pl-20  { padding-left: 20px; }
.pr-20  { padding-right: 20px; }
.px-20  { padding-left: 20px; padding-right: 20px; }
.py-20  { padding-top: 20px; padding-bottom: 20px; }

/* 30px */
.p-30   { padding: 30px; }
.pt-30  { padding-top: 30px; }
.pb-30  { padding-bottom: 30px; }
.pl-30  { padding-left: 30px; }
.pr-30  { padding-right: 30px; }
.px-30  { padding-left: 30px; padding-right: 30px; }
.py-30  { padding-top: 30px; padding-bottom: 30px; }

/* 40px */
.p-40   { padding: 40px; }
.pt-40  { padding-top: 40px; }
.pb-40  { padding-bottom: 40px; }
.pl-40  { padding-left: 40px; }
.pr-40  { padding-right: 40px; }
.px-40  { padding-left: 40px; padding-right: 40px; }
.py-40  { padding-top: 40px; padding-bottom: 40px; }

/* 50px */
.p-50   { padding: 50px; }
.pt-50  { padding-top: 50px; }
.pb-50  { padding-bottom: 50px; }
.pl-50  { padding-left: 50px; }
.pr-50  { padding-right: 50px; }
.px-50  { padding-left: 50px; padding-right: 50px; }
.py-50  { padding-top: 50px; padding-bottom: 50px; }

/* 60px */
.p-60   { padding: 60px; }
.pt-60  { padding-top: 60px; }
.pb-60  { padding-bottom: 60px; }
.pl-60  { padding-left: 60px; }
.pr-60  { padding-right: 60px; }
.px-60  { padding-left: 60px; padding-right: 60px; }
.py-60  { padding-top: 60px; padding-bottom: 60px; }

/* 70px */
.p-70   { padding: 70px; }
.pt-70  { padding-top: 70px; }
.pb-70  { padding-bottom: 70px; }
.pl-70  { padding-left: 70px; }
.pr-70  { padding-right: 70px; }
.px-70  { padding-left: 70px; padding-right: 70px; }
.py-70  { padding-top: 70px; padding-bottom: 70px; }

/* 80px */
.p-80   { padding: 80px; }
.pt-80  { padding-top: 80px; }
.pb-80  { padding-bottom: 80px; }
.pl-80  { padding-left: 80px; }
.pr-80  { padding-right: 80px; }
.px-80  { padding-left: 80px; padding-right: 80px; }
.py-80  { padding-top: 80px; padding-bottom: 80px; }

/* 90px */
.p-90   { padding: 90px; }
.pt-90  { padding-top: 90px; }
.pb-90  { padding-bottom: 90px; }
.pl-90  { padding-left: 90px; }
.pr-90  { padding-right: 90px; }
.px-90  { padding-left: 90px; padding-right: 90px; }
.py-90  { padding-top: 90px; padding-bottom: 90px; }

/* 100px */
.p-100   { padding: 100px; }
.pt-100 { padding-top: 100px; }
.pb-100 { padding-bottom: 100px; }
.pl-100 { padding-left: 100px; }
.pr-100 { padding-right: 100px; }
.px-100 { padding-left: 100px; padding-right: 100px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }

/* 120px */
.pt-120 { padding-top: 120px; }
.pb-120 { padding-bottom: 120px; }
.pl-120 { padding-left: 120px; }
.pr-120 { padding-right: 120px; }
.px-120 { padding-left: 120px; padding-right: 120px; }
.py-120 { padding-top: 120px; padding-bottom: 120px; }

/* 140px */
.pt-140 { padding-top: 140px; }
.pb-140 { padding-bottom: 140px; }
.pl-140 { padding-left: 140px; }
.pr-140 { padding-right: 140px; }
.px-140 { padding-left: 140px; padding-right: 140px; }
.py-140 { padding-top: 140px; padding-bottom: 140px; }

/* 160px */
.pt-160 { padding-top: 160px; }
.pb-160 { padding-bottom: 160px; }
.pl-160 { padding-left: 160px; }
.pr-160 { padding-right: 160px; }
.px-160 { padding-left: 160px; padding-right: 160px; }
.py-160 { padding-top: 160px; padding-bottom: 160px; }

/* 180px */
.pt-180 { padding-top: 180px; }
.pb-180 { padding-bottom: 180px; }
.pl-180 { padding-left: 180px; }
.pr-180 { padding-right: 180px; }
.px-180 { padding-left: 180px; padding-right: 180px; }
.py-180 { padding-top: 180px; padding-bottom: 180px; }

/* 200px */
.pt-200 { padding-top: 200px; }
.pb-200 { padding-bottom: 200px; }
.pl-200 { padding-left: 200px; }
.pr-200 { padding-right: 200px; }
.px-200 { padding-left: 200px; padding-right: 200px; }
.py-200 { padding-top: 200px; padding-bottom: 200px; }

/* ==================== 8. 交互/特效类 ==================== */
/* 8.1 鼠标手势 */
.pointer { cursor: pointer; }

/* 8.2 透明度 */
.opacity-0   { opacity: 0; }
.opacity-10  { opacity: 0.1; }
.opacity-20  { opacity: 0.2; }
.opacity-30  { opacity: 0.3; }
.opacity-40  { opacity: 0.4; }
.opacity-50  { opacity: 0.5; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }
.opacity-80  { opacity: 0.8; }
.opacity-90  { opacity: 0.9; }
.opacity-100 { opacity: 1; }


/* ==================== 2. 尺寸类（宽/高） ==================== */
/* 2.1 百分比宽高（%） */
/* 宽度（默认包含box-sizing） */
.w100  { width: 100%; box-sizing: border-box; }
.w95   { width: 95%;  box-sizing: border-box; }
.w90   { width: 90%;  box-sizing: border-box; }
.w85   { width: 85%;  box-sizing: border-box; }
.w80   { width: 80%;  box-sizing: border-box; }
.w75   { width: 75%;  box-sizing: border-box; }
.w70   { width: 70%;  box-sizing: border-box; }
.w65   { width: 65%;  box-sizing: border-box; }
.w60   { width: 60%;  box-sizing: border-box; }
.w55   { width: 55%;  box-sizing: border-box; }
.w50   { width: 50%;  box-sizing: border-box; }
.w45   { width: 45%;  box-sizing: border-box; }
.w40   { width: 40%;  box-sizing: border-box; }
.w35   { width: 35%;  box-sizing: border-box; }
.w30   { width: 30%;  box-sizing: border-box; }
.w25   { width: 25%;  box-sizing: border-box; }
.w20   { width: 20%;  box-sizing: border-box; }
.w15   { width: 15%;  box-sizing: border-box; }
.w10   { width: 10%;  box-sizing: border-box; }
.w5    { width: 5%;   box-sizing: border-box; }

/* 高度（百分比高度需父元素有明确高度才生效） */
.h100  { height: 100%; }
.h95   { height: 95%;  }
.h90   { height: 90%;  }
.h85   { height: 85%;  }
.h80   { height: 80%;  }
.h75   { height: 75%;  }
.h70   { height: 70%;  }
.h65   { height: 65%;  }
.h60   { height: 60%;  }
.h55   { height: 55%;  }
.h50   { height: 50%;  }
.h45   { height: 45%;  }
.h40   { height: 40%;  }
.h35   { height: 35%;  }
.h30   { height: 30%;  }
.h25   { height: 25%;  }
.h20   { height: 20%;  }
.h15   { height: 15%;  }
.h10   { height: 10%;  }
.h5    { height: 5%;   }

/* 自动宽高（CSS默认值） */
.w-auto { width: auto; }
.h-auto { height: auto; }

/* 2.2 固定像素宽高（px） */
/* 宽度 */
.w-10  { width: 10px; }  
.w-15  { width: 15px; }
.w-20  { width: 20px; }
.w-25  { width: 25px; }
.w-30  { width: 30px; }
.w-35  { width: 35px; }
.w-40  { width: 40px; }
.w-45  { width: 45px; }
.w-50  { width: 50px;  box-sizing: border-box; }
.w-80  { width: 80px;  box-sizing: border-box; }
.w-100 { width: 100px; box-sizing: border-box; }
.w-150 { width: 150px; box-sizing: border-box; }
.w-200 { width: 200px; box-sizing: border-box; }
.w-250 { width: 250px; box-sizing: border-box; }
.w-300 { width: 300px; box-sizing: border-box; }
.w-350 { width: 350px; box-sizing: border-box; }
.w-400 { width: 400px; box-sizing: border-box; }
.w-450 { width: 450px; box-sizing: border-box; }
.w-500 { width: 500px; box-sizing: border-box; }
.w-550 { width: 550px; box-sizing: border-box; }
.w-600 { width: 600px; box-sizing: border-box; }
.w-650 { width: 650px; box-sizing: border-box; }
.w-700 { width: 700px; box-sizing: border-box; }
.w-750 { width: 750px; box-sizing: border-box; }
.w-800 { width: 800px; box-sizing: border-box; }
.w-850 { width: 850px; box-sizing: border-box; }
.w-900 { width: 900px; box-sizing: border-box; }
.w-950 { width: 950px; box-sizing: border-box; }
.w-1000 { width: 1000px; box-sizing: border-box; }

/* 高度 */
.h-10  { height: 10px; }  
.h-15  { height: 15px; }
.h-20  { height: 20px; }
.h-25  { height: 25px; }
.h-30  { height: 30px; }
.h-35  { height: 35px; }
.h-40  { height: 40px; }
.h-45  { height: 45px; }
.h-50  { height: 50px; }
.h-55  { height: 55px; }
.h-60  { height: 60px; }
.h-65  { height: 65px; }
.h-70  { height: 70px; }
.h-75  { height: 75px; }
.h-80  { height: 80px; }
.h-85  { height: 85px; }
.h-90  { height: 90px; }
.h-95  { height: 95px; }
.h-100 { height: 100px; }
.h-105 { height: 105px; }
.h-110 { height: 110px; }
.h-115 { height: 115px; }
.h-120 { height: 120px; }
.h-125 { height: 125px; }
.h-130 { height: 130px; }
.h-135 { height: 135px; }
.h-140 { height: 140px; }
.h-145 { height: 145px; }
.h-150 { height: 150px; }
.h-155 { height: 155px; }
.h-160 { height: 160px; }
.h-165 { height: 165px; }
.h-170 { height: 170px; }
.h-175 { height: 175px; }
.h-180 { height: 180px; }
.h-185 { height: 185px; }
.h-190 { height: 190px; }
.h-195 { height: 195px; }
.h-200 { height: 200px; }
.h-205 { height: 205px; }
.h-210 { height: 210px; }
.h-215 { height: 215px; }
.h-220 { height: 220px; }
.h-225 { height: 225px; }
.h-230 { height: 230px; }
.h-235 { height: 235px; }
.h-240 { height: 240px; }
.h-245 { height: 245px; }
.h-250 { height: 250px; }
.h-255 { height: 255px; }
.h-260 { height: 260px; }
.h-265 { height: 265px; }
.h-270 { height: 270px; }
.h-275 { height: 275px; }
.h-280 { height: 280px; }
.h-285 { height: 285px; }
.h-290 { height: 290px; }
.h-295 { height: 295px; }
.h-300 { height: 300px; }
.h-305 { height: 305px; }
.h-310 { height: 310px; }
.h-315 { height: 315px; }
.h-320 { height: 320px; }
.h-325 { height: 325px; }
.h-330 { height: 330px; }
.h-335 { height: 335px; }
.h-340 { height: 340px; }
.h-345 { height: 345px; }
.h-350 { height: 350px; }
.h-355 { height: 355px; }
.h-360 { height: 360px; }
.h-365 { height: 365px; }
.h-370 { height: 370px; }
.h-375 { height: 375px; }
.h-380 { height: 380px; }
.h-385 { height: 385px; }
.h-390 { height: 390px; }
.h-395 { height: 395px; }
.h-400 { height: 400px; }
.h-405 { height: 405px; }
.h-410 { height: 410px; }
.h-415 { height: 415px; }
.h-420 { height: 420px; }
.h-425 { height: 425px; }
.h-430 { height: 430px; }
.h-435 { height: 435px; }
.h-440 { height: 440px; }
.h-445 { height: 445px; }
.h-450 { height: 450px; }
.h-455 { height: 455px; }
.h-460 { height: 460px; }
.h-465 { height: 465px; }
.h-470 { height: 470px; }
.h-475 { height: 475px; }
.h-480 { height: 480px; }
.h-485 { height: 485px; }
.h-490 { height: 490px; }
.h-495 { height: 495px; }
.h-500 { height: 500px; }