/* ═══ CHEFSMART v6.0 — Canva 风格设计系统 ═══ */

/* ═══ RESET & BASE ═══ */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background:#F5F7FA;
  color:#111827;
  font-size:14px;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}

/* ═══ DESIGN TOKENS ═══ */
:root{
  --color-bg:#F5F7FA;
  --color-surface:#FFFFFF;
  --color-primary:#0ABAB5;
  --color-primary-hover:#089E99;
  --color-primary-light:#E6F7F6;
  --color-primary-ring:rgba(10,186,181,0.1);
  --color-success:#0ABAB5;
  --color-warning:#F59E0B;
  --color-error:#EF4444;
  --color-text:#111827;
  --color-text-secondary:#6B7280;
  --color-text-tertiary:#9CA3AF;
  --color-border:#E5E7EB;
  --color-border-hover:#D1D5DB;
  --radius-card:12px;
  --radius-btn:8px;
  --radius-input:8px;
  --radius-sm:6px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.12);
  --topbar-h:56px;
}

/* ═══ BUTTONS ═══ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--radius-btn);
  font-size:13px;font-weight:500;cursor:pointer;
  border:none;transition:all .15s;white-space:nowrap;
}
.btn-primary{background:var(--color-primary);color:#fff;}
.btn-primary:hover{background:var(--color-primary-hover);}
.btn-outline{background:#fff;color:var(--color-primary);border:1px solid var(--color-border);}
.btn-outline:hover{border-color:var(--color-primary);background:var(--color-primary-light);}
.btn-ghost{background:transparent;color:var(--color-text-secondary);border:1px solid transparent;}
.btn-ghost:hover{color:var(--color-text);background:#F9FAFB;border-color:var(--color-border);}

/* ═══ TOPBAR ═══ */
.topbar{
  height:var(--topbar-h);flex-shrink:0;
  display:flex;align-items:center;
  padding:0 20px;
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  z-index:100;
}
.topbar-left{display:flex;align-items:center;gap:12px;}
.brand-header{display:flex;flex-direction:column;align-items:stretch;gap:4px;user-select:none;white-space:nowrap;}
.brand-title-line{display:flex;align-items:baseline;gap:0;width:100%;}
.brand-name{font-size:17px;font-weight:800;letter-spacing:3px;color:#0ABAB5;line-height:1.2;}
.brand-sep{font-size:15px;color:#D1D5DB;margin:0 8px;font-weight:300;line-height:1;}
.brand-product{font-size:14px;font-weight:600;color:var(--color-text);letter-spacing:0.5px;line-height:1.2;}
.brand-sub-line{display:flex;align-items:center;gap:0;font-size:11px;color:var(--color-text-tertiary);font-weight:400;justify-content:space-between;width:100%;}
.brand-edition{font-weight:500;}
.brand-pipe{margin:0 7px;color:#D1D5DB;font-size:10px;}
.brand-version{font-weight:600;font-size:11px;}
.brand-ai-status{display:inline-flex;align-items:center;gap:3px;}
.brand-ai-status .ai-dot{display:inline-block;width:6px;height:6px;border-radius:50%;}
.brand-ai-status .ai-label{font-size:10px;font-weight:500;}
.brand-ai-config{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:500;color:var(--color-text-tertiary);cursor:pointer;opacity:.65;transition:opacity .15s,color .15s;}
.brand-ai-config:hover{opacity:1;color:#0ABAB5;}
.version-badge{font-size:10px;font-weight:600;color:var(--color-text-tertiary);background:#F3F4F6;padding:2px 8px;border-radius:10px;}
.topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto;}

/* AI Status in topbar */
.ai-status{display:flex;align-items:center;gap:6px;padding:5px 12px;background:#F9FAFB;border:1px solid var(--color-border);border-radius:20px;font-size:12px;white-space:nowrap;}
.ai-dot{width:8px;height:8px;border-radius:50%;background:#0ABAB5;box-shadow:0 0 6px rgba(10,186,181,.4);transition:all .4s;}
.ai-dot.offline{background:#EF4444;box-shadow:0 0 6px rgba(239,68,68,.4);}
.ai-label{font-weight:600;color:var(--color-text-secondary);}
.ai-progress{width:40px;height:3px;background:#E5E7EB;border-radius:2px;overflow:hidden;}
.ai-progress-fill{height:100%;width:100%;background:var(--color-success);border-radius:2px;transition:width 1s linear;}
.ai-countdown{font-size:10px;color:var(--color-text-tertiary);font-family:'SF Mono',monospace;min-width:36px;}

/* Auto-save indicator */
.auto-save-indicator{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--color-text-tertiary);}
.save-dot{width:6px;height:6px;border-radius:50%;background:var(--color-success);}
.save-dot.saving{background:var(--color-warning);animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ═══ WORKSPACE (四栏布局) ═══ */
.workspace{
  flex:1;display:flex;overflow:hidden;
}

/* ═══ 第一栏：图标导航栏 ═══ */
.icon-sidebar{
  width:72px;min-width:72px;
  background:var(--color-surface);
  border-right:1px solid var(--color-border);
  display:flex;flex-direction:column;
  overflow-y:auto;flex-shrink:0;
}
.icon-sidebar::-webkit-scrollbar{width:3px;}
.icon-sidebar::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:2px;}

.nav-section{display:flex;flex-direction:column;gap:2px;padding:8px 6px;}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 4px;border-radius:var(--radius-sm);
  cursor:pointer;transition:all .15s;position:relative;
  border-left:3px solid transparent;
  color:var(--color-text-secondary);
}
.nav-item:hover{background:#F9FAFB;color:var(--color-text);}
.nav-item.active{background:var(--color-primary-light);color:var(--color-primary);border-left-color:var(--color-primary);}
.nav-item span{font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap !important;min-width:0;}

.nav-divider{height:1px;background:var(--color-border);margin:4px 10px;}

/* Module list in sidebar */
.module-list{flex:1;padding:4px 6px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.module-item{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;border-radius:var(--radius-sm);
  cursor:pointer;transition:all .15s;
  font-size:11px;color:var(--color-text-secondary);
  position:relative;
}
.module-item:hover{background:#F9FAFB;color:var(--color-text);}
.module-item.selected{background:var(--color-primary-light);color:var(--color-primary);font-weight:600;}
.module-item.dragging{opacity:0.4;}
.module-item.drag-over{border-top:2px solid var(--color-primary);}
.module-checkbox{
  width:16px;height:16px;border:1.5px solid var(--color-border-hover);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;transition:all .15s;background:#fff;
}
.module-checkbox.checked{background:var(--color-primary);border-color:var(--color-primary);}
.module-checkbox.checked::after{content:'';display:block;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-1px;}
.module-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.module-drag-handle{
  width:14px;height:14px;cursor:grab;color:var(--color-text-tertiary);
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;
}
.module-item:hover .module-drag-handle{opacity:1;}

/* ═══ 第二栏：内容编辑区 ═══ */
.content-area{
  width:320px;min-width:320px;
  background:var(--color-surface);
  border-right:1px solid var(--color-border);
  display:flex;flex-direction:column;
  overflow:hidden;flex-shrink:0;
}
.content-tabs{
  display:flex;border-bottom:1px solid var(--color-border);
  background:var(--color-surface);flex-shrink:0;
}
.content-tabs .tab,.content-tabs .ct-btn{
  flex:1;padding:12px 8px;border:none;background:transparent;
  cursor:pointer;font-size:13px;color:var(--color-text-secondary);
  font-weight:500;border-bottom:2px solid transparent;
  transition:all .2s;text-align:center;
}
.content-tabs .tab.active,.content-tabs .ct-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary);}
.content-tabs .tab:hover:not(.active),.content-tabs .ct-btn:hover:not(.active){background:#F9FAFB;color:var(--color-text);}

.content-body{
  flex:1;overflow-y:auto;padding:16px;
}
.content-body::-webkit-scrollbar{width:4px;}
.content-body::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:2px;}

/* Form elements */
.form-group{margin-bottom:14px;}
.form-label{font-size:12px;color:var(--color-text-secondary);margin-bottom:4px;display:flex;align-items:center;gap:4px;font-weight:500;}
.form-label .req{color:var(--color-error);font-size:10px;}
.form-label .ai-tag{font-size:9px;font-weight:600;color:var(--color-primary);border:1px solid var(--color-primary);border-radius:3px;padding:0 4px;line-height:1.5;}
.form-input,.form-textarea{
  width:100%;padding:10px 12px;
  border:1px solid var(--color-border);border-radius:var(--radius-input);
  font-size:13px;color:var(--color-text);background:#FAFBFC;
  outline:none;font-family:inherit;transition:all .15s;
}
.form-input:focus,.form-textarea:focus{
  border-color:var(--color-primary);background:#fff;
  box-shadow:0 0 0 3px var(--color-primary-ring);
}
.form-textarea{resize:vertical;min-height:80px;line-height:1.6;}
.form-input-sm{padding:6px 8px;font-size:12px;}
.form-row{display:flex;gap:6px;align-items:center;}
.form-row .form-input{flex:1;}
.form-hint{font-size:10px;color:var(--color-text-tertiary);margin-top:4px;}

/* Delete button in forms */
.form-del-btn{
  width:24px;height:24px;border:none;background:transparent;
  color:var(--color-text-tertiary);cursor:pointer;font-size:14px;
  border-radius:var(--radius-sm);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;transition:all .15s;
}
.form-del-btn:hover{color:var(--color-error);background:#FEF2F2;}

/* Add button */
.form-add-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 12px;border:1px dashed var(--color-border);
  background:transparent;color:var(--color-text-secondary);
  font-size:12px;cursor:pointer;border-radius:var(--radius-btn);
  margin-top:6px;transition:all .15s;
}
.form-add-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light);}

/* Section header in content area */
.section-header{
  display:flex;align-items:center;gap:8px;
  padding:12px 0;margin-bottom:12px;
  border-bottom:1px solid var(--color-border);
}
.section-header .section-icon{
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:var(--color-primary-light);color:var(--color-primary);
  display:flex;align-items:center;justify-content:center;
}
.section-header .section-title{font-size:15px;font-weight:700;color:var(--color-text);}
.section-header .section-subtitle{font-size:11px;color:var(--color-text-tertiary);}

/* Upload area */
.upload-area{
  border:1px dashed var(--color-border);border-radius:var(--radius-card);
  padding:16px;text-align:center;cursor:pointer;
  background:#FAFBFC;transition:all .2s;
}
.upload-area:hover{border-color:var(--color-primary);background:var(--color-primary-light);}
.upload-area .upload-text{font-size:12px;color:var(--color-text-tertiary);}

/* Image list */
.img-list{margin-top:8px;display:flex;flex-direction:column;gap:4px;}
.img-item{display:flex;align-items:center;gap:6px;padding:4px 6px;background:#F9FAFB;border-radius:var(--radius-sm);}
.img-item img{width:36px;height:36px;object-fit:cover;border-radius:4px;}

/* ═══ 第三栏：预览区 ═══ */
.preview-area{
  flex:1;min-width:400px;
  display:flex;flex-direction:column;
  background:#F0F2F5;position:relative;overflow:hidden;
}
.preview-toolbar{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  z-index:10;
}
.preview-toolbar .zoom-controls{
  display:flex;flex-direction:row;align-items:center;gap:2px;
  background:#fff;border:1px solid var(--color-border);border-radius:14px;
  padding:6px 8px;box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.zoom-controls{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--color-border);border-radius:20px;padding:4px 10px;flex-wrap:nowrap;}
.device-switcher{display:flex;gap:4px;}




.zoom-controls{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--color-border);border-radius:20px;padding:4px 10px;flex-wrap:nowrap;}
.zoom-btn{
  min-width:28px;height:28px;border:none;background:transparent;
  color:var(--color-text-secondary);cursor:pointer;font-size:16px;
  font-weight:500;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;transition:all .15s;
  white-space:nowrap;padding:0 6px;
}
.zoom-btn:hover{background:#F3F4F6;color:var(--color-text);}
.zoom-level{font-size:12px;color:var(--color-text-secondary);min-width:40px;text-align:center;font-weight:500;}

.preview-canvas-wrapper{
  flex:1;overflow:auto;display:flex;justify-content:center;
  padding:16px 8px 8px 8px;
  transition:transform .2s ease;transform-origin:top center;
}
.preview-canvas-wrapper::-webkit-scrollbar{width:6px;}
.preview-canvas-wrapper::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:3px;}

/* ═══ CANVAS ═══ */
.canvas{
  width:750px;background:#fff;flex-shrink:0;
  padding-bottom:60px;
  --visual-line-height:1.5;
  --visual-section-padding:18px;
  --visual-radius:0px;
  --visual-letter-spacing:0px;
  --visual-saturation:100%;
  --visual-contrast:1;
  --visual-img-brightness:1;
  --visual-divider:1px;
  --visual-divider-len:100;
  --visual-content-padding:40px;
  --visual-color-title:#1D1D1F;
  --visual-color-subtitle:#86868B;
  --visual-color-body:#1D1D1F;
  --visual-color-caption:#86868B;
  line-height:var(--visual-line-height);
  letter-spacing:var(--visual-letter-spacing);
  font-size:calc(14px * var(--visual-scale,1));
  box-shadow:var(--shadow-lg);
}
.canvas .section{
  padding-top:var(--visual-section-padding) !important;
  padding-bottom:var(--visual-section-padding) !important;
  padding-left:var(--visual-content-padding) !important;
  padding-right:var(--visual-content-padding) !important;
}
.canvas img{filter:saturate(var(--visual-saturation)) contrast(var(--visual-contrast)) brightness(var(--visual-img-brightness,1));}
.canvas .section-divider{display:none !important;}
.canvas .section-title,.canvas .m01-hero .h-name{color:var(--visual-color-title,inherit);}
.canvas .section-subtitle{color:var(--visual-color-subtitle,currentColor);opacity:var(--visual-subtitle-opacity,0.6);}
.canvas .section-desc,.canvas .m02-proc-desc,.canvas .m02-proc-step,.canvas .person-quote,.canvas .person-name,.canvas .m06-promise-text,.canvas .m09-q,.canvas .m09-a,.canvas .m10-desc,.canvas .m11-text{color:var(--visual-color-body,inherit);}
.canvas .tag,.canvas .en-sub,.canvas .en-block,.canvas .m01-tagline .t-en,.canvas .m07-recipe-step-en{color:var(--visual-color-caption,currentColor);}
.canvas .section-num,.canvas .tag,.canvas .m02-proc-num,.canvas .m07-recipe-idx,.canvas .m05-num{color:var(--visual-color-accent,inherit);}
.canvas .en-sub,.canvas .en-block,.canvas .m01-tagline .t-en,.canvas .m07-recipe-step-en,.canvas .h-name-en,.canvas .en-inline{color:var(--visual-color-en,currentColor);}

/* ═══ 第四栏：AI对话区 ═══ */
.ai-panel{
  width:280px;min-width:280px;
  background:var(--color-surface);
  border-left:1px solid var(--color-border);
  display:flex;flex-direction:column;
  flex-shrink:0;
}
.ai-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--color-border);
  flex-shrink:0;
}
.ai-header-title{font-size:14px;font-weight:700;color:var(--color-text);}
.ai-header-status{font-size:11px;font-weight:600;color:var(--color-success);}

.ai-messages{
  flex:1;overflow-y:auto;padding:12px;
  display:flex;flex-direction:column;gap:10px;
}
.ai-messages::-webkit-scrollbar{width:4px;}
.ai-messages::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:2px;}

.ai-message{display:flex;gap:8px;max-width:95%;}
.ai-message.ai{align-self:flex-start;}
.ai-message.user{align-self:flex-end;flex-direction:row-reverse;}
.ai-avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--color-primary-light);color:var(--color-primary);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ai-message.user .ai-avatar{background:#E6F7F6;color:#0ABAB5;}
.ai-bubble{
  padding:10px 14px;border-radius:12px;
  font-size:13px;line-height:1.6;word-break:break-word;
}
.ai-message.ai .ai-bubble{background:#F3F4F6;color:var(--color-text);border-bottom-left-radius:4px;}
.ai-message.user .ai-bubble{background:var(--color-primary);color:#fff;border-bottom-right-radius:4px;}

.ai-bubble .apply-btn{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:8px;padding:4px 10px;
  border:1px solid var(--color-primary);background:var(--color-primary-light);
  color:var(--color-primary);font-size:11px;font-weight:600;
  border-radius:var(--radius-btn);cursor:pointer;transition:all .15s;
}
.ai-bubble .apply-btn:hover{background:var(--color-primary);color:#fff;}

/* Quick actions */
.ai-quick-actions{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:10px 12px;border-top:1px solid var(--color-border);
  flex-shrink:0;
}
.quick-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 10px;border:1px solid var(--color-border);
  background:#F9FAFB;color:var(--color-text-secondary);
  font-size:11px;cursor:pointer;border-radius:20px;
  transition:all .15s;font-weight:500;
}
.quick-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light);}

/* AI Input */
.ai-input-area{
  display:flex;gap:8px;padding:12px;
  border-top:1px solid var(--color-border);
  flex-shrink:0;align-items:flex-end;
}
.ai-input{
  flex:1;padding:10px 12px;
  border:1px solid var(--color-border);border-radius:var(--radius-input);
  font-size:13px;color:var(--color-text);background:#FAFBFC;
  outline:none;resize:none;font-family:inherit;
  transition:all .15s;line-height:1.4;
}
.ai-input:focus{border-color:var(--color-primary);background:#fff;box-shadow:0 0 0 3px var(--color-primary-ring);}
.ai-send-btn{
  width:36px;height:36px;border:none;
  background:var(--color-primary);color:#fff;
  border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.ai-send-btn:hover{background:var(--color-primary-hover);}

/* ═══ MODALS ═══ */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.4);z-index:1000;
  align-items:center;justify-content:center;
}
.modal-overlay.show{display:flex;}
.modal{background:#fff;border-radius:var(--radius-card);width:420px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0;}
.modal-header h2{font-size:18px;font-weight:700;color:var(--color-text);}
.modal-close{width:32px;height:32px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--color-text-tertiary);transition:all .15s;}
.modal-close:hover{background:#F3F4F6;color:var(--color-text);}
.modal-body{padding:20px 24px 24px;}
.modal-body label{display:block;font-size:12px;color:var(--color-text-secondary);margin-bottom:4px;margin-top:14px;font-weight:500;}
.modal-body select,.modal-body .form-input{
  width:100%;padding:10px 12px;border:1px solid var(--color-border);
  border-radius:var(--radius-input);font-size:13px;color:var(--color-text);
  background:#FAFBFC;outline:none;
}
.modal-body select:focus,.modal-body .form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-ring);}
.exp-hint{font-size:10px;color:var(--color-text-tertiary);margin-top:4px;}
.export-progress{margin-top:12px;}
.export-progress .bar{height:4px;background:#E5E7EB;border-radius:2px;overflow:hidden;}
.export-progress .bar-fill{height:100%;background:var(--color-primary);width:0%;transition:width .3s;}
.export-progress .status{font-size:11px;color:var(--color-text-tertiary);margin-top:6px;text-align:center;}
.export-actions{display:flex;gap:8px;margin-top:20px;justify-content:flex-end;}

/* ═══ AI TOAST ═══ */
.ai-toast{
  position:fixed;top:68px;left:50%;transform:translateX(-50%);
  background:var(--color-text);color:#fff;
  padding:8px 20px;border-radius:20px;
  font-size:12px;white-space:nowrap;
  opacity:0;transition:opacity .3s;
  z-index:200;pointer-events:none;
}
.ai-toast.show{opacity:1;}

/* ═══ VISUAL SETTINGS PANEL ═══ */
.vis-section{margin-bottom:16px;}
.vis-section-title{
  font-size:12px;font-weight:700;color:var(--color-text);
  padding:8px 0;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  border-top:1px solid var(--color-border);
  user-select:none;
}
.vis-section-title:first-child{border-top:none;}
.vis-section-title .toggle{margin-left:auto;font-size:10px;color:var(--color-text-tertiary);transition:transform .2s;}
.vis-section-title .toggle.collapsed{transform:rotate(-90deg);}
.vis-section-body{padding:6px 0;}
.vis-section-body.collapsed{display:none;}
.vis-color-section-hdr{padding:6px 0;font-size:12px;color:var(--color-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-weight:500;}
.vis-color-section-body.collapsed{display:none;}
.vis-toggle{display:inline-block;font-size:10px;color:var(--color-text-tertiary);transition:transform .2s;}
.vis-toggle.collapsed{transform:rotate(-90deg);}

.vis-slider-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.vis-slider-label{font-size:11px;color:var(--color-text-secondary);min-width:70px;}
.vis-slider-row input[type=range]{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:#E5E7EB;border-radius:2px;outline:none;}
.vis-slider-row input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,#0ABAB5 0%,#0ABAB5 var(--fill,50%),#E5E7EB var(--fill,50%),#E5E7EB 100%);border-radius:2px;}
.vis-slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#0ABAB5;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2);margin-top:-5px;}
.vis-slider-val{font-size:11px;color:var(--color-text-secondary);min-width:40px;text-align:right;font-variant-numeric:tabular-nums;}

.vis-color-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.vis-color-row input[type=color]{width:28px;height:22px;border:1px solid var(--color-border);border-radius:4px;padding:1px;cursor:pointer;background:#fff;}
.vis-color-hex{font-size:10px;color:var(--color-text-tertiary);font-family:monospace;}

.vis-reset-btn{
  display:block;width:100%;padding:8px;
  border:1px solid var(--color-border);background:#F9FAFB;
  color:var(--color-text-secondary);font-size:12px;
  cursor:pointer;border-radius:var(--radius-btn);
  margin-top:8px;text-align:center;transition:all .15s;
}
.vis-reset-btn:hover{background:#F3F4F6;color:var(--color-text);}

/* ═══ PRESET TABS (in content area visual tab) ═══ */
.preset-bar{display:flex;gap:4px;margin-bottom:16px;}
.preset-bar button{
  padding:6px 14px;border:1px solid var(--color-border);
  background:#fff;cursor:pointer;font-size:11px;color:var(--color-text-secondary);
  border-radius:14px;transition:all .2s;
}
.preset-bar button.active{background:var(--color-text);color:#fff;border-color:var(--color-text);}
.preset-bar button:hover:not(.active){background:#F9FAFB;}
.preset-bar button.ai-btn{background:linear-gradient(135deg,#0ABAB5,#0D9488);color:#fff;border-color:transparent;font-weight:500;}
.preset-bar button.ai-btn:hover{opacity:.85;}

/* ═══ CANVAS MODULE STYLES (移植自 v5.50) ═══ */
.section{padding:18px 40px;background:inherit;position:relative;overflow:hidden;}
.section+.section{margin-top:-1px;}
.section > *:not(.section-num):not(.bg-img){position:relative;z-index:1;}

/* Section Header */
.hdr-wrap{padding:16px 0 10px;}
.hdr-divider{display:none;}
.hdr-d{display:flex;flex-direction:column;padding:0 var(--visual-content-padding,40px);position:relative;}
.hdr-row{display:flex;align-items:flex-end;gap:16px;}
.hdr-d .hdr-d-text{flex:1;}
.hdr-d .section-title{font-size:var(--visual-hdr-title,32px);font-weight:800;letter-spacing:0.5px;color:#1d1d1f;line-height:1.15;}
.hdr-d .section-subtitle{font-size:var(--visual-hdr-sub,10px);font-weight:500;letter-spacing:3px;color:rgba(0,0,0,.25);text-transform:uppercase;margin-top:2px;}
.hdr-d .section-num{font-size:var(--visual-hdr-num,160px);font-weight:900;line-height:1;letter-spacing:-0.04em;color:rgba(0,0,0,0.85);text-rendering:geometricPrecision;margin-bottom:-15px;}

.tag{display:inline-block;width:fit-content;padding:4px 10px;border:1px solid rgba(0,0,0,.15);font-size:11px;color:#86868B;letter-spacing:0.5px;margin:0 4px 6px 0;white-space:nowrap;}

.en-sub{font-size:calc(var(--visual-fs-en,10px) * var(--visual-scale,1));font-weight:400;letter-spacing:2px;text-transform:uppercase;color:rgba(0,0,0,.3);margin-top:2px;font-style:italic;}
.en-inline{font-size:calc(var(--visual-fs-en,10px) * var(--visual-scale,1));letter-spacing:1.5px;text-transform:uppercase;color:rgba(0,0,0,.25);margin-left:8px;font-style:italic;font-weight:400;}
.en-block{font-size:calc(var(--visual-fs-en-block,11px) * var(--visual-scale,1));font-weight:300;line-height:1.7;color:rgba(0,0,0,.35);margin-top:10px;font-style:italic;letter-spacing:0.2px;}

/* Sub-label */
.sub-label{display:flex;align-items:flex-end;gap:8px;margin-top:12px;margin-bottom:8px;}
.sub-label .sl-num{font-size:calc(var(--visual-fs-sl-num,33px) * var(--visual-scale,1));font-weight:700;color:rgba(0,0,0,.18);font-family:'Courier New',monospace;line-height:1;letter-spacing:-1.5px;}
.sub-label .sl-icon{width:34px;height:34px;min-width:34px;line-height:1;display:flex;align-items:center;}
.sub-label .sl-icon svg{width:34px;height:34px;}
.sub-label .sl-text{display:flex;flex-direction:column;gap:1px;}
.sub-label .sl-title{font-size:calc(var(--visual-fs-sl-title,15px) * var(--visual-scale,1));font-weight:700;letter-spacing:0.5px;color:#1d1d1f;line-height:1.3;}
.sub-label .sl-title .sl-unit{font-size:calc(var(--visual-fs-sl-unit,11px) * var(--visual-scale,1));font-weight:400;color:rgba(0,0,0,.35);margin-left:4px;}
.sub-label .sl-en{font-size:calc(var(--visual-fs-en,10px) * var(--visual-scale,1));font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:rgba(0,0,0,.3);line-height:1.2;font-style:italic;}

/* ═══ M01 ═══ */
.m01-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.m01-hero{display:flex;flex-direction:column;gap:3px;margin-top:16px;margin-bottom:2px;}
.m01-hero .h-name{font-size:calc(var(--visual-fs-hname,46px) * var(--visual-scale,1));font-weight:800;letter-spacing:-0.5px;line-height:1.15;color:#1d1d1f;}
.m01-hero .h-name .h-sub{font-weight:400;font-size:calc(var(--visual-fs-hsub,22px) * var(--visual-scale,1));color:rgba(0,0,0,.4);margin:0 8px;}
.m01-hero .h-name-en{font-size:calc(var(--visual-fs-en,11px) * var(--visual-scale,1));font-weight:400;letter-spacing:1.5px;color:rgba(0,0,0,.25);line-height:1.2;}
.m01-tagline{display:none;}
.m01-meta{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:4px 0 10px;font-size:11px;color:rgba(0,0,0,.38);letter-spacing:0.3px;}
.m01-meta .meta-dot{width:3px;height:3px;border-radius:50%;background:rgba(0,0,0,.12);}
.m01-tags{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:5px;margin-bottom:14px;}
.m01-story{background:rgba(0,0,0,.018);border-left:3px solid #1d1d1f;padding:14px 18px;font-size:calc(var(--visual-fs-story,14px) * var(--visual-scale,1));font-weight:500;line-height:1.75;color:#1d1d1f;margin-bottom:16px;}
.m01-points{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid rgba(0,0,0,.06);border-radius:4px;overflow:hidden;background:rgba(0,0,0,.018);}
.m01-origin-img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;margin:16px 0;}
.m01-point{padding:10px 8px;border-bottom:1px solid rgba(0,0,0,.06);text-align:center;}
.m01-point:nth-last-child(-n+2){border-bottom:none;}
.m01-point:nth-child(odd){border-right:1px solid rgba(0,0,0,.06);}
.m01-point-label{font-size:calc(var(--visual-fs-point-label,10px) * var(--visual-scale,1));color:#86868B;letter-spacing:1px;text-transform:uppercase;line-height:1.3;}
.m01-point-value{font-size:calc(var(--visual-fs-point-value,18px) * var(--visual-scale,1));font-weight:600;margin-top:3px;color:#1d1d1f;letter-spacing:-0.3px;line-height:1.3;}

/* ═══ M02 ═══ */
.m02-layout{display:flex;gap:20px;align-items:stretch;}
.m02-img{width:33.33%;min-width:33.33%;flex-shrink:0;position:relative;overflow:hidden;}
.m02-content{flex:1;min-width:0;}
.m02-selling-points{margin-bottom:24px;}
.m02-ing-card{border:1px solid rgba(0,0,0,.1);border-radius:0;overflow:hidden;}
.m02-ing-table{width:100%;border-collapse:collapse;}
.m02-ing-table th{font-size:calc(var(--visual-fs-ing-th,15px) * var(--visual-scale,1));font-weight:700;letter-spacing:1px;padding:10px 12px;text-align:center;background:#1d1d1f;color:#fff;border-bottom:1.5px solid #1d1d1f;}
.m02-ing-table td{padding:8px;font-size:calc(var(--visual-fs-ing-td,14px) * var(--visual-scale,1));font-weight:300;text-align:center;border-bottom:1px solid rgba(0,0,0,.06);line-height:1.5;}
.m02-highlights{display:flex;gap:12px;margin-top:14px;margin-bottom:16px;}
.m02-hl-item{border:1px solid rgba(0,0,0,.15);padding:8px 12px;text-align:center;flex:1;min-width:0;}
.m02-hl-val{font-size:calc(var(--visual-fs-m02-hl-val,15px) * var(--visual-scale,1));font-weight:700;}
.m02-hl-label{font-size:calc(var(--visual-fs-m02-hl-label,11px) * var(--visual-scale,1));color:#86868B;margin-top:4px;}
.m02-process{margin-top:10px;}
.m02-proc-item{display:flex;align-items:stretch;gap:12px;padding:8px 0;}
.m02-proc-num{font-size:calc(var(--visual-fs-proc-num,26px) * var(--visual-scale,1));font-weight:200;color:rgba(0,0,0,.15);line-height:1;flex-shrink:0;min-width:28px;}
.m02-proc-step{font-size:calc(var(--visual-fs-proc-step,14px) * var(--visual-scale,1));font-weight:500;}
.m02-proc-desc{font-size:calc(var(--visual-fs-proc-desc,12px) * var(--visual-scale,1));color:#86868B;margin-top:2px;}
.m02-proc-desc .en-block{margin-top:2px;line-height:1.3;}

/* ═══ M03 ═══ */
.m03-layout{display:flex;gap:20px;align-items:stretch;}
.m03-img{width:33.33%;min-width:33.33%;flex-shrink:0;position:relative;overflow:hidden;}
.m03-content{flex:1;min-width:0;}
.m03-divider{height:0;margin:0;}
.m03-nutr-card{border:1px solid rgba(0,0,0,.08);border-radius:0;padding:0 0 8px;background:rgba(0,0,0,.015);margin-top:0;overflow:hidden;}
.m03-sub-prefix{color:#bbb;margin-right:4px;}
.m03-special{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;}
.m03-sp-item{padding:10px 8px;text-align:center;border:1px solid rgba(0,0,0,.06);border-radius:4px;background:#fff;}
.m03-sp-val{font-size:calc(var(--visual-fs-sp-val,26px) * var(--visual-scale,1));font-weight:700;line-height:1.1;letter-spacing:-0.5px;}
.m03-sp-unit{font-size:calc(var(--visual-fs-sp-unit,12px) * var(--visual-scale,1));font-weight:400;color:#999;margin-left:1px;}
.m03-sp-label{font-size:calc(var(--visual-fs-sp-label,11px) * var(--visual-scale,1));color:#999;margin-top:4px;}
.m03-basic{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid rgba(0,0,0,.06);border-radius:4px;overflow:hidden;}
.m03-basic-item{padding:8px 6px;text-align:center;}
.m03-basic-item:nth-child(odd){border-right:1px solid rgba(0,0,0,.06);}
.m03-basic-item:nth-child(n+3){border-top:1px solid rgba(0,0,0,.06);}
.m03-basic-val{font-size:calc(var(--visual-fs-basic-val,22px) * var(--visual-scale,1));font-weight:700;line-height:1.1;}
.m03-basic-label{font-size:calc(var(--visual-fs-basic-label,11px) * var(--visual-scale,1));color:#999;margin-top:3px;}
.m03-nutr-table{width:100%;border-collapse:collapse;font-size:13px;}
.m03-nutr-table th{padding:10px 14px;text-align:left;font-size:11px;font-weight:500;color:#fff;letter-spacing:1px;text-transform:uppercase;background:#1A1A2E;}
.m03-nutr-table td{padding:7px 14px;border-bottom:1px solid rgba(0,0,0,.05);vertical-align:middle;}
.m03-nutr-name{line-height:1.3;}
.m03-nutr-name .zh{font-size:15px;font-weight:500;color:#1d1d1f;}
.m03-nutr-name .en{font-size:10px;color:#aaa;margin-top:1px;}
.m03-nutr-val{font-size:15px;font-weight:700;}
.m03-nutr-unit{font-size:11px;font-weight:400;color:#86868B;margin-left:1px;}
.m03-nutr-nrv{font-size:12px;font-weight:400;color:#555;}
/* M03 底部紧凑卡片（孩童告示+免责声明+数据来源合并） */
.m03-footer-card {
  margin-top: 8px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  overflow: hidden;
  background: #FAFBFC;
}
.m03-fc-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.45;
  border-bottom: 1px solid #F0F0F0;
}
.m03-fc-row:last-child { border-bottom: none; }
.m03-fc-icon { flex-shrink: 0; width: 14px; height: 14px; line-height: 1.5; display: flex; align-items: center; justify-content: center; }
.m03-fc-icon svg { width: 14px; height: 14px; }
.m03-fc-body { display: flex; flex-direction: column; gap: 2px; }
.m03-fc-text { color: #444; font-weight: 400; }
.m03-fc-en {
  font-size: 10px;
  color: #999;
  font-style: normal;
  line-height: 1.35;
}
.m03-fc-warn { background: rgba(220,53,69,.04); }
.m03-fc-warn .m03-fc-text { color: #C0392B; font-weight: 500; }
.m03-fc-warn .m03-fc-icon { color: #DC3545; }
.m03-fc-warn .m03-fc-en { color: #C0707A; }

/* ═══ M04 ═══ */
.m04-table{width:100%;border-collapse:collapse;}
.m04-card{border:1px solid rgba(0,0,0,.1);overflow:hidden;}
.m04-table th{font-size:calc(var(--visual-fs-m04-th,14px) * var(--visual-scale,1));font-weight:700;letter-spacing:1px;padding:6px 10px;text-align:center;background:#1d1d1f;color:#fff;}
.m04-table td{padding:5px 10px;text-align:center;font-size:calc(var(--visual-fs-m04-td,14px) * var(--visual-scale,1));font-weight:300;border-bottom:1px solid rgba(0,0,0,.06);}
.m04-table td:first-child{text-align:left;font-weight:400;}
.m04-ours{color:#1d1d1f;font-weight:500;}
.m04-other{color:#999;}
.m04-cell-zh{font-size:calc(var(--visual-fs-m04-td,14px) * var(--visual-scale,1));line-height:1.4;display:block;font-weight:500;}
.m04-cell-en{font-size:calc(var(--visual-fs-en,9px) * var(--visual-scale,1));color:rgba(0,0,0,.25);font-style:italic;display:block;margin-top:1px;}
.m04-layout{display:flex;gap:32px;align-items:stretch;}
.m04-img{width:33.33%;min-width:33.33%;flex-shrink:0;position:relative;overflow:hidden;}
.m04-content{flex:1;min-width:0;display:flex;flex-direction:column;}

/* ═══ M05/M06 Person ═══ */
.person{display:flex;gap:32px;align-items:stretch;}
.person-avatar{width:25%;min-width:25%;flex-shrink:0;display:flex;background:linear-gradient(135deg,#e0d5cd,#d4c5b9);overflow:hidden;}
.person-avatar img{width:100%;object-fit:cover;flex:1;}
.person-info{flex:1;min-width:0;}
.person-name{font-size:calc(var(--visual-fs-person-name,28px) * var(--visual-scale,1));font-weight:700;letter-spacing:0.5px;}
.person-title{margin-top:6px;}
.person-quote{font-size:calc(var(--visual-fs-person-quote,15px) * var(--visual-scale,1));font-weight:500;line-height:1.6;margin-top:8px;padding-left:18px;border-left:3px solid #1d1d1f;color:#1d1d1f;}

/* ═══ M07 ═══ */
.m07-recipe{display:flex;gap:20px;align-items:stretch;padding:20px 0;}
.m07-recipe-text{flex:1;min-width:0;}
.m07-recipe-img-wrap{width:34%;min-width:34%;background:#f5f5f5;position:relative;overflow:hidden;align-self:stretch;}
.m07-recipe-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:6px;}
.m07-recipe-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.m07-recipe-idx{width:36px;height:36px;min-width:36px;border-radius:50%;background:#1D1D1F;color:#fff;font-size:calc(var(--visual-fs-recipe-idx,16px) * var(--visual-scale,1));font-weight:700;display:flex;align-items:center;justify-content:center;}
.m07-recipe-name{font-size:calc(var(--visual-fs-recipe-name,24px) * var(--visual-scale,1));font-weight:700;letter-spacing:0.3px;line-height:1.25;}
.m07-recipe-en{font-size:calc(var(--visual-fs-en,10px) * var(--visual-scale,1));font-weight:400;letter-spacing:2px;text-transform:uppercase;color:rgba(0,0,0,.3);font-style:italic;margin-top:1px;}
.m07-recipe-tags{display:flex;gap:6px;margin-bottom:10px;align-items:center;}
.m07-recipe-steps{padding-left:0;margin-left:0;list-style:none;counter-reset:step;border-left:2px solid rgba(0,0,0,.12);}
.m07-recipe-steps li{font-size:calc(var(--visual-fs-recipe-step,14px) * var(--visual-scale,1));font-weight:400;line-height:1.6;color:#444;padding:4px 0 4px 32px;position:relative;list-style:none;}
.m07-recipe-steps li::before{content:counter(step,decimal-leading-zero);counter-increment:step;position:absolute;left:8px;top:4px;font-size:calc(var(--visual-fs-recipe-step-num,11px) * var(--visual-scale,1));font-weight:600;color:rgba(0,0,0,.25);min-width:22px;text-align:right;}
.m07-sep{display:flex;align-items:center;justify-content:center;padding:10px 0;margin:0;}

/* ═══ M08 ═══ */
.m08-brand{max-width:560px;margin:0 auto;padding:0;}
.m08-brand-name{font-size:12px;font-weight:500;letter-spacing:5px;color:rgba(0,0,0,.2);text-transform:uppercase;margin-bottom:24px;}
.m08-brand-rule{width:48px;height:1px;background:#1d1d1f;opacity:.15;margin-bottom:28px;}
.m08-brand-layout{display:flex;gap:24px;align-items:center;}
.m08-brand-story{padding-left:16px;border-left:3px solid #1d1d1f;flex:1;}
.m08-brand-img{width:160px;height:160px;flex-shrink:0;border-radius:12px;overflow:hidden;background:#f5f5f5;display:flex;align-items:center;justify-content:center;}
.m08-brand-img img{width:100%;height:100%;object-fit:cover;}
.m08-story-cn{font-size:15px;font-weight:400;line-height:1.65;color:#1d1d1f;margin:0 0 16px;}
.m08-story-en{font-size:12px;font-weight:300;line-height:1.6;color:#aaa;font-style:italic;}
.m08-values{display:flex;justify-content:space-between;align-items:flex-start;margin-top:30px;padding-top:16px;border-top:1px solid rgba(0,0,0,.08);}
.m08-stats{display:flex;gap:32px;}
.m08-val-num{font-size:calc(var(--visual-fs-m08-val,26px) * var(--visual-scale,1));font-weight:800;color:#1d1d1f;}
.m08-val-label{font-size:calc(var(--visual-fs-m08-label,8px) * var(--visual-scale,1));color:#aaa;margin-top:3px;letter-spacing:1px;text-transform:uppercase;}
.m08-val-cn{font-size:10px;font-weight:500;color:#666;margin-top:1px;}
.m08-footer{text-align:right;align-self:flex-end;}
.m08-footer-company{font-size:11px;font-weight:600;color:#1d1d1f;margin-bottom:4px;}
.m08-footer-info{font-size:9px;color:#999;line-height:1.55;}

/* ═══ M09 ═══ */
.m09-layout{display:flex;gap:32px;align-items:stretch;}
.m09-img{width:33.33%;min-width:33.33%;flex-shrink:0;position:relative;overflow:hidden;}
.m09-content{flex:1;min-width:0;}
.m09-item{position:relative;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);}
.m09-item:last-child{border-bottom:none;}
.m09-q-num{position:absolute;left:0;top:8px;font-size:calc(var(--visual-fs-m09-qnum,15px) * var(--visual-scale,1));font-weight:700;color:rgba(0,0,0,.2);font-family:'Courier New',monospace;}
.m09-q{font-size:calc(var(--visual-fs-m09-q,15px) * var(--visual-scale,1));font-weight:400;padding-left:30px;}
.m09-q-en{display:block;font-size:calc(var(--visual-fs-en,10px) * var(--visual-scale,1));color:rgba(0,0,0,.25);font-style:italic;margin-top:1px;}
.m09-a{font-size:calc(var(--visual-fs-m09-a,14px) * var(--visual-scale,1));font-weight:300;color:#86868B;line-height:1.5;padding-left:30px;border-left:2px solid rgba(0,0,0,.1);margin-top:6px;}

/* ═══ M10 ═══ */
.m10-layout{display:flex;gap:32px;align-items:stretch;}
.m10-img{width:33.33%;min-width:33.33%;flex-shrink:0;position:relative;overflow:hidden;}
.m10-content{flex:1;min-width:0;}
.m10-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.m10-item{text-align:center;padding:12px 10px;border:1px solid rgba(0,0,0,.06);transition:box-shadow .2s;}
.m10-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;border:1.5px solid rgba(0,0,0,.08);border-radius:50%;color:#1D1D1F;background:rgba(0,0,0,.01);}
.m10-icon svg{width:24px;height:24px;}
.m10-title{font-size:calc(var(--visual-fs-m10-title,16px) * var(--visual-scale,1));font-weight:700;letter-spacing:0.5px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.m10-desc{font-size:calc(var(--visual-fs-m10-desc,13px) * var(--visual-scale,1));color:#555;margin-top:6px;line-height:1.7;}

/* ═══ M11 ═══ */
.m11-subsection{margin-top:20px;padding-top:16px;border-top:1px dashed rgba(0,0,0,.1);}
.m11-subtitle{font-size:calc(var(--visual-fs-m11-subtitle,15px) * var(--visual-scale,1));font-weight:700;letter-spacing:0.5px;color:#555;margin-bottom:14px;}
.m11-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.m11-card{border:1px solid rgba(0,0,0,.08);padding:0;background:#fff;overflow:hidden;}
.m11-card-body{padding:14px 12px;}
.m11-icon{font-size:30px;margin-bottom:6px;}
.m11-name{font-size:calc(var(--visual-fs-m11-name,15px) * var(--visual-scale,1));font-weight:700;color:#1d1d1f;margin-bottom:2px;}
.m11-name-en{font-size:calc(var(--visual-fs-en,10px) * var(--visual-scale,1));font-weight:500;color:#bbb;letter-spacing:2.5px;text-transform:uppercase;margin-top:2px;}
.m11-tagline{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.06);}
.m11-tagline span{font-size:calc(var(--visual-fs-m11-tag,11px) * var(--visual-scale,1));font-weight:600;color:#C17050;background:rgba(193,112,80,.08);border:1px solid rgba(193,112,80,.18);border-radius:4px;padding:2px 10px;}
.m11-rec{font-size:calc(var(--visual-fs-m11-rec,13px) * var(--visual-scale,1));line-height:1.65;color:#555;margin-top:8px;}

/* ═══ Image Slot ═══ */
.img-slot-wrap{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;border-radius:6px;}
.img-slot-wrap[data-mode="single"]>img{width:100%;height:100%;object-fit:cover;}
.img-slot-wrap[data-mode="multi"]{display:flex;flex-direction:column;gap:4px;}
.img-slot-wrap[data-mode="multi"]>img{width:100%;flex:1 1 0;min-height:0;object-fit:cover;}
.img-slot-wrap.m11-card-img{position:relative !important;inset:auto !important;width:100% !important;height:auto !important;aspect-ratio:4/3;overflow:hidden;border-radius:0 !important;}
.img-slot-wrap.m11-card-img[data-mode="single"]>img{width:100%;height:100%;object-fit:cover;}
.img-slot-wrap.m11-card-img[data-mode="multi"]{display:flex;flex-direction:column;gap:2px;aspect-ratio:auto;height:240px;}
.img-slot-wrap.m11-card-img[data-mode="multi"]>img{width:100%;flex:1 1 0;min-height:0;object-fit:cover;}
.img-slot-wrap.m11-card-img[data-mode="smartcrop"]{height:240px;}

/* ═══ BG Mode ═══ */
.bg-content > *:not(.section-num){position:relative;z-index:1;}
.section-bg-mode{position:relative;overflow:hidden;}
.section-bg-mode .bg-img{position:absolute;top:-8%;left:-8%;width:116%;height:116%;object-fit:cover;z-index:0;}
.section-bg-mode .bg-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;}
.section-bg-mode .bg-content{position:relative;z-index:10;}
.section-bg-mode .bg-content,.section-bg-mode .bg-content *{color:var(--bg-txt,#fff) !important;}
.section-bg-mode .bg-content .section-subtitle,.section-bg-mode .bg-content .en-sub,.section-bg-mode .bg-content .en-block,.section-bg-mode .bg-content .en-inline,.section-bg-mode .bg-content .h-name-en,.section-bg-mode .bg-content .m01-tagline .t-en,.section-bg-mode .bg-content .m01-hero .h-name .h-sub,.section-bg-mode .bg-content .sub-label .sl-en,.section-bg-mode .bg-content .m02-proc-step-en,.section-bg-mode .bg-content .m03-nutr-header-en,.section-bg-mode .bg-content .m03-sp-unit,.section-bg-mode .bg-content .m07-recipe-en,.section-bg-mode .bg-content .m07-recipe-step-en,.section-bg-mode .bg-content .m09-q-en{opacity:0.5 !important;}
.section-bg-mode .section-num,.section-bg-mode .bg-content .person-title,.section-bg-mode .bg-content .m06-aud-reason,.section-bg-mode .bg-content .m09-a,.section-bg-mode .bg-content .m10-desc,.section-bg-mode .bg-content .person-text,.section-bg-mode .bg-content .module-sub-title,.section-bg-mode .bg-content .m11-subtitle,.section-bg-mode .bg-content .m03-sp-label,.section-bg-mode .bg-content .m03-basic-label,.section-bg-mode .bg-content .sl-num{opacity:0.7 !important;}
.section-bg-mode .hdr-divider,.section-bg-mode .section-divider{background:rgba(255,255,255,.3) !important;}
.section-bg-mode+.section-bg-mode::before,.section-bg-mode+.section::before{background:rgba(255,255,255,.15) !important;}
.section-bg-mode .tag,.section-bg-mode .bg-content .tag{background:rgba(255,255,255,.15) !important;border-color:rgba(255,255,255,.25) !important;}

/* ═══ PRESETS ═══ */
.canvas.preset-apple{background:#FAFAFA;color:#1D1D1F;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;}
.canvas.preset-red{background:#FFFFFF;color:#222222;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;}
.canvas.preset-moss{background:#F5FAF5;color:#2E4A3A;font-family:"Helvetica Neue",Arial,sans-serif;}

/* Radius override */
.canvas .m03-sp-item,.canvas .m03-basic,.canvas .m04-table,.canvas .m10-item,.canvas .m11-card,.canvas .tag,.canvas .m06-audience,.canvas .person-quote,.canvas .m02-ing-table{border-radius:var(--visual-radius) !important;}

/* ═══ FC PANEL (frame controls) ═══ */
.fc-panel{margin-top:6px;padding:8px;background:#f8f8f8;border-radius:6px;border:1px solid #eee;}

/* ═══ AI BUTTON STATES ═══ */
@keyframes aiBtnPulse{0%,100%{box-shadow:0 0 0 0 rgba(10,186,181,.4)}50%{box-shadow:0 0 0 8px rgba(10,186,181,0)}}
@keyframes aiSpinner{to{transform:rotate(360deg)}}
.ai-btn-loading{background:var(--color-primary)!important;color:#fff!important;animation:aiBtnPulse 1.5s infinite;pointer-events:none}
.ai-btn-loading::before{content:'';display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:aiSpinner .8s linear infinite;margin-right:6px}
.ai-btn-success{background:var(--color-success)!important;color:#fff!important;}
.ai-btn-error{background:var(--color-error)!important;color:#fff!important;}

/* ═══ 模块列表项（图标栏）═══ */
.module-list-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px;border-radius:8px;cursor:pointer;
  transition:all .15s ease;position:relative;
}
.module-list-item:hover{background:#E6F7F6;}
.module-list-item.active{background:#D0F5F2;}
.module-list-item.disabled{opacity:.4;}
.module-list-item .module-icon{color:#6B7280;display:flex;align-items:center;justify-content:center;}
.module-list-item.active .module-icon{color:var(--color-primary);}
.module-list-item .module-name{font-size:10px;color:#6B7280;text-align:center;white-space:nowrap;}
.module-list-item.active .module-name{color:var(--color-primary);font-weight:500;}
.module-list-item .module-check{position:absolute;top:2px;right:2px;}
.module-list-item .module-check input{width:12px;height:12px;cursor:pointer;accent-color:var(--color-primary);}
.module-list-item.add-module{opacity:.5;margin-top:8px;border-top:1px solid #E5E7EB;padding-top:12px;}
.module-list-item.add-module:hover{opacity:1;}

/* ═══ 内容区 Tab 按钮 ═══ */
.content-tabs .ct-btn{
  flex:none;padding:6px 16px;font-size:12px;
  border:none;background:none;color:#6B7280;cursor:pointer;
  border-bottom:2px solid transparent;transition:all .15s;
}

/* ═══ AI Credit Bar ═══ */
.ai-credit-bar{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:6px 16px;
  background:#FAFBFC;border-bottom:1px solid var(--color-border);
  font-size:11px;color:#9CA3AF;font-weight:500;
  flex-shrink:0;
  letter-spacing:0.02em;
}
.credit-sep{color:#D1D5DB;}

/* Per-message credit display */
.ai-credit-tag{
  font-size:10px;color:#9CA3AF;
  margin-top:4px;padding-left:36px;
  letter-spacing:0.01em;
  font-weight:400;
}

/* ═══ EDITOR FIELD STYLES (Canva 风格) ═══ */
.ed-field { margin-bottom: 14px; }
.ed-field-label { 
  font-size: 12px; font-weight: 500; color: #374151; 
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.ed-input { 
  width: 100%; padding: 10px 14px; border: 1px solid #E5E7EB; 
  border-radius: 8px; font-size: 13px; color: #111827; 
  background: #FFFFFF; transition: all 0.2s;
  outline: none;
}
.ed-input:focus { border-color: #0ABAB5; box-shadow: 0 0 0 3px rgba(10,186,181,0.1); }
.ed-textarea { 
  width: 100%; padding: 10px 14px; border: 1px solid #E5E7EB; 
  border-radius: 8px; font-size: 13px; color: #111827; 
  background: #FFFFFF; resize: vertical; min-height: 80px;
  font-family: inherit; transition: all 0.2s; outline: none;
}
.ed-textarea:focus { border-color: #0ABAB5; box-shadow: 0 0 0 3px rgba(10,186,181,0.1); }

/* 编辑器分组标题 */
.ed-group-title { 
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin: 6px 0;
  background: #FFFFFF; border-radius: 10px;
  cursor: pointer; font-size: 12px; font-weight: 600; color: #374151;
  border: 1px solid #E5E7EB;
  transition: all 0.2s;
}
.ed-group-title:hover { background: #F3F4F6; border-color: #D1D5DB; }
.ed-group-title.ed-group-active { background: #1A1A1A; border-color: #1A1A1A; color: #FFFFFF; }
.ed-group-title.ed-group-dimmed { background: #FFFFFF; color: #374151; opacity: 1; }
.ed-group-num { 
  font-size: 9px; font-weight: 700; color: #9CA3AF; 
  background: #F3F4F6; padding: 2px 6px; border-radius: 4px;
}
.ed-group-active .ed-group-num { background: #0ABAB5; color: #FFFFFF; }
.ed-group-arrow { margin-left: auto; font-size: 14px; color: #9CA3AF; transition: transform 0.2s; }
.ed-group-active .ed-group-arrow { transform: rotate(90deg); color: #FFFFFF; }

/* 编辑器按钮 */
.ed-add-btn { 
  padding: 6px 14px; border: 1px dashed #D1D5DB; 
  border-radius: 8px; background: transparent; 
  font-size: 12px; color: #6B7280; cursor: pointer;
  transition: all 0.2s;
}
.ed-add-btn:hover { border-color: #0ABAB5; color: #0ABAB5; background: #E6F7F6; }
.ed-del-btn { 
  width: 22px; height: 22px; border: none; 
  background: #FEE2E2; color: #EF4444; 
  border-radius: 6px; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.ed-del-btn:hover { background: #FECACA; }

/* AI/手动标签 */
.ed-ai-tag { 
  font-size: 9px; font-weight: 700; color: #0ABAB5; 
  background: #E6F7F6; padding: 1px 5px; border-radius: 4px;
}
.ed-manual-tag { 
  font-size: 9px; font-weight: 600; color: #F59E0B; 
  background: #FFFBEB; padding: 1px 5px; border-radius: 4px;
}

/* 行内布局 */
.ed-row { display: flex; gap: 8px; align-items: center; }
.req { color: #EF4444; margin-left: 2px; }

/* AI 按钮 */
.ai-btn {
  padding: 8px 18px; border: none; border-radius: 8px;
  background: #0ABAB5; color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.ai-btn:hover { background: #089E99; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10,186,181,0.3); }





/* 画布容器 */










/* Canva-style 设备切换器 */




/* Custom module delete button */
.module-list-item:hover .custom-mod-del-btn { display: flex !important; align-items: center; justify-content: center; }

/* Fix: Ensure avatar-preview img is always contained */
.avatar-preview { overflow: hidden; position: relative; }
.avatar-preview img { display: block !important; width: 100%; height: 100%; object-fit: cover; }

/* ═══ Custom Module Canvas Styles ═══ */
.custom-module-body {
  font-size: 15px;
  line-height: 1.7;
  color: #1d1d1f;
  white-space: pre-line;
}

/* M08 brand logo inline */
.m08-brand-name {
  display: flex;
  align-items: center;
}

/* Better scroll behavior for preview */
.preview-canvas-wrapper {
  scroll-behavior: smooth;
}

/* Module list hidden from sidebar, shown as grid in content area */
#moduleList { display: none !important; }
.icon-sidebar .nav-divider { display: none !important; }

/* Module Grid in Content Area */
.module-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.module-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1.5px solid #E5E7EB;
  position: relative;
  background: #fff;
}
.module-grid-item:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.module-grid-item.enabled {
  background: #1A1A2E;
  border-color: #1A1A2E;
}
.module-grid-item.enabled:hover {
  background: #232345;
}
.module-grid-num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  transition: all 0.15s;
  line-height: 1;
  background: #E5E7EB;
  color: #6B7280;
  pointer-events: none;
}
.module-grid-item.enabled .module-grid-num {
  background: #fff;
  color: #1A1A2E;
}
.module-grid-name {
  font-size: 11px;
  color: #4B5563;
  text-align: center;
  line-height: 1.3;
  font-weight: 500;
  pointer-events: none;
  max-width: 100%;
  word-break: break-word;
}
.module-grid-item.enabled .module-grid-name {
  color: #fff;
  font-weight: 600;
}
.module-grid-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  transition: all 0.15s;
  cursor: pointer;
}
.module-grid-check.on {
  background: #0ABAB5;
  color: #fff;
}
.module-grid-check.off {
  background: #fff;
  color: #D1D5DB;
  border: 1.5px solid #D1D5DB;
}

/* Wider content area */
.content-area {
  width: 420px;
  min-width: 360px;
  max-width: 500px;
  resize: horizontal;
  overflow: auto;
}

/* Wider AI panel with resize handle */
.ai-panel {
  width: 320px;
  min-width: 260px;
  max-width: 500px;
  resize: horizontal;
  overflow: auto;
  border-left: 1px solid var(--color-border);
}

/* Floating right toolbar */
.preview-toolbar {
  padding: 0;
}


/* Force-hide sidebar module list panel */
.module-list, #moduleList, .module-list-item {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Product image upload area - button style */
.ed-upload-area {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 20px; border: 1px dashed #D1D5DB;
  border-radius: 8px; background: transparent;
  font-size: 12px; color: #6B7280; cursor: pointer;
  transition: all 0.2s; margin: 4px 0;
}
.ed-upload-area:hover { border-color: #0ABAB5; color: #0ABAB5; background: #E6F7F6; }

/* Product image thumbnail list */
.ed-img-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 6px 0 10px 0; min-height: 0;
}
.ed-img-list .thumb-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px; border-radius: 6px; background: #F9FAFB;
}
.ed-img-list .thumb-item img {
  width: 48px; height: 36px; object-fit: cover;
  border-radius: 4px; border: 1px solid #E5E7EB;
}