:root{
  /* 主色：更坚定的草木绿 */
  --green:#2f6b4f; --green2:#3d8563; --green3:#244f3a;
  /* 点缀：陶土橙（取代闲置蓝）*/
  --accent:#d98c4a; --accent2:#c2762f;
  /* 暖纸面与背景 */
  --paper:#fffdf8; --bg:#efece4; --bg2:#e7e3d8;
  /* 文字 */
  --text:#23211c; --muted:#8b887f;
  /* 描边 */
  --line:#e6e1d6; --line2:#d4cec0;
  /* 浅色调底 */
  --tint-green:#eaf2ec; --tint-accent:#fbeede;
  /* 危险红（统一）*/
  --danger:#c4554a; --danger-bg:#fbeceb; --danger-line:#f0d5d1;
  /* 辅助绿（柔和，用于聚焦环/描边）*/
  --green-soft:#9db8a8;
  /* 阴影（暖调更轻）*/
  --shadow:0 1px 3px rgba(40,38,32,.06), 0 10px 30px rgba(40,38,32,.06);
  /* 圆角阶梯 */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
}
body.dark{
  --bg:#22262a; --bg2:#1b1e21; --paper:#2c3137;
  --text:#e8e6e1; --muted:#8f979d; --line:#3a4147; --line2:#474f56;
  --green:#3d8563; --green2:#5aa07e; --green3:#8cc7a6;
  --accent:#e0a160; --accent2:#d98c4a;
  --tint-green:#2c3531; --tint-accent:#3a3128;
  --danger:#e08b80; --danger-bg:#3a2a28; --danger-line:#5a3a36;
  --green-soft:#5aa07e;
  --shadow:0 1px 3px rgba(0,0,0,.32), 0 10px 30px rgba(0,0,0,.24);
 --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--text);background:var(--bg)}
.app{display:flex;height:100vh;overflow:hidden}

/* 左侧：保持原来的纸色（深绿渐变那版被否掉了，视觉迁移只做右侧内容区） */
.side{width:206px;flex-shrink:0;background:var(--paper);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.logo{padding:16px 14px 12px;font-size:12px;font-weight:700;color:var(--green);line-height:1.35;letter-spacing:.3px}
.logo b{display:block;font-size:14px;letter-spacing:1px;margin-top:1px}
.logo .logoTag{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:6px;letter-spacing:0;opacity:.9}
.sec{font-size:11px;font-weight:600;color:var(--muted);padding:12px 14px 6px;display:flex;align-items:center;gap:6px}
.sec .sp{flex:1}
.minib{height:20px;min-width:20px;padding:0 7px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--paper);color:var(--muted);font-size:11px;cursor:pointer;font-family:inherit;line-height:1}
.minib:hover{background:var(--bg)}
.nav{flex:1;overflow-y:auto;min-height:0;padding-bottom:8px}
.nav button{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;padding:9px 12px;
  font-size:13px;color:var(--muted);cursor:pointer;font-family:inherit;text-align:left;white-space:nowrap;border-radius:var(--r-md)}
.nav button:hover{background:var(--bg)}
.nav button.on{background:var(--green);color:#fff}
.nav .ic{width:18px;text-align:center;font-size:13px;flex-shrink:0;color:inherit}
.works{max-height:210px;overflow-y:auto;padding-bottom:6px}
.w{padding:7px 12px;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:7px;color:var(--muted);border-radius:var(--r-sm)}
.w:hover{background:var(--bg)}
.w.on{background:var(--tint-green);color:var(--green3);font-weight:600}
.w .dot{width:7px;height:7px;border-radius:50%;background:var(--line2);flex-shrink:0}
.w.on .dot{background:var(--green)}
.w .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w .x{opacity:0;border:none;background:none;color:var(--danger);cursor:pointer;font-size:11px;padding:0 2px}
.w:hover .x{opacity:1}
/* 改名铅笔：和删除同一条 hover 逻辑，平时不占视觉 */
.w .pen{opacity:0;border:none;background:none;color:var(--muted);cursor:pointer;font-size:11px;padding:0 3px}
.w:hover .pen{opacity:1}
.w .pen:hover{color:var(--green)}

/* 右侧 */
.main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{height:54px;flex-shrink:0;background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 14px;gap:8px}
.crumb{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb b{color:var(--text);font-weight:600}
.topbar .sp{flex:1}
.tbtn{height:30px;padding:0 13px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--paper);color:var(--text);
  font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap}
.tbtn:hover{background:var(--bg)}
.tbtn.primary{background:var(--green);color:#fff;border-color:var(--green)}
.tbtn.primary:hover{background:var(--green2)}
.tbtn:disabled{opacity:.45;cursor:not-allowed}
.savetag{font-size:11px;color:var(--green2);white-space:nowrap}
.savetag.warn{color:var(--accent)}
.frameWrap{flex:1;position:relative;min-height:0;background:var(--bg)}
#frame{position:absolute;inset:0;width:100%;height:100%;border:none;background:var(--bg)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#2f2f2a;color:#fff;
  padding:8px 16px;border-radius:var(--r-md);font-size:12.5px;display:none;z-index:50}
.mask{position:fixed;inset:0;background:rgba(30,30,28,.34);display:none;align-items:center;justify-content:center;z-index:60}
.ebox{background:var(--paper);border-radius:var(--r-lg);box-shadow:0 20px 50px rgba(40,38,32,.18);
  width:min(520px,94vw);max-height:min(86vh,760px);display:flex;flex-direction:column;overflow:hidden}
.phead{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;flex:0 0 auto}
.phead .pt{font-size:14px;font-weight:600;flex:1}
.phead .x{border:none;background:none;font-size:17px;color:var(--muted);cursor:pointer}
/* 帮助文案很长：正文自己滚，标题与按钮钉住，小屏也能看到头尾 */
.pbody{padding:16px 18px;font-size:12.5px;line-height:1.9;color:var(--text);overflow-y:auto;flex:1 1 auto;min-height:0}
.pbody b{color:var(--green3)}
.eops{padding:10px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;flex:0 0 auto}

/* 阶段1占位：模块区（阶段2挂载真实模块） */
.stage{position:absolute;inset:0;overflow:auto;background:var(--bg)}
.stagePlaceholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:24px}
.stagePlaceholder .phIcon{font-size:54px;margin-bottom:10px}
.stagePlaceholder h2{margin:0 0 8px;color:var(--text);font-weight:600}
.stagePlaceholder p{line-height:1.8;max-width:440px}