/* ==================== 全局基础样式（原子类库） ==================== */
/* 设计原则：
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 {
    max-width: 100%; /* 图片自适应容器宽度 */
    vertical-align: middle; /* 消除图片底部默认空白间隙 */
    border: 0; /* 清除部分浏览器默认边框 */
}

/* ==================== 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-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; }

/* 高度 */
.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; }

/* ==================== 3. 文本排版类 ==================== */
/* 3.1 文本对齐 */
.text-l { text-align: left; }
.text-c { text-align: center; }
.text-r { text-align: right; }

/* 3.2 垂直对齐（行内/行内块元素） */
.align-t { vertical-align: top; }
.align-m { vertical-align: middle; }
.align-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 文本溢出省略号 */
/* 单行溢出 */
.single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 多行溢出（仅WebKit内核浏览器） */
.multi-line-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.multi-line-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* ==================== 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; } /* 转为块级元素 */

/* 4.5 弹性布局（Flex） */
.flex-center {
    display: flex;
    align-items: center;/* 垂直居中 */
    justify-content: center;/* 两端对齐 */
    flex-direction: column; /* 垂直列排列 */
}
.flex-middle {
    display: flex;
    align-items: center; /* 垂直居中 */
}
.flex-between {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
}
.flex-around {
    display: flex;
    justify-content: space-around; /* 均匀分布 */
}
.flex-column {
    display: flex;
    flex-direction: column; /* 垂直排列 */
}

/* 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; }

/* 中性灰度（分级：100-浅 → 700-深） */
.fc-gray-100 { color: #f5f7fa; }
.fc-gray-200 { color: #EBEBEB; }
.fc-gray-300 { color: #c9c9cc; }
.fc-gray-400 { color: #a9a9b3; }
.fc-gray-500 { color: #868690; }
.fc-gray-600 { color: #636366; }
.fc-gray-700 { color: #333333; }

.bg-gray-100 { background-color: #f5f7fa; }
.bg-gray-200 { background-color: #EBEBEB; }
.bg-gray-300 { background-color: #c9c9cc; }
.bg-gray-400 { background-color: #a9a9b3; }
.bg-gray-500 { background-color: #868690; }
.bg-gray-600 { background-color: #636366; }
.bg-gray-700 { background-color: #333333; }

/* 功能色（成功/警告/危险/信息） */
.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; }

/* 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-2      { border-radius: 2px; }        /* 小圆角 */
.border-radius-4      { border-radius: 4px; }        /* 常规圆角 */
.border-radius-8      { border-radius: 8px; }        /* 大圆角 */
.border-radius-12     { border-radius: 12px; }       /* 超大圆角 */
.border-radius-circle { border-radius: 50%; }        /* 圆形 */
.border-radius-half   { border-radius: 999px; }      /* 胶囊型 */

/* ==================== 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; }

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

/* 6.3 行高（px） */
/* 行高（line-height）原子类：5px 递增，覆盖 10px ~ 500px */
.lh-10  { line-height: 10px; }
.lh-15  { line-height: 15px; }
.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-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 */
.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 */
.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 */
.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 */
.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 */
.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 */
.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 */
.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 */
.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 */
.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 */
.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 */
.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-20  { opacity: 0.2; }
.opacity-50  { opacity: 0.5; }
.opacity-80  { opacity: 0.8; }
.opacity-100 { opacity: 1; }

/* 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); } /* 大阴影 */