/* ========================================
   暧昧色主题 - Details卡片美化样式
   适用平台：风月对话平台
   作用域：仅 <details> 标签内部
======================================== */

/* 基础卡片容器 */
details {
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%) !important;
  border: 2px solid transparent !important;
  border-radius: 16px !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  box-shadow: 
    0 8px 32px rgba(255, 105, 180, 0.15),
    0 0 0 1px rgba(255, 182, 193, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  background-image: 
    linear-gradient(135deg, #000000 0%, #0a0a0a 100%),
    linear-gradient(90deg, #ff69b4 0%, #da70d6 50%, #ee82ee 100%) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  isolation: isolate !important;
}

details:hover {
  box-shadow: 
    0 12px 48px rgba(255, 105, 180, 0.25),
    0 0 0 1px rgba(255, 182, 193, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* 折叠标题栏 */
details summary {
  background: linear-gradient(135deg, rgba(255, 105, 180, 0.12) 0%, rgba(218, 112, 214, 0.08) 100%) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 16px 20px !important;
  cursor: pointer !important;
  border-radius: 14px !important;
  list-style: none !important;
  user-select: none !important;
  position: relative !important;
  transition: all 0.25s ease !important;
}

details summary::-webkit-details-marker {
  display: none !important;
}

details summary::before {
  content: '▶' !important;
  position: absolute !important;
  left: 20px !important;
  color: #ff69b4 !important;
  font-size: 12px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

details[open] summary::before {
  transform: rotate(90deg) !important;
}

details summary {
  padding-left: 44px !important;
}

details summary:hover {
  background: linear-gradient(135deg, rgba(255, 105, 180, 0.18) 0%, rgba(218, 112, 214, 0.12) 100%) !important;
  color: #ffb6c1 !important;
}

/* 展开内容区 */
details > *:not(summary) {
  background: #000000 !important;
  color: #ffffff !important;
  padding: 20px 24px !important;
  border-radius: 0 0 14px 14px !important;
  line-height: 1.8 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 表格样式 */
details table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 12px !important;
  background: transparent !important;
}

details table th,
details table td {
  color: #ffffff !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 105, 180, 0.2) !important;
  text-align: left !important;
  background: transparent !important;
}

details table th {
  background: linear-gradient(135deg, rgba(255, 105, 180, 0.15) 0%, rgba(218, 112, 214, 0.1) 100%) !important;
  font-weight: 600 !important;
  color: #ffb6c1 !important;
}

details table tr:hover {
  background: rgba(255, 105, 180, 0.05) !important;
}

/* 文本内容 */
details p,
details ul,
details li,
details div,
details span,
details strong {
  color: #ffffff !important;
  background: transparent !important;
}

details strong {
  color: #ffb6c1 !important;
  font-weight: 600 !important;
}

details hr {
  border: none !important;
  border-top: 1px solid rgba(255, 105, 180, 0.3) !important;
  margin: 16px 0 !important;
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
  details,
  details summary,
  details summary::before {
    transition: none !important;
  }
  
  details:hover {
    transform: none !important;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  details {
    margin-bottom: 16px !important;
    border-radius: 12px !important;
  }
  
  details summary {
    font-size: 15px !important;
    padding: 14px 18px 14px 40px !important;
  }
  
  details > *:not(summary) {
    padding: 16px 18px !important;
  }
  
  details table th,
  details table td {
    padding: 8px 10px !important;
    font-size: 14px !important;
  }
}