/* ═══════════════════════════════════════════════════
   🌸 青梅竹马的恋爱花店 — Details 状态栏主题
   作用域：仅 #customized-answer-content 内的 details
   ═══════════════════════════════════════════════════ */

/* ── 正文区域：黑底白字 ── */
#customized-answer-content .markdown-body {
  color: #ffffff !important;
  background: #000000 !important;
}

/* ── Details 卡片间距 ── */
#customized-answer-content details {
  margin-bottom: 18px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 183, 197, 0.35) !important;
  box-shadow: 0 2px 12px rgba(255, 183, 197, 0.15),
              0 0 20px rgba(183, 228, 199, 0.08) !important;
  background: #1a1a1a !important;
  font-family: "Hiragino Sans", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif !important;
}

/* 最后一个details去掉底部多余间距 */
#customized-answer-content details:last-of-type {
  margin-bottom: 0 !important;
}

/* ── Summary 标题栏：樱粉花瓣渐变 ── */
#customized-answer-content details summary {
  background: linear-gradient(135deg, #FFB7C5 0%, #F8A4B8 40%, #f4c2c2 70%, #fce4ec 100%) !important;
  color: #2C2C2C !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid rgba(255, 143, 171, 0.4) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
  position: relative !important;
}

/* 隐藏默认三角 */
#customized-answer-content details summary::-webkit-details-marker {
  display: none !important;
}

/* Summary 前置花朵装饰 */
#customized-answer-content details summary::before {
  content: "🌸" !important;
  margin-right: 8px !important;
  font-size: 15px !important;
  filter: drop-shadow(0 0 3px rgba(255, 183, 197, 0.6)) !important;
}

/* Summary 尾部展开指示箭头 */
#customized-answer-content details summary::after {
  content: "❯" !important;
  margin-left: auto !important;
  font-size: 12px !important;
  color: #c4687a !important;
  transition: transform 0.3s ease !important;
  display: inline-block !important;
}

/* 展开时箭头旋转 */
#customized-answer-content details[open] summary::after {
  transform: rotate(90deg) !important;
}

/* Summary 悬浮效果 */
#customized-answer-content details summary:hover {
  background: linear-gradient(135deg, #ffc8d6 0%, #FFB7C5 40%, #f8cdd5 70%, #fff0f3 100%) !important;
  box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.3) !important;
}

/* 展开时 summary 底边变为嫩绿点缀 */
#customized-answer-content details[open] summary {
  border-bottom: 2px solid rgba(143, 206, 162, 0.6) !important;
}

/* ── 内容区：深色花房 ── */
#customized-answer-content details > :not(summary) {
  color: #f0e6ef !important;
}

/* 内容区内边距（通过限定details内部的段落/列表等） */
#customized-answer-content details p,
#customized-answer-content details ul,
#customized-answer-content details ol,
#customized-answer-content details table {
  color: #f0e6ef !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  line-height: 1.75 !important;
  font-size: 13px !important;
}

/* 加粗关键词：玫瑰金 */
#customized-answer-content details strong {
  color: #f4a9b8 !important;
  font-weight: 700 !important;
}

/* 斜体文字：薄荷绿 */
#customized-answer-content details em {
  color: #a8e6cf !important;
  font-style: italic !important;
}

/* ── 分割线：花茎渐变 ── */
#customized-answer-content details hr {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #8fcea2 20%, 
    #FFB7C5 50%, 
    #8fcea2 80%, 
    transparent 100%) !important;
  margin: 14px 16px !important;
  opacity: 0.7 !important;
}

/* ── 表格样式（记忆区用） ── */
#customized-answer-content details table {
  width: calc(100% - 32px) !important;
  border-collapse: collapse !important;
  margin: 8px 16px !important;
  font-size: 12px !important;
}

#customized-answer-content details th {
  background: linear-gradient(135deg, #3d2b35 0%, #4a2f3d 100%) !important;
  color: #FFB7C5 !important;
  font-weight: 700 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 183, 197, 0.25) !important;
  text-align: left !important;
  font-size: 12px !important;
}

