/* =========================================
   Markdown 展开折叠面板 (Details/Summary) 美化
   主题：粉蓝梦幻渐变
========================================= */

/* 1. 外层容器：重塑形状与阴影 */
.markdown-body details {
    border: 1px solid rgba(173, 216, 230, 0.4) !important; /* 浅蓝色边框 */
    border-radius: 12px !important; /* 圆润的边角 */
    margin: 12px 0 !important; /* 上下间距 */
    overflow: hidden !important; /* 确保内容不溢出圆角 */
    background-color: rgba(255, 255, 255, 0.6) !important; /* 半透明白色底色 */
    box-shadow: 0 4px 12px rgba(173, 216, 230, 0.15) !important; /* 柔和的粉蓝氛围阴影 */
    transition: all 0.3s ease !important; /* 平滑过渡 */
}

/* 2. 标题行 (点击区域)：粉蓝渐变与文字样式 */
.markdown-body summary {
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #FFE4E1 0%, #E0F7FA 100%) !important; /* 浅粉到浅蓝的渐变 */
    color: #2C3E50 !important; /* 深蓝灰色文字，确保对比度 > 4.5:1 */
    font-weight: 600 !important; /* 字体加粗突出层级 */
    cursor: pointer !important; /* 鼠标手型 */
    user-select: none !important; /* 防止双击选中文本 */
    outline: none !important; /* 移除点击时的默认轮廓 */
    display: flex !important;
    align-items: center !important;
    transition: background 0.3s ease, filter 0.3s ease !important;
}

/* 3. 悬停效果：增加亮度 */
.markdown-body summary:hover {
    filter: brightness(0.95) !important; /* 悬停时稍微加深，提供点击暗示 */
}

/* 4. 展开状态：为标题行底部添加分割线 */
.markdown-body details[open] summary {
    border-bottom: 1px dashed rgba(173, 216, 230, 0.8) !important; /* 展开后显示虚线分割 */
}

/* 5. 展开的内容区域：内边距与微调 */
.markdown-body details > *:not(summary) {
    padding: 12px 16px !important;
    margin: 0 !important; /* 移除内部元素的默认外边距，避免撑破容器 */
    color: #334155 !important; /* 内容文字颜色 */
}

/* （可选）自定义默认的三角形小箭头颜色 */
.markdown-body summary::marker {
    color: #87CEEB !important; /* 天蓝色箭头 */
}
/* 兼容 Webkit 浏览器的箭头伪元素 */
.markdown-body summary::-webkit-details-marker {
    color: #87CEEB !important;
}