.cfg-editor{
  --font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Microsoft JhengHei","PingFang TC",sans-serif;
  --bg-main:#f4f6fa;
  --bg-sidebar:#0b0f19;
  --bg-sidebar-hover:#1e293b;
  --bg-panel:#ffffff;
  --border-color:#e2e8f0;
  --text-primary:#1e293b;
  --text-secondary:#64748b;
  --text-light:#94a3b8;
  --primary-blue:#1890ff;
  --success-green:#52c41a;
  --warning-orange:#fa8c16;
  --danger-red:#f5222d;
  --purple-accent:#722ed1;
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.06),0 2px 4px -1px rgba(0,0,0,.04);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -2px rgba(0,0,0,.04);
}
.cfg-editor .app-header{height:54px;background:#0c1424;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;z-index:30;flex:none}
.cfg-editor .brand{display:flex;align-items:center;gap:10px}
.cfg-editor .brand-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#1890ff,#722ed1);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.cfg-editor .brand-title{font-size:15px;font-weight:600;letter-spacing:.3px}
.cfg-editor .brand-sub{font-size:11px;color:#94a3b8;margin-left:4px}
.cfg-editor .header-actions{display:flex;align-items:center;gap:8px}
.cfg-editor .mode-switch{display:flex;background:#1e293b;border-radius:8px;padding:3px;margin-right:6px}
.cfg-editor .mode-btn{padding:5px 14px;font-size:13px;border-radius:6px;cursor:pointer;color:#94a3b8;border:none;background:transparent;font-family:inherit;transition:all .15s;display:flex;align-items:center;gap:5px}
.cfg-editor .mode-btn.active{background:var(--primary-blue);color:#fff;box-shadow:0 0 8px rgba(24,144,255,.4)}
.cfg-editor .hbtn{height:32px;padding:0 12px;border-radius:6px;border:1px solid #334155;background:#1e293b;color:#e2e8f0;font-size:13px;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.cfg-editor .hbtn:hover{background:#334155;border-color:#475569}
.cfg-editor .hbtn.primary{background:var(--primary-blue);border-color:var(--primary-blue);color:#fff}
.cfg-editor .hbtn.primary:hover{background:#40a9ff}
.cfg-editor .hbtn svg{width:15px;height:15px}
.cfg-editor .workbench{flex:1;display:flex;overflow:hidden;min-height:0}
.cfg-editor .panel{background:var(--bg-panel);display:flex;flex-direction:column;min-height:0}
.cfg-editor .panel-left{width:208px;border-right:1px solid var(--border-color);flex:none}
.cfg-editor .panel-right{width:280px;border-left:1px solid var(--border-color);flex:none}
.cfg-editor .panel-center{flex:1;background:#e9edf3;display:flex;flex-direction:column;min-width:0}
.cfg-editor .panel-head{height:42px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-color);font-size:13px;font-weight:600;color:var(--text-primary);flex:none}
.cfg-editor .panel-head .sub{font-size:11px;color:var(--text-light);font-weight:400}
.cfg-editor .panel-body{flex:1;overflow-y:auto;min-height:0}
.cfg-editor .lib-group{padding:10px 12px 4px}
.cfg-editor .lib-group-title{font-size:11px;color:var(--text-light);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.cfg-editor .lib-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cfg-editor .lib-item{border:1px solid var(--border-color);border-radius:8px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:grab;background:#fff;transition:all .15s;user-select:none}
.cfg-editor .lib-item:hover{border-color:var(--primary-blue);box-shadow:0 0 0 2px rgba(24,144,255,.1);transform:translateY(-1px)}
.cfg-editor .lib-item:active{cursor:grabbing}
.cfg-editor .lib-item .ico{width:26px;height:26px;color:var(--primary-blue);display:flex;align-items:center;justify-content:center}
.cfg-editor .lib-item .ico svg{width:24px;height:24px}
.cfg-editor .lib-item .nm{font-size:11px;color:var(--text-secondary);text-align:center;line-height:1.2}
.cfg-editor .canvas-toolbar{height:42px;background:#fff;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:10px;padding:0 14px;flex:none}
.cfg-editor .ct-group{display:flex;align-items:center;gap:6px}
.cfg-editor .ct-divider{width:1px;height:20px;background:var(--border-color)}
.cfg-editor .ct-btn{height:28px;min-width:28px;padding:0 8px;border:1px solid var(--border-color);background:#fff;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:12px;color:var(--text-secondary);font-family:inherit;transition:all .15s}
.cfg-editor .ct-btn:hover{border-color:var(--primary-blue);color:var(--primary-blue)}
.cfg-editor .ct-btn.danger:hover{border-color:var(--danger-red);color:var(--danger-red)}
.cfg-editor .ct-btn svg{width:15px;height:15px}
.cfg-editor .zoom-label{font-size:12px;color:var(--text-secondary);font-family:monospace;min-width:46px;text-align:center}
.cfg-editor .canvas-meta{margin-left:auto;font-size:12px;color:var(--text-light);display:flex;align-items:center;gap:14px}
.cfg-editor .canvas-meta b{color:var(--text-secondary);font-weight:600}
.cfg-editor .canvas-scroll{flex:1;overflow:auto;position:relative;display:flex;align-items:flex-start;justify-content:center;padding:28px}
.cfg-editor .canvas-stage{position:relative;box-shadow:var(--shadow-lg);background:#fff;flex:none}
.cfg-editor #fcanvas{display:block}
.cfg-editor .preview-badge{position:absolute;top:10px;left:10px;z-index:20;background:rgba(82,196,26,.92);color:#fff;font-size:12px;padding:5px 12px;border-radius:20px;font-weight:600;display:none;align-items:center;gap:6px;box-shadow:var(--shadow-md);pointer-events:none}
.cfg-editor .preview-badge.show{display:flex}
.cfg-editor .preview-badge .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.cfg-editor .prop-empty{padding:40px 20px;text-align:center;color:var(--text-light);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:12px}
.cfg-editor .prop-empty svg{width:42px;height:42px;opacity:.4}
.cfg-editor .prop-section{border-bottom:1px solid var(--border-color);padding:12px 14px}
.cfg-editor .prop-section-title{font-size:11px;color:var(--text-light);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.cfg-editor .prop-section-title svg{width:13px;height:13px}
.cfg-editor .prop-row{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.cfg-editor .prop-row:last-child{margin-bottom:0}
.cfg-editor .prop-row label{font-size:12px;color:var(--text-secondary);width:64px;flex:none}
.cfg-editor .prop-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cfg-editor .prop-field{display:flex;flex-direction:column;gap:4px}
.cfg-editor .prop-field label{font-size:11px;color:var(--text-light);width:auto}
.cfg-editor .pinput{height:30px;border:1px solid var(--border-color);border-radius:6px;padding:0 8px;font-size:12px;font-family:inherit;color:var(--text-primary);width:100%;outline:none;background:#fff;transition:border-color .15s}
.cfg-editor .pinput:focus{border-color:var(--primary-blue)}
.cfg-editor textarea.pinput{height:auto;padding:6px 8px;resize:vertical;min-height:54px;line-height:1.4}
.cfg-editor .pcolor{width:34px;height:30px;padding:2px;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;background:#fff;flex:none}
.cfg-editor select.pinput{cursor:pointer}
.cfg-editor .prop-tag{display:inline-block;font-size:11px;color:var(--primary-blue);background:rgba(24,144,255,.1);padding:2px 8px;border-radius:10px;font-weight:500}
.cfg-editor .bind-box{background:#f8fafc;border:1px solid var(--border-color);border-radius:8px;padding:10px;font-size:12px}
.cfg-editor .bind-empty{color:var(--text-light);text-align:center;padding:6px 0}
.cfg-editor .bind-active{display:flex;flex-direction:column;gap:4px}
.cfg-editor .bind-active .bind-line{display:flex;justify-content:space-between;gap:8px}
.cfg-editor .bind-active .bind-line span:first-child{color:var(--text-secondary)}
.cfg-editor .bind-active .bind-line span:last-child{color:var(--text-primary);font-weight:500;font-family:monospace;font-size:11px;word-break:break-all;text-align:right}
.cfg-editor .bind-uuid{font-size:10px;color:var(--text-light);font-family:monospace;margin-top:2px}
.cfg-editor .btn-block{width:100%;height:32px;border-radius:6px;font-size:13px;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:500;transition:all .15s;border:1px solid var(--primary-blue);background:var(--primary-blue);color:#fff}
.cfg-editor .btn-block:hover{background:#40a9ff}
.cfg-editor .btn-block.ghost{background:#fff;color:var(--primary-blue)}
.cfg-editor .btn-block.ghost:hover{background:#e6f7ff}
.cfg-editor .btn-block.danger{background:#fff;border-color:var(--danger-red);color:var(--danger-red)}
.cfg-editor .btn-block.danger:hover{background:#fff1f0}
.cfg-editor .btn-block svg{width:15px;height:15px}
.cfg-editor .modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;z-index:200;opacity:0;transition:opacity .2s}
.cfg-editor .modal-mask.show{display:flex;opacity:1}
.cfg-editor .modal{background:#fff;border-radius:12px;width:520px;max-width:92%;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);overflow:hidden}
.cfg-editor .modal-head{padding:16px 20px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}
.cfg-editor .modal-head h3{font-size:15px;font-weight:600}
.cfg-editor .modal-close{cursor:pointer;color:var(--text-light);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:5px}
.cfg-editor .modal-close:hover{color:var(--text-primary);background:#f1f5f9}
.cfg-editor .modal-body{padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.cfg-editor .modal-foot{padding:14px 20px;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:10px}
.cfg-editor .modal-label{font-size:12px;color:var(--text-secondary);font-weight:500;margin-bottom:6px;display:block}
.cfg-editor .dev-list{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow-y:auto}
.cfg-editor .dev-item{border:1px solid var(--border-color);border-radius:8px;padding:10px 12px;cursor:pointer;transition:all .15s;display:flex;justify-content:space-between;align-items:center}
.cfg-editor .dev-item:hover{border-color:var(--primary-blue);background:#f8fafc}
.cfg-editor .dev-item.sel{border-color:var(--primary-blue);background:#e6f7ff}
.cfg-editor .dev-item .dev-name{font-size:13px;font-weight:500;color:var(--text-primary)}
.cfg-editor .dev-item .dev-meta{font-size:11px;color:var(--text-light);margin-top:2px}
.cfg-editor .dev-item .dev-proto{font-size:10px;color:var(--primary-blue);background:rgba(24,144,255,.1);padding:2px 7px;border-radius:8px;font-weight:600}
.cfg-editor .point-list{display:flex;flex-direction:column;gap:5px;max-height:200px;overflow-y:auto}
.cfg-editor .point-item{border:1px solid var(--border-color);border-radius:7px;padding:8px 11px;cursor:pointer;transition:all .15s;display:flex;justify-content:space-between;align-items:center}
.cfg-editor .point-item:hover{border-color:var(--primary-blue);background:#f8fafc}
.cfg-editor .point-item.sel{border-color:var(--primary-blue);background:#e6f7ff}
.cfg-editor .point-item .pt-name{font-size:13px;font-weight:500}
.cfg-editor .point-item .pt-id{font-size:10px;color:var(--text-light);font-family:monospace}
.cfg-editor .point-item .pt-unit{font-size:11px;color:var(--text-secondary);font-family:monospace}
.cfg-editor .modal-tip{font-size:12px;color:var(--text-light);background:#f8fafc;border-radius:8px;padding:10px 12px;line-height:1.5;border-left:3px solid var(--primary-blue)}
.cfg-editor .json-area{width:100%;height:300px;border:1px solid var(--border-color);border-radius:8px;padding:12px;font-family:'SF Mono',Consolas,monospace;font-size:12px;line-height:1.5;color:var(--text-primary);outline:none;resize:vertical;white-space:pre;overflow:auto;tab-size:2}
.cfg-editor .json-area:focus{border-color:var(--primary-blue)}
.cfg-editor .seg{display:flex;gap:0;border:1px solid var(--border-color);border-radius:8px;overflow:hidden}
.cfg-editor .seg button{flex:1;padding:8px;font-size:13px;font-family:inherit;border:none;background:#fff;cursor:pointer;color:var(--text-secondary);transition:all .15s}
.cfg-editor .seg button.active{background:var(--primary-blue);color:#fff}
.cfg-editor .mbtn{height:36px;padding:0 18px;border-radius:7px;font-size:13px;font-family:inherit;cursor:pointer;font-weight:500;border:1px solid var(--border-color);background:#fff;color:var(--text-secondary);transition:all .15s}
.cfg-editor .mbtn:hover{background:#f1f5f9}
.cfg-editor .mbtn.primary{background:var(--primary-blue);border-color:var(--primary-blue);color:#fff}
.cfg-editor .mbtn.primary:hover{background:#40a9ff}
.cfg-editor .mbtn.danger{background:var(--danger-red);border-color:var(--danger-red);color:#fff}
.cfg-editor .toast-wrap{position:fixed;top:66px;right:18px;display:flex;flex-direction:column;gap:10px;z-index:999;pointer-events:none}
.cfg-editor .toast{background:rgba(15,23,42,.96);color:#fff;border-radius:9px;padding:11px 16px;font-size:13px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;transform:translateX(120%);opacity:0;transition:all .32s cubic-bezier(.16,1,.3,1);border-left:3px solid var(--primary-blue);min-width:200px}
.cfg-editor .toast.show{transform:translateX(0);opacity:1}
.cfg-editor .toast.ok{border-left-color:var(--success-green)}
.cfg-editor .toast.warn{border-left-color:var(--warning-orange)}
.cfg-editor .toast.err{border-left-color:var(--danger-red)}
.cfg-editor .toast svg{width:17px;height:17px;flex:none}
.cfg-editor .drop-hint{position:absolute;inset:0;border:2.5px dashed var(--primary-blue);border-radius:4px;background:rgba(24,144,255,.05);display:none;align-items:center;justify-content:center;z-index:15;pointer-events:none;font-size:15px;color:var(--primary-blue);font-weight:600}
.cfg-editor .drop-hint.show{display:flex}
/* ============================================================
 * 整合佈局覆寫：讓編輯器填滿後台內容區（content-viewport）
 * content-viewport 為 flex column + padding:20px。
 * 這裡讓 .cfg-editor 成為填滿剩餘高度的卡片，內部 workbench 撐高。
 * ============================================================ */
.cfg-editor{
  flex:1; min-height:0; display:flex; flex-direction:column;
  background:var(--bg-panel); border:1px solid var(--border-color);
  border-radius:10px; box-shadow:var(--shadow-sm); overflow:hidden;
  font-family:var(--font-family);
}
/* 編輯器頂部工具列（取代原型的整頁 app-header） */
.cfg-editor .cfg-toolbar{
  height:50px; flex:none; display:flex; align-items:center; gap:8px;
  padding:0 14px; background:#0c1424; color:#fff;
}
.cfg-editor .cfg-toolbar .cfg-tb-title{font-size:13px;font-weight:600;letter-spacing:.3px;display:flex;align-items:center;gap:8px}
.cfg-editor .cfg-toolbar .cfg-tb-spacer{flex:1}
.cfg-editor .cfg-load-select{
  height:32px;border-radius:6px;border:1px solid #334155;background:#1e293b;color:#e2e8f0;
  font-size:13px;font-family:inherit;padding:0 10px;cursor:pointer;max-width:230px
}
.cfg-editor .cfg-load-select:focus{outline:none;border-color:var(--primary-blue)}
.cfg-editor .workbench{flex:1;min-height:0}