/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  min-height: 100vh;
}

/* 自定义过渡效果 */
.transition-custom {
  transition: all 0.2s ease-in-out;
}

/* 卡片样式 */
.card {
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
}

/* 占位图片样式 */
.placeholder-img {
  width: 100%;
  height: 256px; /* 调整为4:3比例 */
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 14px;
}

/* 状态标识样式 */
.card.border-l-4.border-green-500 {
  border-left: 4px solid #10b981;
}

.card.border-l-4.border-red-500 {
  border-left: 4px solid #ef4444;
}

/* 英文句子中的关键词高亮 */
.english-text b {
  color: #dc2626;
  font-weight: 600;
}

/* 搜索结果高亮样式 */
.highlight {
  background-color: #fef3c7;
  color: #92400e;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 3px;
}

/* 强制显示AI生成按钮 */
.ai-generate-btn {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 翻译切换动画 */
.english-text, .chinese-text {
  transition: opacity 0.2s ease-in-out;
}

.english-text.hidden, .chinese-text.hidden {
  display: none;
}

/* 按钮悬停效果 - 已删除，避免影响AI生成按钮 */

/* 图片导航箭头按钮样式 */
.card .absolute.left-2,
.card .absolute.right-2 {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.card .absolute.left-2:hover,
.card .absolute.right-2:hover {
  background-color: rgba(0, 0, 0, 0.8) !important;
  color: #ffffff !important;
}

/* 点赞按钮状态 - 使用自定义类名避免冲突 */
.ielts-like-active {
  color: #3b82f6 !important;
}

.ielts-dislike-active {
  color: #ef4444 !important;
}

/* 页面顶部标题区 */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.topbar h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #334155;
}

.topbar h2 i {
  color: #3B82F6;
  font-size: 1.5rem;
}

/* 右侧操作按钮样式 */
.topbar button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.topbar button:hover {
  background-color: #f8fafc;
}

/* 用户头像样式 */
#userAvatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e2e8f0;
}

/* 用户信息弹窗样式 */
#userProfilePopup {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  width: 384px; /* w-96 = 384px */
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  z-index: 50;
}

/* 移除hidden类的定义，改用内联样式控制显示 */

/* 关闭按钮相关样式已删除 */

/* AI生成模态框样式 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.readonly-input {
  background-color: #f9fafb !important;
  color: #6b7280 !important;
  cursor: not-allowed !important;
}

.form-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.confirm {
  background-color: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 20px;
}

.cost-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.cost-text {
  color: #d97706;
  font-weight: 500;
}

.remaining-text {
  color: #6b7280;
}

/* 生成结果样式 */
.generation-result {
  margin-top: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.result-header {
  background-color: #f9fafb;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.result-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.result-content {
  padding: 16px;
}

.result-content img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.result-info p {
  margin: 8px 0;
  font-size: 14px;
  color: #374151;
}

.result-info span {
  font-weight: 500;
  color: #1f2937;
}

/* 生成按钮加载状态 */
#genSubmit.loading {
  background-color: #9ca3af !important;
  cursor: not-allowed !important;
  position: relative;
}

#genSubmit.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 贡献询问区域样式 */
.contribution-section {
  margin-top: 20px;
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.contribution-question h5 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.contribution-hint {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

.contribution-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contribute-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.contribute-yes {
  background-color: #10b981;
  color: white;
}

.contribute-yes:hover {
  background-color: #059669;
  transform: translateY(-1px);
}

.contribute-no {
  background-color: #ef4444;
  color: white;
}

.contribute-no:hover {
  background-color: #dc2626;
  transform: translateY(-1px);
}

.contribute-later {
  background-color: #6b7280;
  color: white;
}

.contribute-later:hover {
  background-color: #4b5563;
  transform: translateY(-1px);
}

/* 贡献成功提示样式 */
.contribution-success {
  margin-top: 20px;
  padding: 16px;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
}

.success-message {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #166534;
  font-size: 14px;
  font-weight: 500;
}

.success-message i {
  color: #10b981;
  font-size: 16px;
}

/* 响应式设计 */
@media (min-width: 640px) {
  .contribution-actions {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .contribute-btn {
    flex: 1;
    max-width: 180px;
  }
}

/* 卡片层级管理 - 建立定位上下文 */
.card {
  position: relative !important;
  z-index: 1 !important;
  /* 确保卡片内容不会溢出，但允许按钮显示 */
  overflow: visible !important;
  /* 建立新的层叠上下文，限制子元素的z-index范围 */
  isolation: isolate !important;
}

/* AI生成按钮样式 - 严格限制在卡片内 */
.card button[onclick*="openAIModal"] {
  /* 层级管理：按钮相对于卡片定位，不会逃出卡片范围 */
  position: absolute !important;
  z-index: 2 !important; /* 在卡片内但低于弹窗 */
  top: 8px !important;
  right: 8px !important;
  
  /* 样式设置 */
  margin: 0 !important;
  padding: 8px !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #d1d5db !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
  display: block !important;
  visibility: visible !important;
  
  /* 确保按钮不会影响页面滚动 */
  transform: none !important;
}

.card button[onclick*="openAIModal"]:hover {
  background-color: rgba(255, 255, 255, 1) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* 卡片状态标识样式 - 位于整个卡片右下角 */
.card-status-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  color: white;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

/* 三种状态样式 */
.card-status-badge.approved {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.card-status-badge.rejected {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.card-status-badge.pending {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}


/* 兼容旧的贡献标识样式 */
.contribution-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  gap: 4px;
}

.contribution-badge i {
  font-size: 10px;
}

#userProfilePopup .p-4 {
  padding: 16px;
}

#userProfilePopup h3 {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  white-space: nowrap; /* 防止换行 */
}

#userProfilePopup .space-y-2 > * + * {
  margin-top: 8px;
}

#userProfilePopup .flex.justify-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#userProfilePopup .text-gray-600 {
  color: #6b7280;
  font-size: 14px;
}

#userProfilePopup .text-gray-900 {
  color: #111827;
  font-size: 14px;
}

