/* 基础样式 - 不经常修改的部分 */

/* 布局样式 */
#__next {
    min-height: 100%;
    overflow-x: hidden;
}

.relative {
    position: relative;
}

.flex {
    display: flex;
}

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

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

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

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

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

/* margin-left classes */
.ml-1 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

/* 修改ml-3类定义为0.5rem */
.ml-3 {
    margin-left: 0.5rem;
}

/* 添加ml-4类定义为1rem */
.ml-4 {
    margin-left: 1rem;
}

.ml-5 {
    margin-left: 1.25rem;
}

.ml-6 {
    margin-left: 1.5rem;
}

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

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

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

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

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

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

/* margin-right classes */
.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mr-5 {
    margin-right: 1.25rem;
}

.mr-6 {
    margin-right: 1.5rem;
}

/* margin-bottom classes */
.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

/* margin classes */
.m-1 {
    margin: 0.25rem;
}

.m-2 {
    margin: 0.5rem;
}

.m-3 {
    margin: 0.75rem;
}

.m-4 {
    margin: 1rem;
}

.m-5 {
    margin: 1.25rem;
}

.m-6 {
    margin: 1.5rem;
}

/* padding-left classes */
.pl-1 {
    padding-left: 0.25rem;
}

.pl-2 {
    padding-left: 0.5rem;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pl-5 {
    padding-left: 1.25rem;
}

.pl-6 {
    padding-left: 1.5rem;
}

/* padding-top classes */
.pt-1 {
    padding-top: 0.25rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

/* padding-right classes */
.pr-1 {
    padding-right: 0.25rem;
}

.pr-2 {
    padding-right: 0.5rem;
}

.pr-3 {
    padding-right: 0.75rem;
}

.pr-4 {
    padding-right: 1rem;
}

.pr-5 {
    padding-right: 1.25rem;
}

.pr-6 {
    padding-right: 1.5rem;
}

/* padding-bottom classes */
.pb-1 {
    padding-bottom: 0.25rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pb-5 {
    padding-bottom: 1.25rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

/* padding classes */
.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.container {
    width: 100%;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
    border-top-width: calc(1px * (1 - var(--tw-space-x-reverse)));
}

.divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(249 250 251 / var(--tw-divide-opacity));
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-3xl {
    font-size: 2rem;
    line-height: 2.5rem;
}

.font-medium {
    font-weight: 500;
}

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

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.max-w-7xl {
    max-width: 80rem;
}

.cursor-pointer {
    cursor: pointer;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.align-middle {
    vertical-align: middle;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 确保行高一致性 */
.line-height-1 {
    line-height: 1;
}

/* 表格显示方式对齐 */
.display-table-cell {
    display: table-cell;
    vertical-align: middle;
}

.display-block {
    display: block;
    margin: auto;
}

/* Grid布局对齐 */
.grid-cols-auto-1fr {
    grid-template-columns: auto 1fr;
}

.items-center-gap-2 {
    gap: 0.5rem;
}

/* 网格布局：响应式卡片网格系统 */
.grid.grid-cols-1.gap-4 {
    /* 基础网格设置：1列布局 */
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /* 卡片间距：0.75rem */
    gap: 0.75rem;
    /* 网格底部外边距：0.1rem */
    margin-bottom: 0.1rem;
    /* 宽度设置：100% */
    width: 100%;
}

/* 响应式断点设置：根据浏览器窗口宽度调整网格列数 */
/* 小屏幕浏览器窗口：1列布局 */
@media (max-width: 575px) {
    .grid.grid-cols-1.gap-4 {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* 中小屏幕浏览器窗口：2列布局 */
@media (min-width: 576px) and (max-width: 767px) {
    .grid.grid-cols-1.gap-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }
}

/* 中等屏幕浏览器窗口：3列布局 */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid.grid-cols-1.gap-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem;
    }
}

/* 大屏幕浏览器窗口：4列布局 */
@media (min-width: 1024px) and (max-width: 1199px) {
    .grid.grid-cols-1.gap-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.7rem;
    }
}

/* 超大屏幕浏览器窗口：5列布局 */
@media (min-width: 1200px) and (max-width: 1599px) {
    .grid.grid-cols-1.gap-4 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

/* 超大屏幕浏览器窗口：6列布局 */
@media (min-width: 1600px) {
    .grid.grid-cols-1.gap-4 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.8rem;
    }
}

/* 响应式设计：针对不同浏览器窗口尺寸的适配样式 */

/* 小屏幕浏览器窗口（≤575px） */
@media (max-width: 575px) {
    .side-bar {
        width: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto; /* 确保内容可滚动 */
    }
    
    .side-bar.active {
        transform: translateX(0);
        width: 14rem;
        overflow-y: auto; /* 确保内容可滚动 */
    }
    
    .main-container {
        margin-left: 0;
        width: 100%;
    }
    
    .search-box {
        margin: 0.25rem;
        padding: 1rem;
    }
    
    .search-bar {
        height: 2.5rem;
    }
    
    .text-3xl {
        font-size: 1.5rem;
        line-height: 1.75rem;
    }
}

/* 中小屏幕浏览器窗口（576px-767px） */
@media (min-width: 576px) and (max-width: 767px) {
    .side-bar {
        width: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto; /* 确保内容可滚动 */
    }
    
    .side-bar.active {
        transform: translateX(0);
        width: 14rem;
        overflow-y: auto; /* 确保内容可滚动 */
    }
    
    .main-container {
        margin-left: 0;
        width: 100%;
    }
    
    .search-box {
        margin: 0.5rem;
        padding: 1.25rem;
    }
    
    .text-3xl {
        font-size: 1.75rem;
        line-height: 2rem;
    }
}

/* 平板浏览器窗口（768px-1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
    .side-bar {
        width: 12rem;
    }
    
    .main-container {
        margin-left: 12rem;
        width: calc(100% - 12rem);
    }
    
    .search-box {
        margin: 0.75rem;
        padding: 1.5rem;
    }
}

/* 平板横屏/小桌面浏览器窗口（1024px-1199px） */
@media (min-width: 1024px) and (max-width: 1199px) {
    .side-bar {
        width: 13rem;
    }
    
    .main-container {
        margin-left: 13rem;
        width: calc(100% - 13rem);
    }
    
    .search-box {
        margin: 0.8rem;
        padding: 1.75rem;
    }
}

/* 桌面浏览器窗口（1200px-1599px） */
@media (min-width: 1200px) and (max-width: 1599px) {
    .text-3xl {
        font-size: 2.25rem;
        line-height: 2.75rem;
    }
}