:root{
  --salmon:#E8888A; --salmon-dark:#D97376; --key:#BE3D35;
  --bg:#F4F1EE; --line:#E5DFDA; --text:#3D3733;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  background:var(--bg); color:var(--text); display:flex; flex-direction:column;
}
header{
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
header h1{ font-size:17px; margin-right:auto; color:var(--key); }
header h1 .ver{ font-size:11px; color:#A79B92; font-weight:400; }
.btn{
  border:1px solid var(--line); background:#fff; color:var(--text);
  padding:7px 14px; border-radius:8px; font-size:13px; cursor:pointer;
}
.btn:hover{ border-color:var(--salmon); color:var(--salmon-dark); }
.btn.primary{ background:var(--salmon); border-color:var(--salmon); color:#fff; font-weight:600; }
.btn.primary:hover{ background:var(--salmon-dark); color:#fff; }
main{ flex:1; display:flex; min-height:0; }
aside{
  width:400px; min-width:340px; overflow-y:auto; padding:14px;
  background:#FAF8F6; border-right:1px solid var(--line);
}
/* min-width:0 是关键：没有它，预览区变宽（放大）时会撑大整个 flex 容器，
   导致整个页面出现横向滚动，而不是只在预览区内部滚动 */
#preview{ flex:1; display:flex; flex-direction:column; min-height:0; min-width:0; }
.preview-toolbar{
  display:flex; justify-content:flex-end; align-items:center; gap:6px;
  padding:8px 16px; background:#fff; border-bottom:1px solid var(--line); flex:none;
}
.preview-toolbar .btn{ padding:6px 10px; font-size:12px; min-width:76px; text-align:center; }
.preview-toolbar .btn.icon{ min-width:auto; width:26px; height:26px; padding:0; font-size:15px; line-height:1; }
#previewScroll{
  flex:1; min-width:0; min-height:0; overflow:auto; padding:24px; background:
    repeating-conic-gradient(#f7f5f3 0 25%, #fdfcfb 0 50%) 0 0/28px 28px;
}
#previewCanvas svg{ display:block; max-width:100%; height:auto; background:#fff; box-shadow:0 2px 14px rgba(90,60,55,.12); border-radius:8px; }
.fld{ display:block; font-size:13px; font-weight:600; color:#7A6E66; margin-bottom:12px; }
.fld textarea{
  display:block; width:100%; margin-top:6px; padding:8px 10px; font-size:14px;
  font-family:inherit; border:1px solid var(--line); border-radius:8px; resize:vertical; background:#fff;
}
input[type=text]{
  padding:6px 9px; font-size:13px; font-family:inherit;
  border:1px solid var(--line); border-radius:7px; background:#fff; min-width:0;
}
input[type=text]:focus, textarea:focus{ outline:none; border-color:var(--salmon); }
.cat{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--salmon);
  border-radius:10px; padding:10px; margin-bottom:12px;
}
.cat-head{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.cat-head input{ flex:1; font-weight:600; }
.tag{
  font-size:11px; color:#fff; background:var(--salmon); border-radius:6px;
  padding:2px 7px; white-space:nowrap;
}
.icon{
  border:1px solid var(--line); background:#fff; color:#9A8E86; width:26px; height:26px;
  border-radius:6px; cursor:pointer; font-size:13px; line-height:1; flex:none;
}
.icon:hover{ border-color:var(--salmon); color:var(--salmon-dark); }
.icon.del:hover{ border-color:#c0392b; color:#c0392b; }
.factor{
  border:1px dashed #EBD9D6; border-radius:8px; padding:8px; margin-bottom:8px; background:#FFFDFC;
}
.factor-head{ display:flex; gap:6px; margin-bottom:6px; }
.factor-head input{ flex:1; }
.cause{ display:flex; align-items:center; gap:6px; margin:5px 0 5px 14px; }
.cause input[type=text]{ flex:1; }
.keychk{
  display:flex; align-items:center; gap:3px; font-size:12px; color:var(--key);
  white-space:nowrap; cursor:pointer; user-select:none;
}
.keychk input{ accent-color:var(--key); cursor:pointer; }
.add{
  border:1px dashed var(--salmon); color:var(--salmon-dark); background:transparent;
  border-radius:7px; padding:5px 10px; font-size:12px; cursor:pointer;
}
.add:hover{ background:#FDF1F1; }
.add.big{ display:block; width:100%; padding:9px; font-size:13px; margin-top:4px; }
.add.big:disabled{ opacity:.45; cursor:not-allowed; }
.add.sm{ margin-left:14px; }
.hint{ font-size:12px; color:#A79B92; margin:10px 2px 0; line-height:1.6; }
.cfgbox{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; margin-bottom:12px; font-size:13px;
}
.cfgtitle{ font-weight:600; color:#7A6E66; }
.cfgrow{ display:flex; align-items:center; gap:8px; margin:9px 0 2px; }
.cfgrow > span{ color:#7A6E66; white-space:nowrap; }
.cfgrow select{ flex:1; padding:4px 6px; border:1px solid var(--line); border-radius:6px; font-family:inherit; }
.cfgrow input[type=range]{ flex:1; accent-color: var(--salmon); }
.cfgrow input[type=color]{ width:34px; height:26px; border:1px solid var(--line); border-radius:6px; padding:1px; background:#fff; cursor:pointer; }
.cfgrow em{ font-style:normal; color:#A79B92; width:38px; text-align:right; }
.tplGrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px; }
.tplCard{
  border:1px solid var(--line); border-radius:8px; padding:5px; background:#fff; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; font-family:inherit;
}
.tplCard:hover{ border-color:var(--salmon); }
.tplCard.active{ border-color:var(--salmon); border-width:2px; background:#FFF6F5; }
.tplThumb{ width:100%; aspect-ratio:16/10; overflow:hidden; background:#FAF8F6; border-radius:5px; }
.tplThumb svg{ width:100%; height:100%; display:block; }
.tplName{ font-size:11px; color:#7A6E66; }
#preview [data-id]{ cursor:grab; touch-action:none; }
#preview svg.dragging, #preview svg.dragging [data-id]{ cursor:grabbing; }

/* ================= AI 提取对话框（多轮，会话历史只存在内存里） =================
 * 密码框 #dlgPwd 复用同一套外观，只是窄一些、内容是单个 input。 */
dialog#dlgAI, dialog#dlgPwd{
  width:min(560px, 92vw); border:1px solid var(--line); border-radius:12px;
  padding:18px; box-shadow:0 8px 28px rgba(90,60,55,.18);
}
dialog#dlgPwd{ width:min(420px, 92vw); }
dialog#dlgAI::backdrop, dialog#dlgPwd::backdrop{ background:rgba(61,55,51,.35); }
dialog#dlgAI .ai-head, dialog#dlgPwd .ai-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
dialog#dlgAI .ai-head strong, dialog#dlgPwd .ai-head strong{ margin-right:auto; font-size:15px; color:var(--key); }
dialog#dlgAI p, dialog#dlgPwd p{ font-size:13px; color:#7A6E66; line-height:1.6; margin-bottom:10px; }
dialog#dlgPwd input[type=password]{
  display:block; width:100%; padding:10px; font-size:14px; font-family:inherit;
  border:1px solid var(--line); border-radius:8px; background:#fff;
}
dialog#dlgPwd .hint.ai-err{ color:#c0392b; margin:8px 0 0; }
dialog#dlgAI .ai-log{
  max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:8px;
  padding:2px 10px; margin-bottom:10px; background:#FAF8F6;
}
dialog#dlgAI .ai-log:empty{ display:none; }
dialog#dlgAI .ai-log-item{ font-size:13px; line-height:1.6; margin:8px 0; }
dialog#dlgAI .ai-log-user{ color:var(--text); }
dialog#dlgAI .ai-log-assistant{ color:var(--salmon-dark); }
dialog#dlgAI textarea{
  display:block; width:100%; padding:10px; font-size:14px; font-family:inherit;
  border:1px solid var(--line); border-radius:8px; resize:vertical; background:#fff;
}
dialog#dlgAI .hint.ai-err{ color:#c0392b; margin:8px 0 0; }
.dlg-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }

/* ================= 手机屏幕适配（只在窄屏生效，不影响电脑端样式与功能） ================= */
@media (max-width: 768px){
  header{ padding:8px 10px; gap:6px; }
  header h1{ font-size:15px; }
  .btn{ padding:7px 10px; font-size:12px; }
  main{ flex-direction:column; }
  aside{
    width:100%; min-width:0; max-height:46vh;
    border-right:none; border-bottom:1px solid var(--line);
  }
  #previewScroll{ padding:12px; }
  .preview-toolbar{ padding:6px 10px; }
  /* 编辑区触控目标适当放大，方便手指点按 */
  .icon{ width:32px; height:32px; font-size:15px; }
  .add{ padding:7px 12px; font-size:13px; }
  .keychk{ font-size:13px; }
}