#userProfilePopup button {
  width: 100%;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

#userProfilePopup button.bg-blue-500 {
  background-color: #3b82f6;
  color: white;
}

#userProfilePopup button.bg-blue-500:hover {
  background-color: #2563eb;
}

#userProfilePopup button.bg-gray-200 {
  background-color: #e5e7eb;
  color: #374151;
}

#userProfilePopup button.bg-gray-200:hover {
  background-color: #d1d5db;
}

#userProfilePopup .flex.gap-2 {
  display: flex;
  gap: 8px;
}

#userProfilePopup .flex-1 {
  flex: 1;
}

/* 个人数据链接样式 */
#userProfilePopup .flex.items-center.gap-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: #6b7280;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

#userProfilePopup .flex.items-center.gap-2:hover {
  color: #3b82f6;
}

#userProfilePopup .flex.items-center.gap-2 i {
  color: #9ca3af;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .topbar {
    padding: 8px 16px;
  }
  
  .topbar h2 {
    font-size: 1.1rem;
  }
  
  .topbar h2 i {
    font-size: 1.3rem;
  }
  
  /* 右侧操作区域在小屏幕上调整 */
  .topbar .flex.items-center.gap-4 {
    gap: 8px;
  }
  
  .topbar button {
    padding: 2px 6px;
    font-size: 0.8rem;
  }
  
  .topbar button span {
    display: none; /* 在小屏幕上隐藏文字，只显示图标 */
  }
  
  /* 用户头像调整 */
  #userAvatar {
    width: 28px;
    height: 28px;
  }
  
  /* 用户信息弹窗在小屏幕上调整 */
  #userProfilePopup {
    width: 280px;
    right: -10px;
  }
  
  #userProfilePopup .p-4 {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .topbar {
    padding: 6px 12px;
  }
  
  .topbar h2 {
    font-size: 1rem;
  }
  
  .topbar h2 i {
    font-size: 1.2rem;
  }
  
  /* 进一步压缩右侧操作区域 */
  .topbar .flex.items-center.gap-4 {
    gap: 4px;
  }
  
  .topbar button {
    padding: 1px 4px;
    font-size: 0.75rem;
  }
  
  /* 用户头像进一步调整 */
  #userAvatar {
    width: 24px;
    height: 24px;
  }
  
  /* 用户信息弹窗进一步调整 */
  #userProfilePopup {
    width: 260px;
    right: -20px;
  }
  
  #userProfilePopup .p-4 {
    padding: 10px;
  }
  
  #userProfilePopup h3 {
    font-size: 13px;
  }
  
  #userProfilePopup .text-gray-600,
  #userProfilePopup .text-gray-900 {
    font-size: 13px;
  }
  
  #userProfilePopup button {
    padding: 6px 12px;
    font-size: 13px;
  }
}
.dashboard {
  width: calc(100% - 10%);
  max-width: 1200px;
  background: #fff;
  border: 1px solid #eee;
  padding: 10px 12px;
  margin: 6px 0 10px 0;
  font-size: 0.95em;
}

/* 主内容区域 */
.main-content-area {
  padding: 0 20px;
}

/* 主内容区域 - 使用sticky定位后不需要额外的顶部间距 */
main {
  /* padding-top 已移除，因为sticky定位不会遮挡内容 */
  position: relative;
}

/* 搜索区 */
.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#searchBox {
  padding: 8px;
  width: 250px;
  text-align: left;
  font-size: 1em;
}

button {
  padding: 8px 16px;
  cursor: pointer;
  margin-left: 10px;  /* 搜索框和按钮间距 */
  font-size: 1em;
}

/* 重置卡片内按钮的margin，避免影响AI生成按钮位置 */
.card button {
  margin-left: 0;
}

