:root{
  --bg:#1e1e1e;
  --bg-2:#252526;
  --bg-3:#2d2d30;
  --bg-4:#333336;
  --border:#3c3c3c;
  --fg:#d4d4d4;
  --fg-dim:#8a8a8a;
  --accent:#0e7ad4;
  --accent-h:#1a8ae8;
  --danger:#e05252;
  --anim:.18s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI",-apple-system,"Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--fg);overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{
  background:var(--bg-3);color:var(--fg);border:1px solid var(--border);
  border-radius:5px;cursor:pointer;font-size:13px;padding:5px 10px;
  display:inline-flex;align-items:center;gap:6px;
  transition:background var(--anim), border-color var(--anim), transform var(--anim), color var(--anim);
  -webkit-tap-highlight-color:transparent;
  font-family:inherit;
}
button:hover{background:var(--bg-4);border-color:#555}
button:active{transform:scale(.96)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-h)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background:#f06666}
.btn-ghost{background:transparent}
.hidden{display:none !important}

#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;align-items:center;gap:16px;
  height:48px;padding:0 12px;
  background:var(--bg-2);border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.brand-logo{width:24px;height:24px;object-fit:contain;border-radius:4px;transition:transform var(--anim)}
.brand:hover .brand-logo{transform:rotate(-8deg) scale(1.08)}
.ver{font-size:11px;color:var(--fg-dim);font-weight:400}
.view-switch{display:flex;gap:4px;margin-left:8px}
.actions{margin-left:auto;display:flex;gap:6px}
.btn-label{margin-left:2px}

/* ---------- 主体 ---------- */
.main{flex:1;display:flex;min-height:0}

.sidebar{
  width:180px;background:var(--bg-2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;
}
.side-title{
  padding:10px 12px;font-size:12px;color:var(--fg-dim);
  text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);
}
#fileList{list-style:none;overflow-y:auto;flex:1}
#fileList li{
  padding:8px 12px;font-size:13px;cursor:pointer;
  display:flex;align-items:center;gap:8px;border-left:2px solid transparent;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background var(--anim), border-color var(--anim);
  -webkit-tap-highlight-color:transparent;
}
#fileList li:hover{background:var(--bg-3)}
#fileList li.active{background:var(--bg-3);border-left-color:var(--accent)}
#fileList li > span{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
}
.file-path-sep{color:var(--fg-dim);font-size:11px}
.file-name-base{color:var(--fg)}
#fileList li .more{
  margin-left:auto;flex-shrink:0;
  opacity:0;color:var(--fg-dim);font-size:12px;
  padding:4px 6px;border-radius:4px;
  transition:opacity var(--anim), color var(--anim), background var(--anim);
}
#fileList li:hover .more{opacity:1}
#fileList li .more:hover{color:#fff;background:var(--bg-4)}
#fileList li .more.active{opacity:1;color:#fff;background:var(--bg-4)}

/* ---------- 编辑器 ---------- */
.editor-wrap{flex:1;position:relative;min-width:0;background:var(--bg)}
#mainEditor{position:absolute;inset:0}
.editor-wrap.empty #mainEditor{visibility:hidden}

.editor-empty{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:var(--fg-dim);background:var(--bg);
  animation:fadeIn .3s ease;
}
.editor-empty i{font-size:52px;opacity:.35}
.editor-empty p{font-size:15px;color:var(--fg)}
.editor-empty span{font-size:12px;opacity:.7}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- 预览 ---------- */
.preview-wrap{
  width:42%;min-width:260px;background:#fff;
  border-left:1px solid var(--border);display:flex;flex-direction:column;
}
.preview-bar{
  height:34px;background:var(--bg-2);color:var(--fg);
  display:flex;align-items:center;gap:8px;padding:0 12px;
  font-size:12px;border-bottom:1px solid var(--border);
}
.preview-bar button{width:28px;height:24px;padding:0;justify-content:center}
.preview-bar button:first-of-type{margin-left:auto}
#preview{flex:1;border:none;width:100%;background:#fff}

