/* 搜索页的样式 */
.joe_archive {
    border-radius: var(--radius-wrap); /* 设置搜索页容器的圆角，使用变量 */
    /* padding: 0 15px; */ /* 注释掉的内边距，当前未生效 */
    background: transparent; /* 背景设置为透明 */
}

.joe_archive__title {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    color: var(--main-color); /* 文字颜色使用主色调变量 */
    margin-bottom: 20px; /* 底部外边距20px */
}

.joe_archive__title-icon {
    width: 20px; /* 图标宽度20px */
    height: 20px; /* 图标高度20px */
    min-width: 20px; /* 最小宽度20px，防止缩小 */
    min-height: 20px; /* 最小高度20px，防止缩小 */
    margin-right: 5px; /* 右侧外边距5px，与标题文字分隔 */
}

.joe_archive__title-title {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
}

.joe_archive__title-title .muted {
    color: var(--theme); /* 静默文字颜色使用主题色变量 */
    margin: 0 5px; /* 左右外边距5px，与周围元素分隔 */
}

.joe_archive__empty {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    flex-direction: column; /* 元素垂直排列 */
    padding: 50px 0; /* 上下内边距50px，左右0 */
    color: var(--routine); /* 文字颜色使用常规色变量 */
}

.joe_archive__empty-icon {
    margin-bottom: 30px; /* 底部外边距30px，与下方文字分隔 */
    fill: var(--routine); /* 图标填充颜色使用常规色变量 */
}