/* ============================================================================
   食谱详情（表格版）
   数据中心是给自己看的，重点是「一眼看清 + 方便改」，不是模拟手机。
   ============================================================================ */
.rd-form { display: block; }
.rd-page { max-width: 1100px; }

.rd-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.rd-head small { font-size: 11px; letter-spacing: .1em; color: var(--soft, #70848a); text-transform: uppercase; }
.rd-head h2 { font-size: 22px; margin: 4px 0 2px; color: var(--ink, #123343); }
.rd-sub { font-size: 12.5px; color: var(--soft, #70848a); }
.rd-head-actions { display: flex; gap: 10px; flex-shrink: 0; }

.rd-sec {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; font-weight: 700; color: var(--ink, #123343);
  margin: 22px 0 9px;
}
.rd-sec:first-of-type { margin-top: 0; }
.rd-sec-n { font-size: 11.5px; font-weight: 400; color: var(--soft, #70848a); }

/* ---- 表格 ---- */
.rd-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--line, #dfe7e5); border-radius: 12px; overflow: hidden;
  font-size: 13px; table-layout: fixed;
}
.rd-table th, .rd-table td {
  padding: 10px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid #f1f5f4; color: var(--ink, #123343);
  word-break: break-word;
}
.rd-table tr:last-child th, .rd-table tr:last-child td { border-bottom: none; }
.rd-table thead th {
  background: #f8faf9; font-size: 11.5px; font-weight: 700;
  color: var(--soft, #70848a); white-space: nowrap; border-bottom: 1px solid var(--line, #dfe7e5);
}

/* 基本信息：标签窄、内容宽 */
.rd-cols4 th { width: 90px; background: #f8faf9; font-weight: 700; font-size: 12px; color: #4a5c62; white-space: nowrap; }
.rd-cols4 td { width: auto; }
.rd-cols4 th:empty, .rd-cols4 td:empty { background: transparent; }

/* 用料 / 做法 */
.rd-materials .rd-num, .rd-steps .rd-num { width: 56px; }
.rd-materials th:nth-child(2) { width: 40%; }
.rd-steps .rd-shot { width: 130px; }
.rd-op { width: 76px; }
.rd-num { color: var(--soft, #70848a); font-variant-numeric: tabular-nums; }
.rd-amount { font-variant-numeric: tabular-nums; }
.rd-none { color: #a8b4b8; font-size: 12px; }
.rd-table td.rd-none { text-align: center; padding: 22px; }

.rd-shot img {
  width: 110px; height: 78px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line, #dfe7e5); display: block; background: #f4f1ea;
}
a .rd-shot, .rd-shot a { display: block; }

/* 表格里的输入框：贴着格子，不显得笨 */
.rd-table input, .rd-table textarea, .rd-table select {
  width: 100%; box-sizing: border-box; padding: 7px 9px;
  border: 1px solid var(--line, #dfe7e5); border-radius: 8px;
  font: inherit; font-size: 12.5px; color: var(--ink, #123343); background: #fff;
  resize: vertical;
}
.rd-table input:focus, .rd-table textarea:focus, .rd-table select:focus {
  outline: 2px solid rgba(223, 112, 64, .28); border-color: var(--orange, #df7040);
}
.rd-cols4 td input, .rd-cols4 td select { max-width: 260px; }

.rd-del {
  border: 1px solid #f0c8bc; background: #fff7f4; color: #c0503a;
  border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.rd-del:hover { background: #ffece6; }
.rd-add { margin-top: 9px; }

.rd-hint { font-size: 11.5px; color: var(--soft, #70848a); margin-top: 8px; }

/* ---- 封面 ---- */
.rd-cover-wrap { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.rd-cover {
  width: 300px; max-width: 100%; border-radius: 12px; display: block;
  border: 1px solid var(--line, #dfe7e5); background: #f4f1ea;
}
.rd-cover-empty {
  height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: #a8b4b8; font-size: 12.5px; border-style: dashed;
}
.rd-cover-pick { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--soft, #70848a); min-width: 260px; }
.rd-cover-pick select {
  padding: 8px 10px; border: 1px solid var(--line, #dfe7e5); border-radius: 9px;
  font: inherit; font-size: 12.5px; color: var(--ink, #123343); background: #fff;
}

/* ---- 底部状态条 ---- */
.rd-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 24px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line, #dfe7e5); border-radius: 12px;
  font-size: 12.5px; color: var(--soft, #70848a);
}

@media (max-width: 720px) {
  .rd-cover { width: 100%; }
  .rd-cols4 th { width: 74px; }
  .rd-steps .rd-shot { width: 92px; }
  .rd-shot img { width: 78px; height: 58px; }
}