/* ---------- 独立窗口 ---------- */
#windowLayer{position:fixed;inset:0;pointer-events:none;z-index:50}
.editor-window{
  position:absolute;pointer-events:auto;
  background:var(--bg-2);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.55);
  display:flex;flex-direction:column;overflow:hidden;
  min-width:280px;min-height:180px;
  animation:winIn .2s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes winIn{
  from{opacity:0;transform:scale(.94) translateY(8px)}
  to{opacity:1;transform:none}
}
.editor-window.closing{animation:winOut .16s ease forwards}
@keyframes winOut{
  to{opacity:0;transform:scale(.95) translateY(6px)}
}
.win-head{
  height:36px;background:var(--bg-3);
  display:flex;align-items:center;gap:8px;padding:0 6px 0 12px;
  cursor:grab;user-select:none;flex-shrink:0;
  border-bottom:1px solid var(--border);
  touch-action:none;
}
.win-head:active{cursor:grabbing}
.win-head .win-title{
  font-size:13px;display:flex;align-items:center;gap:6px;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}
.win-head .win-title i{color:var(--accent)}
.win-close{
  width:26px;height:26px;padding:0;justify-content:center;
  background:transparent;border:none;font-size:14px;color:var(--fg-dim);
  transition:color var(--anim), background var(--anim);
}
.win-close:hover{color:#fff;background:var(--danger)}
.win-body{flex:1;position:relative;min-height:0}
.win-body .mono{position:absolute;inset:0}
.win-body.split{display:flex;flex-direction:column}
.win-body.split .mono{position:relative;flex:1;min-height:0;height:auto}
.win-resize{
  position:absolute;right:0;bottom:0;width:16px;height:16px;
  cursor:nwse-resize;z-index:10;
  background:linear-gradient(135deg,transparent 50%,var(--border) 50%);
  touch-action:none;
}
.win-foot{
  display:flex;gap:6px;padding:8px 10px;flex-shrink:0;
  border-top:1px solid var(--border);background:var(--bg-2);
  flex-wrap:wrap;align-items:center;
}
.win-foot button{font-size:12px;padding:4px 10px}
.win-foot button.compact{padding:4px 8px}
.win-foot .grow{flex:1}
.script-status{
  font-size:12px;color:var(--fg-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:60px;text-align:right;
}
.script-status.ok{color:#6a9955}
.script-status.err{color:var(--danger)}

/* 脚本输出区 */
.script-output{
  height:0;overflow:hidden;flex-shrink:0;
  border-top:1px solid var(--border);
  background:var(--bg);font-family:Consolas,Monaco,monospace;
  font-size:12px;line-height:1.6;color:var(--fg);
  transition:height var(--anim);
  position:relative;
}
.script-output.show{height:140px;overflow-y:auto;padding:10px 12px}
.script-output .line{
  white-space:pre-wrap;word-break:break-all;
  padding:1px 2px;border-radius:3px;
  transition:background .15s ease;
  user-select:text;
  -webkit-user-select:text;
}
.script-output .line.ok{color:#6a9955}
.script-output .line.err{color:var(--danger)}
.script-output .line.info{color:#569cd6}
.script-output .line.pressed{
  background:rgba(14,122,212,.25);
}

/* "已复制"提示 */
.copy-toast{
  position:sticky;top:0;left:0;right:0;
  margin:-10px -12px 8px;
  padding:6px 12px;
  background:var(--accent);
  color:#fff;font-size:12px;
  display:flex;align-items:center;gap:6px;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
  z-index:2;
}
.copy-toast.show{
  opacity:1;
  transform:none;
}

/* ---------- 外部引用提示 ---------- */
.ext-notice{
  position:absolute;top:0;left:0;right:0;z-index:5;
  background:#4a3a12;color:#f0d78c;border-bottom:1px solid #6b5518;
  padding:8px 12px;font-size:13px;display:flex;align-items:center;gap:8px;
}
.ext-notice button{
  margin-left:auto;background:transparent;border-color:#6b5518;color:#f0d78c;
  padding:2px 10px;font-size:12px;
}

/* ---------- 三点菜单 ---------- */
.ctx-menu{
  position:fixed;z-index:300;
  background:var(--bg-3);border:1px solid var(--border);border-radius:6px;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  padding:4px;min-width:150px;
  animation:ctxIn .12s ease both;
}
@keyframes ctxIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.ctx-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;font-size:13px;border-radius:4px;
  cursor:pointer;color:var(--fg);
  transition:background var(--anim), color var(--anim);
}
.ctx-item:hover{background:var(--bg-4)}
.ctx-item i{width:16px;text-align:center;color:var(--fg-dim)}
.ctx-item.danger{color:var(--danger)}
.ctx-item.danger i{color:var(--danger)}
.ctx-item.danger:hover{background:rgba(224,82,82,.15)}

/* ---------- 模态框 ---------- */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:200;display:flex;align-items:center;justify-content:center;
  animation:modalBgIn .18s ease both;
}
@keyframes modalBgIn{from{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.55)}}
.modal-box{
  width:520px;max-width:92vw;max-height:84vh;
  background:var(--bg-2);border:1px solid var(--border);border-radius:10px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:modalIn .22s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes modalIn{
  from{opacity:0;transform:scale(.94) translateY(10px)}
  to{opacity:1;transform:none}
}
.modal-box.small{width:400px}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.modal-head h3{font-size:15px;display:flex;align-items:center;gap:8px}
.modal-head h3 i{color:var(--accent)}
.modal-close{
  background:transparent;border:none;font-size:16px;color:var(--fg-dim);
  width:28px;height:28px;justify-content:center;padding:0;
}
.modal-close:hover{color:#fff;background:var(--bg-3)}
.modal-body{padding:18px;overflow-y:auto;flex:1}
.modal-foot{
  display:flex;justify-content:flex-end;gap:8px;
  padding:12px 18px;border-top:1px solid var(--border);flex-shrink:0;
}
.text-input{
  width:100%;background:var(--bg-3);border:1px solid var(--border);
  color:var(--fg);padding:8px 10px;border-radius:5px;font-size:14px;
  font-family:inherit;
}
.text-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(14,122,212,.25)}
.text-area{
  width:100%;min-height:280px;resize:vertical;
  background:var(--bg-3);border:1px solid var(--border);border-radius:6px;
  color:var(--fg);padding:10px 12px;font-size:12px;line-height:1.6;
  font-family:Consolas,Monaco,monospace;
}
.text-area:focus{outline:none;border-color:var(--accent)}

/* ---------- 滑动开关 ---------- */
.switch-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:14px;padding:4px 0;
}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0;position:absolute}
.slider{
  position:absolute;inset:0;background:#555;border-radius:24px;
  transition:background var(--anim);cursor:pointer;
}
.slider::before{
  content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform var(--anim);
}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider::before{transform:translateX(20px)}
.hint{font-size:12px;color:var(--fg-dim);margin-top:10px}

/* ---------- 导入选项 ---------- */
.import-option{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border:1px solid var(--border);border-radius:8px;
  margin-bottom:10px;cursor:pointer;
  transition:background var(--anim), border-color var(--anim), transform var(--anim);
}
.import-option:hover{background:var(--bg-3);border-color:var(--accent)}
.import-option:active{transform:scale(.99)}
.import-option > i{
  font-size:22px;color:var(--accent);
  width:36px;text-align:center;
}
.import-option .io-title{font-size:14px;color:#fff;font-weight:500}
.import-option .io-sub{font-size:12px;color:var(--fg-dim);margin-top:3px}

/* ---------- 全屏预览 ---------- */
body.preview-fullscreen #app .topbar,
body.preview-fullscreen #app .sidebar,
body.preview-fullscreen #app .editor-wrap{display:none !important}
body.preview-fullscreen .main{flex-direction:column}
body.preview-fullscreen .preview-wrap{
  width:100% !important;min-width:0;border-left:none;height:100vh;height:100dvh;
}
body.preview-fullscreen .preview-bar{
  height:40px;
}
#btnFullscreen.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- 日志 / 帮助排版 ---------- */
.log-item{margin-bottom:16px}
.log-ver{font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.log-date{font-size:11px;color:var(--fg-dim);font-weight:400}
.modal-body ul{padding-left:20px;font-size:13px;line-height:1.8}
.modal-body li{margin-bottom:2px}

.help-h{
  font-size:14px;color:#fff;font-weight:600;
  margin:20px 0 8px;padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.help-h:first-child{margin-top:0}
.help-p{font-size:13px;line-height:1.8;margin-bottom:12px;color:var(--fg)}
.help-p b{color:#fff}
.help-ul,.help-ol{
  font-size:13px;line-height:1.9;padding-left:22px;
  color:var(--fg);margin-bottom:12px;
}
.help-ul li,.help-ol li{margin-bottom:4px}
.help-code{
  background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:12px 14px;font-size:12px;line-height:1.7;
  font-family:Consolas,Monaco,monospace;color:#9cdcfe;
  white-space:pre;overflow-x:auto;margin-bottom:14px;
}
.help-p code,.help-ul code,.help-ol code{
  background:var(--bg-3);padding:1px 6px;border-radius:4px;
  font-family:Consolas,Monaco,monospace;font-size:12px;color:#ce9178;
}
.help-table{
  width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:14px;
}
.help-table th,.help-table td{
  text-align:left;padding:7px 10px;
  border:1px solid var(--border);
}
.help-table th{background:var(--bg-3);color:#fff;font-weight:600}
.help-table td code{font-size:12px}

/* ---------- 备份管理 ---------- */
.backup-toolbar{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.backup-toolbar .hint{margin:0;flex:1}
.backup-toolbar button{flex-shrink:0}

.backup-list{list-style:none}
.backup-list li{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border:1px solid var(--border);border-radius:6px;
  margin-bottom:8px;font-size:13px;
  transition:background var(--anim), border-color var(--anim);
}
.backup-list li:hover{background:var(--bg-3);border-color:var(--accent)}
.backup-list li i.bk{color:var(--accent)}
.backup-list li .b-time{color:var(--fg)}
.backup-list li .b-size{margin-left:auto;color:var(--fg-dim);font-size:12px}
.backup-list li button{font-size:12px;padding:3px 9px}
.backup-list li button.del{
  background:transparent;border-color:var(--danger);color:var(--danger);
}
.backup-list li button.del:hover{background:var(--danger);color:#fff}
.backup-list .empty{
  color:var(--fg-dim);justify-content:center;cursor:default;
  padding:24px 12px;
}
.backup-list .empty:hover{background:transparent;border-color:var(--border)}

/* ---------- 关于框 ---------- */
.about-header{
  display:flex;align-items:center;gap:16px;
  padding:6px 0 18px;border-bottom:1px solid var(--border);margin-bottom:6px;
}
.about-logo{
  width:64px;height:64px;object-fit:contain;
  border-radius:10px;
  background:var(--bg-3);padding:6px;
}
.about-title{font-size:19px;font-weight:600;color:#fff}
.about-ver{font-size:12px;color:var(--fg-dim);margin-top:2px}
.about-author{font-size:13px;color:var(--accent);margin-top:6px}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#444;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#555}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .preview-wrap{width:40%;min-width:200px}
}
@media (max-width:768px){
  .btn-label{display:none}
  button{padding:6px 9px}
  .topbar{gap:8px;padding:0 8px;height:44px}
  .brand-name,.ver{display:none}
  .view-switch{margin-left:0}
  .preview-wrap{display:none}
  .main{flex-direction:column}
  .sidebar{
    width:100%;height:52px;flex-direction:row;
    border-right:none;border-bottom:1px solid var(--border);
  }
  .side-title{display:none}
  #fileList{
    display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;
    align-items:center;padding:0 6px;
  }
  #fileList li{
    flex-shrink:0;border-left:none;border-bottom:2px solid transparent;
    padding:6px 10px;
  }
  #fileList li.active{border-left:none;border-bottom-color:var(--accent)}
  #fileList li span{display:inline;font-size:12px}
  #fileList li .more{opacity:1}
  .editor-window{
    left:4vw !important;top:8vh !important;
    width:92vw !important;height:70vh !important;
  }
  .win-resize{display:none}
}