/* ============================================================
   canvas-modules.css — CHEFSMART 编辑器 v7.202 · 画布共享样式层
   包含：画布（.canvas / .zc__canvas）基础样式、画布共享变量、
         V6 共享组件系统（区块/页眉/图片/布局/标签/表格/FAQ/文本等）、
         对接语样式（.v6-opening / .v6-quote-block，跨模块过渡语）、
         品牌签名、画布通用组件库（cv-* 系列）、
         配色预设覆盖样式（.preset-teal/.preset-gold/.preset-red，跨模块共享）
   模块专属样式已拆分至 styles/modules/m01.css ~ m10.css（v7.202）
   ============================================================ */

/* ============================================================
   CANVAS — 750px, V6 VI 设计系统
   ============================================================ */
.canvas, .zc__canvas {
  width: 750px;
  position: absolute; top: 0; left: 0;
  transform-origin: top left;
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding-top: 80px;
}

/* ── 画布模块容器 ── */
.cv-mod { position: relative; border-bottom: none; }
.cv-mod.hidden { display: none; }

/* 编辑器专用模块标签 */
.cv-mod-label {
  padding: 3px 14px;
  background: #FAFAFA;
  display: flex; align-items: center; gap: 5px;
  font-size: 7px; color: #CCC; letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid #F2F2F2;
}
.cv-mod-label-num {
  width: 12px; height: 12px;
  background: var(--cv-primary); color: #FFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 6px; font-weight: 700;
}

/* ── 画布共享设计变量 ── */
.cv-section {
  padding: 28px 24px;
}
.cv-section-title {
  font-size: 20px; font-weight: 700; color: #1A1A1A;
  margin-bottom: 2px; line-height: 1.3;
}
.cv-section-sub {
  font-size: 9px; color: #AAAAAA; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 16px;
}
.cv-divider {
  height: 0; border-top: 1px solid var(--cv-primary); margin: 16px 0;
}
.cv-divider-brand {
  height: 2px; background: var(--cv-primary); margin: 16px 0; width: 32px;
}

/* ============================================================
   V6 Section Layout System
   ============================================================ */
.v6-section {
  padding: 36px 44px;
  position: relative;
}
.v6-section-header {
  margin-bottom: 0;
}
.v6-module-header {
  margin-bottom: 20px;
  padding: 0;
  margin-left: 0;
}
.v6-header-top {
  display: flex;
  align-items: baseline;
  gap: 30px;
  margin: 0 0 0 0;
  padding: 0;
}
.v6-num {
  font-size: 240px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--cv-primary);
  text-rendering: geometricPrecision;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  flex-shrink: 0;
  margin-left: 0;
  padding-left: 0;
}
.v6-title {
  font-size: 48px;
  font-weight: 800;
  color: #000000;
  line-height: 1.15;
  letter-spacing: 1px;
  white-space: nowrap;
}
.v6-header-en {
  margin: 0;
  padding: 0;
}
.v6-subtitle {
  display: inline;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #000000;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  margin-right: 8px;
}
.v6-header-desc {
  display: inline;
  font-size: 12px;
  font-weight: 400;
  color: #1D1D1F;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  padding-left: 8px;
  max-width: 100%;
  box-sizing: border-box;
}
.v6-divider {
  height: 0; border-top: 1px solid var(--cv-primary);
  margin: 20px 0;
}
.v6-divider-brand {
  height: 2px; background: var(--cv-primary);
  margin: 20px 0; width: 40px;
}

/* ============================================================
   V6 Image System
   ============================================================ */
.v6-img, .cv__img {
  width: 100%; position: relative; overflow: hidden;
  background: #F5F5F5;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  max-height: 120px;
}
.v6-img-hero { aspect-ratio: 3/1; max-height: 100px; }
.v6-img-wide { aspect-ratio: 21/9; max-height: 100px; }
.v6-img-square { aspect-ratio: 1/1; height: 80px; }
.v6-img-portrait { aspect-ratio: 3/4; height: 100px; }
.v6-img-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; color: #C0C0C0;
  position: absolute; inset: 0; z-index: 2;
}
.v6-img-placeholder svg { opacity: 0.5; }
.v6-img-placeholder span {
  font-size: 10px; letter-spacing: 1px;
}
.v6-img img.v6-photo {
  width: 100%; height: 100%; object-fit: contain;
  position: absolute; inset: 0; z-index: 1;
}
.v6-img.has-photo .v6-img-placeholder { display: none; }

