.box-border {
    box-sizing: border-box;
}

/* Flex 布局相关 */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-1 {
    flex: 1 1 0%;
}

/* Margin 相关 */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: 0.25rem;
}

.m-2 {
    margin: 0.5rem;
}

.m-3 {
    margin: 1rem;
}

.m-4 {
    margin: 1.5rem;
}

.m-5 {
    margin: 3rem;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mt-5 {
    margin-top: 3rem;
}

.ml-auto {
    margin-left: auto;
}

.mt-auto {
    margin-top: auto;
}

.mb-auto {
    margin-bottom: auto;
}

.mr-auto {
    margin-right: auto;
}

/* 其他方向margin (mr, mb, ml) 和 padding (p, pt, pr, pb, pl) 同理 */
/* 这里省略类似代码，实际使用时建议补全 */

/* Padding 相关 */
.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 1rem;
}

.p-4 {
    padding: 1.5rem;
}

.p-5 {
    padding: 3rem;
}

/* 文本相关 */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.font-bold {
    font-weight: bold;
}

.font-normal {
    font-weight: normal;
}


/* 字体大小相关 */
.text-xs {
    font-size: 0.75rem;
    /* 12px */
}

.text-sm {
    font-size: 0.875rem;
    /* 14px */
}

.text-base {
    font-size: 1rem;
    /* 16px */
}

.text-lg {
    font-size: 1.125rem;
    /* 18px */
}

.text-xl {
    font-size: 1.25rem;
    /* 20px */
}

.text-2xl {
    font-size: 1.5rem;
    /* 24px */
}

.text-3xl {
    font-size: 1.875rem;
    /* 30px */
}

.text-4xl {
    font-size: 2.25rem;
    /* 36px */
}

.text-5xl {
    font-size: 3rem;
    /* 48px */
}

/* 固定像素值字体大小 */
.text-12 {
    font-size: 12px;
}

.text-14 {
    font-size: 14px;
}

.text-16 {
    font-size: 16px;
}

.text-18 {
    font-size: 18px;
}

.text-20 {
    font-size: 20px;
}

.text-24 {
    font-size: 24px;
}

.text-28 {
    font-size: 28px;
}

.text-32 {
    font-size: 32px;
}

.text-36 {
    font-size: 36px;
}

.text-40 {
    font-size: 40px;
}

.text-48 {
    font-size: 48px;
}

/* 高度相关 */
.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.h-auto {
    height: auto;
}

.h-1\/2 {
    height: 50%;
}

.h-1\/3 {
    height: 33.333333%;
}

.h-2\/3 {
    height: 66.666667%;
}

/* 固定高度值 */
.h-16 {
    height: 16px;
}

.h-20 {
    height: 20px;
}

.h-24 {
    height: 24px;
}

.h-32 {
    height: 32px;
}

.h-40 {
    height: 40px;
}

.h-48 {
    height: 48px;
}

.h-64 {
    height: 64px;
}

.h-80 {
    height: 80px;
}

.h-96 {
    height: 96px;
}

/* 最小/最大高度 */
.min-h-0 {
    min-height: 0;
}

.min-h-full {
    min-height: 100%;
}

.min-h-screen {
    min-height: 100vh;
}

.max-h-full {
    max-height: 100%;
}

.max-h-screen {
    max-height: 100vh;
}

/* 宽度相关 (补充现有宽度类) */
.w-1\/4 {
    width: 25%;
}

.w-3\/4 {
    width: 75%;
}

.w-1\/5 {
    width: 20%;
}

.w-2\/5 {
    width: 40%;
}

.w-3\/5 {
    width: 60%;
}

.w-4\/5 {
    width: 80%;
}

.w-screen {
    width: 100vw;
}

/* 宽度相关 */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.w-1\/2 {
    width: 50%;
}

.w-1\/3 {
    width: 33.333333%;
}