#customized-answer-content details td {
  padding: 7px 10px !important;
  border: 1px solid rgba(255, 183, 197, 0.15) !important;
  color: #e8dce6 !important;
  background: rgba(26, 26, 26, 0.6) !important;
  font-size: 12px !important;
}

/* 表格奇偶行微妙区分 */
#customized-answer-content details tr:nth-child(even) td {
  background: rgba(255, 183, 197, 0.05) !important;
}

/* 表格悬浮行高亮 */
#customized-answer-content details tr:hover td {
  background: rgba(255, 183, 197, 0.12) !important;
}

/* ── 列表样式（行动推荐/讯息等） ── */
#customized-answer-content details li {
  color: #f0e6ef !important;
  padding: 3px 0 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

/* 无序列表自定义标记 */
#customized-answer-content details ul li::marker {
  color: #FFB7C5 !important;
}

/* 有序列表标记 */
#customized-answer-content details ol li::marker {
  color: #a8e6cf !important;
  font-weight: 700 !important;
}

/* ── 各卡片个性化顶部色条 ── */

/* 第1个details（主角信息）：樱粉 */
#customized-answer-content details:nth-of-type(1) {
  border-top: 3px solid #FFB7C5 !important;
}

/* 第2个details（NPC信息）：玫瑰红 */
#customized-answer-content details:nth-of-type(2) {
  border-top: 3px solid #e8829b !important;
}

/* 第3个details（爱恋度面板）：珊瑚粉 */
#customized-answer-content details:nth-of-type(3) {
  border-top: 3px solid #ff7f8e !important;
}

/* 第4个details（手机讯息&漫涂动态）：薄荷绿 */
#customized-answer-content details:nth-of-type(4) {
  border-top: 3px solid #8fcea2 !important;
}

/* 第5个details（记忆区）：薰衣草紫 */
#customized-answer-content details:nth-of-type(5) {
  border-top: 3px solid #c5a3cf !important;
}

/* 第6个details（行动推荐）：暖金 */
#customized-answer-content details:nth-of-type(6) {
  border-top: 3px solid #f0c27f !important;
}

/* ── 各卡片 Summary 前置图标个性化 ── */
#customized-answer-content details:nth-of-type(1) summary::before {
  content: "🌸" !important;
}
#customized-answer-content details:nth-of-type(2) summary::before {
  content: "🌹" !important;
}
#customized-answer-content details:nth-of-type(3) summary::before {
  content: "💗" !important;
}
#customized-answer-content details:nth-of-type(4) summary::before {
  content: "📱" !important;
}
#customized-answer-content details:nth-of-type(5) summary::before {
  content: "🧠" !important;
}
#customized-answer-content details:nth-of-type(6) summary::before {
  content: "🎯" !important;
}

/* ── 链接样式 ── */
#customized-answer-content details a {
  color: #f4a9b8 !important;
  text-decoration: underline dotted rgba(244, 169, 184, 0.4) !important;
  transition: color 0.2s ease !important;
}

#customized-answer-content details a:hover {
  color: #FFB7C5 !important;
  text-decoration: underline solid #FFB7C5 !important;
}

/* ── 行内代码 ── */
#customized-answer-content details code {
  background: rgba(255, 183, 197, 0.12) !important;
  color: #f8cdd5 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

/* ── 移动端适配 ── */
@media (max-width: 768px) {
  #customized-answer-content details {
    margin-bottom: 14px !important;
    border-radius: 10px !important;
  }

  #customized-answer-content details summary {
    padding: 9px 12px !important;
    font-size: 13px !important;
  }

  #customized-answer-content details p,
  #customized-answer-content details ul,
  #customized-answer-content details ol {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 12.5px !important;
  }

  #customized-answer-content details table {
    font-size: 11px !important;
    margin: 6px 12px !important;
    width: calc(100% - 24px) !important;
  }

  #customized-answer-content details th,
  #customized-answer-content details td {
    padding: 6px 8px !important;
  }
}

/* ── 动效降级 ── */
@media (prefers-reduced-motion: reduce) {
  #customized-answer-content details summary,
  #customized-answer-content details summary::after,
  #customized-answer-content details a {
    transition: none !important;
  }
}