.spoiler {
    margin: 25px 0;
    padding: 18px;
    border: 1px solid #4CAF50; /* 细绿色边框 */
    background: #EEF3FC; /* 整体背景色 */
    position: relative;
    clear: both;
    border-radius: 10px; /* 圆角优化 */
    transition: all 0.4s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); /* 默认轻微阴影 */
    overflow: hidden; /* 防止边界溢出 */
}

/* 标题部分 */
.spoiler .spoiler-title {
    margin: 0 -18px;
    padding: 12px 18px;
    color: #2c3e50;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s, background 0.3s;
    border-radius: 6px;
}

/* 标题悬停时变化 */
.spoiler .spoiler-title:hover {
    color: #007bff;
}

/* 默认箭头 */
.spoiler .spoiler-title:before {
    content: "▶";
    margin-right: 10px;
    transition: transform 0.3s ease-in-out;
}

/* 展开时箭头变向 */
.spoiler.expanded .spoiler-title:before {
    content: "▼";
    transform: rotate(90deg);
}

/* 默认折叠状态，隐藏内容 */
.spoiler .spoiler-content {
    display: none;  /* 默认隐藏 */
    padding: 12px;
    margin-top: 10px;
    background: #EEF3FC; /* 保持统一的浅灰蓝色 */
    border-radius: 0 0 10px 10px; /* 让底部圆角更自然 */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.08); /* 添加内阴影，增强层次 */
}

/* 展开时内容显示 */
.spoiler.expanded .spoiler-content {
    display: block !important;
    padding: 15px;
    background: #EEF3FC; /* 保持整体背景一致 */
    border-radius: 0 0 10px 10px;
}

/* 折叠和展开的区别 */
.spoiler.collapsed {
    padding: 10px;
    border: 1px solid #4CAF50; /* 细绿色镶边 */
}

.spoiler.expanded {
    background: #EEF3FC;
    border: 1px solid #4CAF50;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 展开时阴影加深，制造悬浮感 */
}