.w-2\/3 {
    width: 66.666667%;
}

.w-1\/4 {
    width: 25%;
}

.w-3\/4 {
    width: 75%;
}

.w-1\/5 {
    width: 20%;
}

.w-2\/5 {
    width: 40%;
}

.w-3\/5 {
    width: 60%;
}

.w-4\/5 {
    width: 80%;
}

.w-screen {
    width: 100vw;
}

/* 固定宽度值 */
.w-16 {
    width: 16px;
}

.w-20 {
    width: 20px;
}

.w-24 {
    width: 24px;
}

.w-32 {
    width: 32px;
}

.w-40 {
    width: 40px;
}

.w-48 {
    width: 48px;
}

.w-64 {
    width: 64px;
}

.w-80 {
    width: 80px;
}

.w-96 {
    width: 96px;
}

/* 最小/最大宽度 */
.min-w-0 {
    min-width: 0;
}

.min-w-full {
    min-width: 100%;
}

.max-w-full {
    max-width: 100%;
}

.max-w-screen {
    max-width: 100vw;
}

/* 显示相关 */
.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.hidden {
    display: none;
}

/* Grid 布局相关 */
.grid {
    display: grid;
}

.grid-flow-row {
    grid-auto-flow: row;
}

.grid-flow-col {
    grid-auto-flow: column;
}

.grid-flow-dense {
    grid-auto-flow: dense;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-none {
    grid-template-columns: none;
}

.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
}

.grid-rows-none {
    grid-template-rows: none;
}

/* 间距相关 - 基于rem单位 */
.gap-0 {
    gap: 0;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem;
}

.gap-4 {
    gap: 1.5rem;
}

.gap-5 {
    gap: 3rem;
}

/* 行间距 (row-gap) */
.row-gap-0 {
    row-gap: 0;
}

.row-gap-1 {
    row-gap: 0.25rem;
}

.row-gap-2 {
    row-gap: 0.5rem;
}

.row-gap-3 {
    row-gap: 1rem;
}

.row-gap-4 {
    row-gap: 1.5rem;
}

.row-gap-5 {
    row-gap: 3rem;
}

/* 列间距 (column-gap) */
.column-gap-0 {
    column-gap: 0;
}

.column-gap-1 {
    column-gap: 0.25rem;
}

.column-gap-2 {
    column-gap: 0.5rem;
}

.column-gap-3 {
    column-gap: 1rem;
}

.column-gap-4 {
    column-gap: 1.5rem;
}

.column-gap-5 {
    column-gap: 3rem;
}

/* 水平间距 (gap-x) */
.gap-x-0 {
    column-gap: 0;
}

.gap-x-1 {
    column-gap: 0.25rem;
}

.gap-x-2 {
    column-gap: 0.5rem;
}

.gap-x-3 {
    column-gap: 1rem;
}

.gap-x-4 {
    column-gap: 1.5rem;
}

.gap-x-5 {
    column-gap: 3rem;
}

/* 垂直间距 (gap-y) */
.gap-y-0 {
    row-gap: 0;
}

.gap-y-1 {
    row-gap: 0.25rem;
}

.gap-y-2 {
    row-gap: 0.5rem;
}

.gap-y-3 {
    row-gap: 1rem;
}

.gap-y-4 {
    row-gap: 1.5rem;
}

.gap-y-5 {
    row-gap: 3rem;
}

/* 行高相关 */
.lh-1 {
    line-height: 1;
}

.lh-1\.2 {
    line-height: 1.2;
}

.lh-1\.4 {
    line-height: 1.4;
}

.lh-1\.5 {
    line-height: 1.5;
}

.lh-1\.6 {
    line-height: 1.6;
}

.lh-1\.8 {
    line-height: 1.8;
}

.lh-2 {
    line-height: 2;
}

/* 固定值行高 */
.lh-16 {
    line-height: 16px;
}

.lh-20 {
    line-height: 20px;
}

