/* M23-A：电商详情页（三件套）—— 只加这一张页自己的样式；其余全部复用 tools_scene /
 * tools_main_detail / tools_queue 的现成类，别在这里另造一套视觉。 */

/* 顶部三个模式 tab（只开第一个，另外两个占位置灰） */
.dt-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}

.dt-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
}

.dt-tab.is-active {
  border-color: var(--brand-strong, #5BC85A);
  background: var(--brand-soft, rgba(113,220,104,.14));
  color: var(--brand-strong, #5BC85A);
  font-weight: 600;
}

.dt-tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dt-tab-badge {
  padding: 1px 6px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-weight: 400;
}

/* 长图提示（长宽比 > 3:1 才出现） */
.dt-longhint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #fdba74;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
  line-height: 1.5;
  flex-wrap: wrap;
}

.dt-longhint .tc-btn {
  margin-left: auto;
}

/* 结果区：详情页图可能是长图 —— 卡片里限高 + 留白，别把整页撑到几千像素 */
#dtResult .md-card img {
  max-height: 320px;
  object-fit: contain;
  background: #fff;
}

/* 任务卡里的结果图：照 M22-B 对主图详情做的那套（不套的话 2K 原图会把卡片撑爆） */
#dtTasks .ts-task-grid .tc-img-box img {
  max-height: 300px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

#dtTasks .ts-task-grid .tc-img-box {
  min-height: 0;
}

/* M23-B：灵感智造的 Section 列表 */
.dt-sec-type {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--brand-soft, rgba(113,220,104,.14));
  color: var(--brand-strong, #5BC85A);
  font-size: 11px;
}

.dt-sec-goal {
  margin-left: 8px;
  color: #6b7280;
  font-size: 12px;
}

.dt-sec-copy {
  margin: 6px 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: #f9fafb;
  color: #374151;
  font-size: 12px;
  line-height: 1.5;
}