/* details 标签样式 - 添加背景颜色加深效果 */
details {
  background-color: rgba(0, 0, 0, 0.03);
  padding: 0 16px;
  margin: 10px 0;
  border-radius: 6px;
  border-left: 3px solid rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease;
}

details:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

details summary {
  cursor: pointer;
  font-weight: 500;
  outline: none;
  user-select: none;
  padding: 4px 0;
  line-height: 1.6;
}

details[open] summary {
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* details 展开后的内容区域 */
details[open] {
  padding-bottom: 12px;
}

/* 暗色模式下的样式 */
@media (prefers-color-scheme: dark) {
  details {
    background-color: rgba(255, 255, 255, 0.05);
    border-left-color: rgba(255, 255, 255, 0.15);
  }

  details:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

/* 适配主题暗色模式 */
[data-user-color-scheme="dark"] details {
  background-color: rgba(255, 255, 255, 0.05);
  border-left-color: rgba(255, 255, 255, 0.15);
}

[data-user-color-scheme="dark"] details:hover {
  background-color: rgba(255, 255, 255, 0.08);
}