/* 卡片区域 */
#results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center;  /* 卡片水平居中 */
  width: calc(100% - 10%); /* 左右各留 5% 空白 */
  max-width: 1200px;       /* 最大宽度限制 */
  margin-bottom: 40px;
}

/* 单个卡片样式 */
.result {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 360px;
  position: relative; /* 便于底部固定操作栏 */
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.result:hover {
  transform: scale(1.03);
}

/* 图片占卡片上部区域 - 固定高度适应4:3图片比例 */
.result img {
  display: block;
  width: 100%; /* 宽度占满容器 */
  height: 256px; /* 固定高度，适应4:3比例 */
  object-fit: contain; /* 保持图片比例，完整显示，避免裁剪 */
}

/* 文字区域占下方 1/4 */
.card-text {
  padding: 10px;
  text-align: left;
  font-size: 1em;
  line-height: 1.4em;
  background-color: #f9f9f9;
  cursor: pointer;  /* 鼠标悬停时显示为可点击 */
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 0 10px;
}
.audio-btn-inline {
  background: transparent;
  border: none;
  cursor: pointer;
}
.actions-bottom {
  position: absolute;
  bottom: 8px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.like-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.generate-icon {
  background: transparent;
  border: none;
  cursor: pointer;
}
.placeholder {
  background: #f1f1f1;
  width: 100%;
  height: 256px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
}

/* Modal - 确保在所有内容之上 */
.modal {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999 !important; /* 最高层级 */
  padding: 20px;
}
.modal-content {
  background: #fff;
  width: 480px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
  animation: modalSlideIn 0.3s ease-out;
  overflow-y: auto;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.modal-header span {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  gap: 12px;
}

.modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-body label {
  font-weight: 500;
  color: #374151;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
}

.modal-body select,
.modal-body input,
.modal-body textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.modal-body select:focus,
.modal-body input:focus,
.modal-body textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modal-body textarea {
  resize: vertical;
  min-height: 80px;
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: #374151;
}

.confirm {
  color: #6b7280;
  font-size: 13px;
  background: #f3f4f6;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}

#genSubmit,
#genCloseWindow {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex: 1;
}

#genSubmit:hover,
#genCloseWindow:hover {
  background: #2563eb;
}

.modal-footer button:first-child {
  background: #f3f4f6;
  color: #374151;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex: 1;
}

.modal-footer button:first-child:hover {
  background: #e5e7eb;
}

/* 初始状态下，中文隐藏 - 通过内联样式控制 */
.chinese-text {
  display: none !important;
}

/* 选中时显示中文，其他样式可以根据需要修改 */
.english-text {
  cursor: pointer;
}
.chinese-text {
  cursor: pointer;
}

/* 英文加粗效果 */
b {
  color: darkred;
}

/* 文章标题和来源 */
.source {
  font-size: 0.9em;
  color: gray;
  margin-bottom: 5px;
}

/* 昵称显示优化 - 确保横向布局 */
#userNickname {
  display: inline-block !important;
  white-space: nowrap !important;
}

#userNickname2 {
  white-space: nowrap !important;
}

/* 顶部栏按钮样式 - 纯展示文本，无交互效果 */

/* 登录弹窗 - 二维码和说明文字区域 */
.login-info-section {
  display: flex;
  align-items: stretch;
  gap: 16px;
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
  margin-top: 24px;
  min-height: 150px;
}

/* 二维码容器 */
.qr-code-container {
  flex-shrink: 0;
  width: 150px;
}

/* 二维码图片 */
.qr-code-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 文字容器 - 垂直布局，上75%下25% */
.info-text-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 主文案区域 - 占3/4 */
.info-main-text {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

/* 文案每一行 */
.info-line {
  color: #1f2937;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}

/* 底部协议说明区域 - 占1/4 */
.info-footer-text {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

/* 详细说明文字 */
.info-detail {
  color: #9ca3af;
  font-size: 11px;
  line-height: 1.4;
  margin: 0;
}

/* 移动端适配 - 小于640px时改为上下分布 */
@media (max-width: 640px) {
  .login-info-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    min-height: auto;
  }
  
  .qr-code-container {
    width: 120px;
  }
  
  .qr-code-image {
    width: 120px;
    height: 120px;
  }
  
  .info-text-container {
    align-items: center;
    width: 100%;
  }
  
  .info-main-text {
    gap: 6px;
  }
  
  .info-line {
    font-size: 14px;
  }
  
  .info-footer-text {
    margin-top: 8px;
    justify-content: center;
  }
}

/* 移动端适配 - 超小屏幕 */
@media (max-width: 480px) {
  .qr-code-container {
    width: 100px;
  }
  
  .qr-code-image {
    width: 100px;
    height: 100px;
  }
  
  .info-line {
    font-size: 13px;
  }
  
  .info-detail {
    font-size: 10px;
  }
}