.lh-24 {
    line-height: 24px;
}

.lh-28 {
    line-height: 28px;
}

.lh-32 {
    line-height: 32px;
}

.lh-40 {
    line-height: 40px;
}

.lh-48 {
    line-height: 48px;
}

/* 指针相关 */
.cursor-auto {
    cursor: auto;
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-wait {
    cursor: wait;
}

.cursor-text {
    cursor: text;
}

.cursor-move {
    cursor: move;
}

.cursor-help {
    cursor: help;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-none {
    cursor: none;
}

.cursor-context-menu {
    cursor: context-menu;
}

.cursor-progress {
    cursor: progress;
}

.cursor-cell {
    cursor: cell;
}

.cursor-crosshair {
    cursor: crosshair;
}

.cursor-vertical-text {
    cursor: vertical-text;
}

.cursor-alias {
    cursor: alias;
}

.cursor-copy {
    cursor: copy;
}

.cursor-no-drop {
    cursor: no-drop;
}

.cursor-grab {
    cursor: grab;
}

.cursor-grabbing {
    cursor: grabbing;
}

.cursor-all-scroll {
    cursor: all-scroll;
}

.cursor-col-resize {
    cursor: col-resize;
}

.cursor-row-resize {
    cursor: row-resize;
}

.cursor-n-resize {
    cursor: n-resize;
}

.cursor-e-resize {
    cursor: e-resize;
}

.cursor-s-resize {
    cursor: s-resize;
}

.cursor-w-resize {
    cursor: w-resize;
}

.cursor-ne-resize {
    cursor: ne-resize;
}

.cursor-nw-resize {
    cursor: nw-resize;
}

.cursor-se-resize {
    cursor: se-resize;
}

.cursor-sw-resize {
    cursor: sw-resize;
}

.cursor-ew-resize {
    cursor: ew-resize;
}

.cursor-ns-resize {
    cursor: ns-resize;
}

.cursor-nesw-resize {
    cursor: nesw-resize;
}

.cursor-nwse-resize {
    cursor: nwse-resize;
}

.cursor-zoom-in {
    cursor: zoom-in;
}

.cursor-zoom-out {
    cursor: zoom-out;
}

/* ... 现有代码 ... */

/* 边框宽度 */
.border-0 {
    border-width: 0;
}

.border-1 {
    border-width: 1px;
}

.border-2 {
    border-width: 2px;
}

.border-4 {
    border-width: 4px;
}

.border-8 {
    border-width: 8px;
}

/* 边框样式 */
.border-solid {
    border-style: solid;
}

.border-dashed {
    border-style: dashed;
}

.border-dotted {
    border-style: dotted;
}

.border-double {
    border-style: double;
}

.border-none {
    border-style: none;
}

/* 边框颜色 - 基础颜色 */
.border-transparent {
    border-color: transparent;
}

.border-current {
    border-color: currentColor;
}

.border-black {
    border-color: #000;
}

.border-white {
    border-color: #fff;
}

.border-gray {
    border-color: #9ca3af;
}

.border-red {
    border-color: #ef4444;
}

.border-blue {
    border-color: #3b82f6;
}

/* 圆角 */
.rounded-none {
    border-radius: 0;
}

.rounded-sm {
    border-radius: 0.125rem;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

/* 单边边框 */
.border-t-1 {
    border-top-width: 1px;
}

.border-r-1 {
    border-right-width: 1px;
}

.border-b-1 {
    border-bottom-width: 1px;
}

.border-l-1 {
    border-left-width: 1px;
}

/* 单边圆角 */
.rounded-t-none {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.rounded-r-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.rounded-b-none {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.rounded-l-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ... 现有代码 ... */

/* 文本颜色 */
.text-main {
    color: #CE3939;
}

.text-white {
    color: #fff;
}

.text-black {
    color: #000;
}

.text-gray {
    color: #9ca3af;
}

.text-red {
    color: #ef4444;
}

.text-blue {
    color: #3b82f6;
}

.text-green {
    color: #10b981;
}

.text-yellow {
    color: #f59e0b;
}

.text-indigo {
    color: #6366f1;
}

.text-purple {
    color: #8b5cf6;
}

.text-pink {
    color: #ec4899;
}

/* 背景颜色 */
.bg-main {
    background-color: #CE3939;
}

.bg-white {
    background-color: #fff;
}

.bg-black {
    background-color: #000;
}

.bg-gray {
    background-color: #9ca3af;
}

.bg-red {
    background-color: #ef4444;
}

.bg-blue {
    background-color: #3b82f6;
}

.bg-green {
    background-color: #10b981;
}

.bg-yellow {
    background-color: #f59e0b;
}

.bg-indigo {
    background-color: #6366f1;
}

.bg-purple {
    background-color: #8b5cf6;
}

.bg-pink {
    background-color: #ec4899;
}

/* 透明背景 */
.bg-transparent {
    background-color: transparent;
}

/* 背景透明度 */
.bg-opacity-50 {
    opacity: 0.5;
}

.bg-opacity-75 {
    opacity: 0.75;
}

.bg-opacity-90 {
    opacity: 0.9;
}


/* 定位相关 */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.static {
    position: static;
}

/* 定位偏移 - 基于rem单位 */
.top-0 {
    top: 0;
}

.top-1 {
    top: 0.25rem;
}

.top-2 {
    top: 0.5rem;
}

.top-3 {
    top: 1rem;
}

.top-4 {
    top: 1.5rem;
}

.top-5 {
    top: 3rem;
}

.right-0 {
    right: 0;
}

.right-1 {
    right: 0.25rem;
}

.right-2 {
    right: 0.5rem;
}

.right-3 {
    right: 1rem;
}

.right-4 {
    right: 1.5rem;
}

.right-5 {
    right: 3rem;
}

.bottom-0 {
    bottom: 0;
}

.bottom-1 {
    bottom: 0.25rem;
}

.bottom-2 {
    bottom: 0.5rem;
}

.bottom-3 {
    bottom: 1rem;
}

.bottom-4 {
    bottom: 1.5rem;
}

.bottom-5 {
    bottom: 3rem;
}

.left-0 {
    left: 0;
}

.left-1 {
    left: 0.25rem;
}

.left-2 {
    left: 0.5rem;
}

.left-3 {
    left: 1rem;
}

.left-4 {
    left: 1.5rem;
}

.left-5 {
    left: 3rem;
}

/* 百分比偏移 */
.top-1\/2 {
    top: 50%;
}

.top-1\/3 {
    top: 33.333333%;
}

.top-2\/3 {
    top: 66.666667%;
}

.right-1\/2 {
    right: 50%;
}

.right-1\/3 {
    right: 33.333333%;
}

.right-2\/3 {
    right: 66.666667%;
}

.bottom-1\/2 {
    bottom: 50%;
}

.bottom-1\/3 {
    bottom: 33.333333%;
}

.bottom-2\/3 {
    bottom: 66.666667%;
}

.left-1\/2 {
    left: 50%;
}

.left-1\/3 {
    left: 33.333333%;
}

.left-2\/3 {
    left: 66.666667%;
}

/* 全屏定位 */
.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.inset-x-0 {
    left: 0;
    right: 0;
}

.inset-y-0 {
    top: 0;
    bottom: 0;
}

/* 固定像素值偏移 */
.top-4px {
    top: 4px;
}

.top-8px {
    top: 8px;
}

.top-12px {
    top: 12px;
}

.top-16px {
    top: 16px;
}

/* z-index 相关 */
.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-3 {
    z-index: 3;
}

.z-4 {
    z-index: 4;
}

.z-5 {
    z-index: 5;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.z-auto {
    z-index: auto;
}