/* Hover overlay */
.v6-img-hover {
  display: none;
  position: absolute; inset: 0; z-index: 10;
  background: rgba(0,0,0,0.4);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  color: #FFF; font-size: 11px; font-weight: 500;
  letter-spacing: 1px;
}
.v6-img.has-photo:hover .v6-img-hover { display: flex; }
.v6-img:hover .v6-img-placeholder { color: var(--cv-primary); }
.v6-img-placeholder { color: #D1D5DB; }
.v6-img-placeholder svg { color: #D1D5DB; }
.v6-img:hover .v6-img-placeholder { color: var(--cv-primary); }

/* ============================================================
   V6 Layout Patterns
   ============================================================ */
.v6-lr {
  display: flex; gap: 0; align-items: stretch;
}
.v6-lr-left { flex-shrink: 0; }
.v6-lr-right { flex: 1; }
.v6-lr-33-67 .v6-lr-left { width: 33.33%; }
.v6-lr-33-67 .v6-lr-right { width: 66.67%; padding: 24px 28px; }
.v6-lr-67-33 .v6-lr-left { width: 66.67%; padding: 24px 28px; }
.v6-lr-67-33 .v6-lr-right { width: 33.33%; }
.v6-lr .v6-img { height: 100%; min-height: 0; max-height: none !important; }
.v6-lr { min-height: 160px; }
.v6-lr-left .v6-img, .v6-lr-right .v6-img { position: relative; }

/* Card grid */
.v6-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v6-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.v6-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* Stat card */
.v6-stat-card {
  padding: 20px 16px; text-align: center;
  background: #FAFAFA; border: 1px solid #F0F0F0;
}
.v6-stat-num {
  font-size: 24px; font-weight: 700;
  color: var(--cv-primary); line-height: 1;
}
.v6-stat-label {
  font-size: 11px; color: #9CA3AF; letter-spacing: 1px; margin-top: 6px;
}

/* Process step */
.v6-step {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #F5F5F5;
}
.v6-step:last-child { border-bottom: none; }
.v6-step-num {
  font-size: 28px; font-weight: 200;
  color: var(--cv-primary); opacity: 0.25; line-height: 1;
  flex-shrink: 0; width: 44px;
}
.v6-step-content { flex: 1; }
.v6-step-title {
  font-size: 14px; font-weight: 600; color: #1D1D1F;
  margin-bottom: 4px; line-height: 1.4;
}
.v6-step-desc {
  font-size: 12px; color: #4B5563; line-height: 1.8;
}

/* ── Quote block (legacy, hidden) ── */
.v6-quote { display: none; }

/* ============================================================
   V6 Person Block
   ============================================================ */
.v6-person {
  display: flex; align-items: stretch; gap: 32px;
  margin-bottom: 24px;
}
.v6-person .v6-avatar {
  width: 25%; min-width: 25%; flex-shrink: 0;
  background: linear-gradient(135deg, #e0d5cd, #d4c5b9);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #D1D5DB; position: relative; overflow: hidden;
}
.v6-person .v6-avatar svg { opacity: 0.5; width: 32px; height: 32px; }
.v6-person-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.v6-person-name {
  font-size: 28px; font-weight: 700; color: #1D1D1F;
  letter-spacing: 0.5px;
}
.v6-person-title {
  margin-top: 6px;
}
.v6-person-title .v6-tag {
  margin-right: 4px; margin-bottom: 0;
}
.v6-person-quote {
  font-size: 15px; font-weight: 500; line-height: 1.6;
  margin-top: 8px; padding-left: 18px;
  border-left: 3px solid #1D1D1F; color: #1D1D1F;
}
.v6-en-block {
  font-size: 11px; font-weight: 300; line-height: 1.6;
  color: rgba(0,0,0,0.3); margin-top: 8px;
  font-style: italic; letter-spacing: 0.3px;
}

/* Person-quote color presets */
.canvas:not(.preset-teal):not(.preset-gold):not(.preset-red) .v6-person-quote { border-left-color: #D1D5DB; }
.preset-teal .v6-person-quote { border-left-color: #0ABAB5; }
.preset-gold .v6-person-quote { border-left-color: #F37021; }
.preset-red .v6-person-quote { border-left-color: #DC2626; }

/* ============================================================
   V6 Tags / Badges / Price
   ============================================================ */
.v6-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--cv-primary-tint);
  color: var(--cv-tag-text);
  border: 1px solid var(--cv-tag-border);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.5px;
  margin-right: 6px; margin-bottom: 4px;
}
.v6-tag-outline {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--cv-tag-border);
  color: var(--cv-tag-text);
  font-size: 10px; font-weight: 500;
  margin-right: 6px; margin-bottom: 4px;
  background: transparent;
  letter-spacing: 0.5px;
}
.v6-price {
  font-size: 28px; font-weight: 800;
  color: var(--cv-primary); margin: 8px 0;
}
.v6-price-unit {
  font-size: 13px; font-weight: 400; color: #999;
}

/* ============================================================
   V6 Table
   ============================================================ */
.v6-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.v6-table th {
  background: #1D1D1F; color: #FFF;
  padding: 10px 14px; text-align: left;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.5px;
}
.v6-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #F0F0F0;
  color: #4B5563;
}
.v6-table tr:nth-child(even) td { background: #FAFAFA; }

/* ============================================================
   V6 FAQ
   ============================================================ */
.v6-faq { margin-bottom: 16px; }
.v6-faq:last-child { margin-bottom: 0; }
.v6-faq-q {
  font-size: 13px; font-weight: 600; color: #1D1D1F;
  margin-bottom: 6px; display: flex; align-items: flex-start; gap: 8px;
}
.v6-faq-q::before {
  content: 'Q'; display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  background: var(--cv-primary); color: #FFF;
  font-size: 10px; font-weight: 700;
}
.v6-faq-a {
  font-size: 12px; color: #555; line-height: 1.9;
  padding-left: 28px;
  border-left: 2px solid #F0F0F0;
  margin-left: 10px;
}

/* ============================================================
   V6 Promise / Feature Row
   ============================================================ */
.v6-promise {
  display: flex; gap: 8px;
  margin: 12px 0; width: 100%;
}
.v6-promise-item {
  flex: 1 1 0; min-width: 0;
  background: rgba(var(--cv-primary-rgb), 0.10);
  border: 1px solid #e5e5e5;
  padding: 16px;
  text-align: center;
}
.v6-promise-icon { font-size: 24px; color: var(--cv-primary); margin-bottom: 8px; }
.v6-promise-title { font-size: 12px; font-weight: 600; color: #1D1D1F; margin-bottom: 4px; }
.v6-promise-desc { font-size: 10px; color: #999; line-height: 1.5; }

/* ============================================================
   V6 Logistics Flow
   ============================================================ */
.v6-flow {
  display: flex; align-items: center; gap: 0;
  margin: 16px 0;
}
.v6-flow-step {
  flex: 1; text-align: center;
  padding: 16px 8px;
  position: relative;
}
.v6-flow-icon {
  width: 40px; height: 40px; margin: 0 auto 8px;
  background: var(--cv-primary-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--cv-primary);
}
.v6-flow-label { font-size: 11px; font-weight: 600; color: #1D1D1F; }
.v6-flow-arrow {
  width: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cv-primary); font-size: 16px;
}

/* ============================================================
   V6 Text Styles
   ============================================================ */
.v6-text {
  font-size: 12px; color: #4B5563; line-height: 2;
  font-weight: 600;
}
.v6-text-sm {
  font-size: 11px; color: #6B7280; line-height: 1.8;
}

/* V6 Info Row */
.v6-info-row {
  display: flex; gap: 0;
  border: 1px solid #F0F0F0; margin-top: 16px;
}
.v6-info-item {
  flex: 1; padding: 14px 10px; text-align: center;
  border-right: 1px solid #F0F0F0;
}
.v6-info-item:last-child { border-right: none; }
.v6-info-label {
  font-size: 9px; color: #AAA; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 4px;
}
.v6-info-val {
  font-size: 12px; font-weight: 600; color: #1D1D1F;
}

/* ============================================================
   V6 Quote Block (对接语)
   ============================================================ */
.v6-quote-block, .cv__quote-block {
  position: relative;
  padding: 32px 64px;
  background: var(--cv-primary-tint);
  border-radius: 0;
  margin: 0;
}
.v6-quote-block .cv-english {
  border-left: 3px solid #1D1D1F;
  padding-left: 16px;
  margin-top: 12px;
  max-width: 100%;
  box-sizing: border-box;
}
.v6-quote-block .v6-quote-text {
  font-size: 16px;
  line-height: 1.6;
  color: #1D1D1F;
  font-style: italic;
  margin-bottom: 16px;
}
.v6-quote-block .v6-quote-text:last-child {
  margin-bottom: 0;
}
.v6-quote-block[data-trans="closing"] {
  width: 100%;
  background: var(--cv-primary-tint);
  padding: 48px 64px;
  margin: 0;
}
.v6-quote-block .v6-quote-cite {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  color: #9CA3AF;
  font-style: normal;
  text-align: right;
}

/* ── English Decorative Text ── */
.cv-english {
  font-size: 10px;
  font-style: italic;
  color: #1D1D1F;
  line-height: 1.6;
  margin-top: 12px;
  letter-spacing: 0.5px;
  border-left: 3px solid #1D1D1F;
  padding-left: 16px;
}

/* ============================================================
   V6 Opening Section (开篇引导语)
   ============================================================ */
.v6-opening, .cv__opening {
  background: var(--cv-primary-tint);
  width: 100%;
  margin: 0;
  padding: 48px 64px;
  position: relative;
}
.v6-opening-inner { position: relative; }
.v6-opening-text {
  font-size: 14px;
  line-height: 1.6;
  color: #1D1D1F;
  font-style: italic;
}
.v6-opening-en {
  font-size: 10px;
  font-style: italic;
  color: #1D1D1F;
  line-height: 1.6;
  margin-top: 16px;
  letter-spacing: 0.5px;
  border-left: 3px solid #1D1D1F;
  padding-left: 16px;
  max-width: 100%;
  box-sizing: border-box;
}
.v6-closing-en {
  font-size: 10px;
  font-style: italic;
  color: #1D1D1F;
  line-height: 1.6;
  margin-top: 12px;
  letter-spacing: 0.5px;
  border-left: 3px solid #1D1D1F;
  padding-left: 16px;
  max-width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   Default Preset (黑白灰): 过渡语深色覆盖
   ============================================================ */
.canvas:not(.preset-teal):not(.preset-gold):not(.preset-red) .v6-quote-block[data-trans] {
  background: #000000 !important;
}
.canvas:not(.preset-teal):not(.preset-gold):not(.preset-red) .v6-opening {
  background: #000000 !important;
}
.canvas:not(.preset-teal):not(.preset-gold):not(.preset-red) .v6-quote-block[data-trans] .v6-quote-text {
  color: #FFFFFF !important;
}
.canvas:not(.preset-teal):not(.preset-gold):not(.preset-red) .v6-quote-block[data-trans] .cv-english {
  color: rgba(255,255,255,0.7) !important;
  border-left-color: rgba(255,255,255,0.6) !important;
  max-width: 100% !important;
}
.canvas:not(.preset-teal):not(.preset-gold):not(.preset-red) .v6-opening-text {
  color: #FFFFFF !important;
}
.canvas:not(.preset-teal):not(.preset-gold):not(.preset-red) .v6-opening-en {
  color: rgba(255,255,255,0.7) !important;
  border-left-color: rgba(255,255,255,0.6) !important;
  max-width: 100% !important;
}
.canvas:not(.preset-teal):not(.preset-gold):not(.preset-red) .v6-closing-en {
  color: rgba(255,255,255,0.7) !important;
  border-left-color: rgba(255,255,255,0.6) !important;
  max-width: 100% !important;
}
.canvas:not(.preset-teal):not(.preset-gold):not(.preset-red) .v6-quote-block[data-trans] .v6-quote-cite {
  color: rgba(255,255,255,0.5) !important;
}

/* Brand signature */
.cv-signature {
  padding: 32px 48px; text-align: center;
  background: #FFFFFF;
}
.cv-signature-brand {
  font-size: 16px; font-weight: 700; color: #1D1D1F;
  letter-spacing: 4px; margin-bottom: 4px;
}
.cv-signature-slogan {
  font-size: 10px; color: var(--cv-primary); letter-spacing: 2px;
  margin-bottom: 16px;
}
.cv-signature-line {
  width: 40px; height: 2px; background: var(--cv-primary);
  margin: 0 auto 16px;
}
.cv-signature-end {
  font-size: 11px; color: #999; line-height: 1.8;
}

/* ============================================================
   Canvas Image System (cv-img 系列)
   ============================================================ */
.cv-img {
  width: 100%; position: relative; overflow: hidden;
  background: #F5F5F5;
  display: flex; align-items: center; justify-content: center;
  color: #C8C8C8; font-size: 10px; letter-spacing: 1px;
}
.cv-img-hero {
  height: 100px;
  background: linear-gradient(180deg, #F8F8F8 0%, #EEEEEE 100%);
}
.cv-img-hero::after {
  content: ''; position: absolute;
  width: 80px; height: 80px;
  border: 1px solid #DDD; top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  opacity: 0.4;
}
.cv-img-square {
  height: 80px;
  background: #F5F5F5;
  border: 1px solid #EEEEEE;
  margin-bottom: 16px;
}
.cv-img-wide {
  height: 140px;
  background: linear-gradient(135deg, #F8F8F8 0%, #F0F0F0 100%);
  margin-bottom: 14px;
}
.cv-img-wide::before {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(transparent, rgba(0,0,0,0.03));
}
.cv-img-text {
  position: relative; z-index: 1;
  font-size: 9px; color: #C0C0C0; letter-spacing: 2px;
}

/* Image upload overlay */
.cv-img { cursor: pointer; }
.cv-img-upload-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
}
.cv-img-upload-btn {
  width: 36px; height: 36px;
  border: 2px dashed #C8C8C8; background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #B0B0B0; cursor: pointer;
  position: relative; z-index: 2;
}
.cv-img-upload-btn:hover {
  border-color: var(--cv-primary); color: var(--cv-primary);
}
.cv-img-upload-hint {
  font-size: 9px; color: #C0C0C0; letter-spacing: 1px;
  position: relative; z-index: 2;
}
.cv-img.has-image .cv-img-upload-overlay { display: none; }
.cv-img.has-image .cv-img-text { display: none; }
.cv-img.has-image::after { display: none; }
.cv-img.has-image::before { display: none; }
.cv-img img.cv-img-photo {
  width: 100%; height: 100%; object-fit: contain;
  position: absolute; inset: 0; z-index: 1;
}

/* Hover overlay for uploaded images */
.cv-img-actions {
  display: none;
  position: absolute; inset: 0; z-index: 10;
  background: rgba(0,0,0,0.45);
  align-items: center; justify-content: center; gap: 8px;
}
.cv-img.has-image:hover .cv-img-actions { display: flex; }
.cv-img-action-btn {
  padding: 5px 14px;
  background: rgba(255,255,255,0.92);
  color: var(--ui-text); font-size: 10px; font-weight: 600;
  border: none; cursor: pointer; letter-spacing: 0.5px;
}
.cv-img-action-btn:hover { background: #FFF; }
.cv-img-action-btn.danger { color: #CC0000; }

/* Canvas element selection */
.cv-selectable { cursor: pointer; position: relative; }
.cv-selectable.cv-selected {
  outline: 2px solid var(--cv-primary);
  outline-offset: 2px;
}

/* ============================================================
   Canvas Badges / Tags
   ============================================================ */
.cv-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--cv-primary);
  color: #FFFFFF;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.5px;
  margin-right: 6px; margin-bottom: 6px;
}
.cv-badge-outline {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--cv-primary);
  color: var(--cv-primary);
  background: transparent;
  font-size: 9px; font-weight: 500;
  margin-right: 6px; margin-bottom: 6px;
}

/* Canvas Person Card */
.cv-person {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.cv-person-avatar {
  width: 44px; height: 44px; flex-shrink: 0;
  background: #F0F0F0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #BBB;
  border: 1px solid #E8E8E8;
}
.cv-person-name {
  font-size: 14px; font-weight: 600; color: #1A1A1A;
  margin-bottom: 2px;
}
.cv-person-title {
  font-size: 10px; color: var(--cv-primary); font-weight: 500;
}

/* Canvas Quote */
.cv-quote {
  padding: 14px 18px;
  border-left: 3px solid var(--cv-primary);
  background: var(--cv-primary-tint);
  font-size: 13px; color: #333; line-height: 1.9;
  margin-bottom: 12px;
}

/* Canvas FAQ */
.cv-faq { margin-bottom: 16px; }
.cv-faq:last-child { margin-bottom: 0; }
.cv-faq-q {
  font-size: 13px; font-weight: 600; color: #1A1A1A;
  margin-bottom: 6px; display: flex; align-items: flex-start; gap: 6px;
}
.cv-faq-q::before {
  content: 'Q';
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  background: var(--cv-primary); color: #FFF;
  font-size: 9px; font-weight: 700;
}
.cv-faq-a {
  font-size: 12px; color: #555; line-height: 1.8;
  padding-left: 24px;
}

/* Recipe steps (legacy) */
.cv-recipe-steps { display: flex; flex-direction: column; gap: 12px; }
.cv-recipe-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #FAFAFA; border: 1px solid #F0F0F0; }
.cv-recipe-num { width: 28px; height: 28px; flex-shrink: 0; background: var(--cv-primary); color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.cv-recipe-content { flex: 1; }
.cv-recipe-title { font-size: 13px; font-weight: 600; color: #1A1A1A; margin-bottom: 3px; }
.cv-recipe-desc { font-size: 11px; color: #888; line-height: 1.6; }

/* ============================================================
   Canvas Stats
   ============================================================ */
.cv-stats-row { display: flex; gap: 0; margin: 20px 0; border: 1px solid #F0F0F0; }
.cv-stat { flex: 1; padding: 16px 8px; text-align: center; border-right: 1px solid #F0F0F0; }
.cv-stat:last-child { border-right: none; }
.cv-stat-num { font-size: 28px; font-weight: 700; color: var(--cv-primary); line-height: 1; margin-bottom: 4px; }
.cv-stat-unit { font-size: 11px; color: var(--cv-primary); font-weight: 600; }
.cv-stat-label { font-size: 9px; color: #999; letter-spacing: 1px; margin-top: 2px; }

/* Detail block (m07-m13) */
.cv-detail-block { margin-bottom: 16px; }
.cv-detail-icon { width: 36px; height: 36px; background: var(--cv-primary-tint); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--cv-primary); margin-bottom: 12px; }
.cv-detail-text { font-size: 12px; color: #555; line-height: 1.9; }

/* Selling points (m01) */
.cv-features { display: flex; gap: 10px; margin-top: 20px; }
.cv-feature { flex: 1; padding: 14px 10px; text-align: center; background: #FAFAFA; border: 1px solid #F0F0F0; }
.cv-feature-icon { font-size: 18px; margin-bottom: 6px; color: var(--cv-primary); }
.cv-feature-title { font-size: 11px; font-weight: 600; color: #1A1A1A; margin-bottom: 3px; }
.cv-feature-desc { font-size: 9px; color: #999; line-height: 1.5; }

/* Product info row (m01) */
.cv-info-row { display: flex; gap: 0; border: 1px solid #F0F0F0; margin-top: 16px; }
.cv-info-item { flex: 1; padding: 12px 10px; text-align: center; border-right: 1px solid #F0F0F0; }
.cv-info-item:last-child { border-right: none; }
.cv-info-label { font-size: 9px; color: #AAA; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.cv-info-val { font-size: 12px; font-weight: 600; color: #1A1A1A; }

/* Price block */
.cv-price { font-size: 24px; font-weight: 700; color: var(--cv-primary); margin: 8px 0; }
.cv-price-unit { font-size: 12px; font-weight: 400; color: #999; }

/* Logistics tags */
.cv-logistics { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cv-logi-tag { padding: 6px 14px; background: var(--cv-primary-tint); color: var(--cv-primary-dark); font-size: 11px; font-weight: 600; border: 1px solid rgba(10,186,181,0.15); }

/* ============================================================
   PRESET OVERRIDES — 青/银/红: Nike "白色大字 + 黑色小字"
   ============================================================ */

/* Core Nutrition */
.canvas.preset-teal .nike-core-nutrition,
.canvas.preset-gold .nike-core-nutrition,
.canvas.preset-red .nike-core-nutrition { background: #fff; }
.canvas.preset-teal .nike-core-nutrition .nike-section-label,
.canvas.preset-gold .nike-core-nutrition .nike-section-label,
.canvas.preset-red .nike-core-nutrition .nike-section-label { color: rgba(0,0,0,0.4); }
.canvas.preset-teal .nike-core-item,
.canvas.preset-gold .nike-core-item,
.canvas.preset-red .nike-core-item { border-color: rgba(0,0,0,0.1); }
.canvas.preset-teal .nike-core-item:nth-child(odd),
.canvas.preset-gold .nike-core-item:nth-child(odd),
.canvas.preset-red .nike-core-item:nth-child(odd) { border-right-color: rgba(0,0,0,0.15); }
.canvas.preset-teal .nike-core-num,
.canvas.preset-gold .nike-core-num,
.canvas.preset-red .nike-core-num { color: #000; }
.canvas.preset-teal .nike-core-unit,
.canvas.preset-teal .nike-core-name,
.canvas.preset-gold .nike-core-unit,
.canvas.preset-gold .nike-core-name,
.canvas.preset-red .nike-core-unit,
.canvas.preset-red .nike-core-name { color: #000; }

/* Basic Nutrition */
.canvas.preset-teal .nike-basic-nutrition,
.canvas.preset-gold .nike-basic-nutrition,
.canvas.preset-red .nike-basic-nutrition { background: #fff; }
.canvas.preset-teal .nike-basic-nutrition .nike-section-label,
.canvas.preset-gold .nike-basic-nutrition .nike-section-label,
.canvas.preset-red .nike-basic-nutrition .nike-section-label { color: rgba(0,0,0,0.4); }
.canvas.preset-teal .nike-basic-item,
.canvas.preset-gold .nike-basic-item,
.canvas.preset-red .nike-basic-item { border-color: rgba(0,0,0,0.1); }
.canvas.preset-teal .nike-basic-num,
.canvas.preset-gold .nike-basic-num,
.canvas.preset-red .nike-basic-num { color: #000; }
.canvas.preset-teal .nike-basic-unit,
.canvas.preset-teal .nike-basic-name,
.canvas.preset-gold .nike-basic-unit,
.canvas.preset-gold .nike-basic-name,
.canvas.preset-red .nike-basic-unit,
.canvas.preset-red .nike-basic-name { color: #000; }

/* M02 Recommended Groups */
.canvas.preset-teal .nike-rec-en,
.canvas.preset-gold .nike-rec-en,
.canvas.preset-red .nike-rec-en { color: #000 !important; }
.canvas.preset-teal .nike-rec-desc,
.canvas.preset-gold .nike-rec-desc,
.canvas.preset-red .nike-rec-desc { color: var(--cv-primary-dark) !important; }

/* M03 Data Stats */
.canvas.preset-teal .m03-data-stats,
.canvas.preset-gold .m03-data-stats,
.canvas.preset-red .m03-data-stats { background: #fff; }
.canvas.preset-teal .m03-data-stats .nike-section-label,
.canvas.preset-gold .m03-data-stats .nike-section-label,
.canvas.preset-red .m03-data-stats .nike-section-label { color: rgba(0,0,0,0.4); }
.canvas.preset-teal .m03-data-stats .nike-data-num,
.canvas.preset-gold .m03-data-stats .nike-data-num,
.canvas.preset-red .m03-data-stats .nike-data-num { color: #000; }
.canvas.preset-teal .m03-data-stats .nike-data-label,
.canvas.preset-gold .m03-data-stats .nike-data-label,
.canvas.preset-red .m03-data-stats .nike-data-label { color: rgba(0,0,0,0.4); }
.canvas.preset-teal .m03-data-stats .nike-data-item:first-child,
.canvas.preset-gold .m03-data-stats .nike-data-item:first-child,
.canvas.preset-red .m03-data-stats .nike-data-item:first-child { border-right-color: rgba(0,0,0,0.15); }

/* M03 Scene Cards */
.canvas.preset-teal .nike-scene-en,
.canvas.preset-gold .nike-scene-en,
.canvas.preset-red .nike-scene-en { color: #000; }
.canvas.preset-teal .nike-scene-desc,
.canvas.preset-gold .nike-scene-desc,
.canvas.preset-red .nike-scene-desc { color: var(--cv-primary-dark); }