body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg0:#1e1e1e;--bg1:#252525;--bg2:#2e2e2e;--bg3:#383838;
  --border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.15);
  --text:#d4d4d4;--muted:#6b6b6b;--muted2:#9a9a9a;
  --accent:#f59e0b;--accent-bg:rgba(245,158,11,0.08);--accent-border:rgba(245,158,11,0.25);
  --green:#10b981;--blue:#3b82f6;--red:#ef4444;--orange:#f97316;--purple:#a78bfa;
}
body{font-family:system-ui,sans-serif;background:var(--bg0);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* TOPBAR */
#topbar{height:42px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:10px;flex-shrink:0}
.logo{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--accent)}
.logo span{color:var(--muted2)}
#project-name{background:transparent;border:none;color:var(--muted2);font-size:12px;outline:none;width:160px;font-family:'JetBrains Mono',monospace}
#folder-badge{font-size:11px;color:var(--muted);background:var(--bg3);padding:2px 8px;border-radius:4px;border:1px solid var(--border);white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;display:none;cursor:pointer;transition:all .15s}
#folder-badge:hover{color:var(--text);border-color:var(--border2)}

.tb-r{margin-left:auto;display:flex;align-items:center;gap:7px}
.btn{padding:4px 11px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid var(--border2);background:var(--bg2);color:var(--muted2);transition:all .15s;font-family:inherit}
.btn:hover{color:var(--text)}
.btn.acc{background:var(--accent);color:#000;border-color:var(--accent);font-weight:700}
.btn.acc:hover{background:#fbbf24}
.btn:disabled{opacity:.4;cursor:not-allowed}
#toggle-panel{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--muted2);cursor:pointer;font-size:12px;flex-shrink:0}
#toggle-panel:hover{color:var(--text);background:var(--bg3)}

/* LAYOUT */
#main{display:flex;flex:1;overflow:hidden}
#panel{width:220px;background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s,opacity .15s;overflow:hidden}
#panel.hidden{width:0;opacity:0;border-right:none}

/* PANEL TABS */
#ptabs{display:flex;height:34px;border-bottom:1px solid var(--border);flex-shrink:0}
.ptab{flex:1;border:none;background:transparent;color:var(--muted2);font-size:11px;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;transition:all .15s}
.ptab:hover{color:var(--text)}
.ptab.on{color:var(--accent);border-bottom-color:var(--accent)}

/* PANEL PANES */
#pane-files{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
#pane-media{flex:1;display:none;flex-direction:column;overflow:hidden;min-height:0}
#pane-builder{flex:1;display:none;flex-direction:column;overflow:hidden;min-height:0}

/* FILES PANE */
.no-folder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center}
.nf-icon{font-size:40px;opacity:.25}
.nf-h{font-size:13px;color:var(--muted2);font-weight:500}
.nf-p{font-size:11px;color:var(--muted);line-height:1.6;max-width:200px}
.open-btn{padding:7px 16px;background:var(--accent);color:#000;border:none;border-radius:7px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit;margin-top:4px}
.open-btn:hover{background:#fbbf24}
#has-folder{flex:1;display:none;flex-direction:column;overflow:hidden;min-height:0}
#exp-header{padding:7px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;flex-shrink:0}
#exp-folder-name{font-size:11px;color:var(--muted2);font-family:'JetBrains Mono',monospace;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbtn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hbtn:hover{background:var(--bg3);color:var(--text)}
#exp-toolbar{padding:6px 8px;border-bottom:1px solid var(--border);display:flex;gap:5px;flex-shrink:0}
.tbtn{flex:1;padding:5px 3px;background:var(--bg2);border:1px solid var(--border);border-radius:5px;color:var(--muted2);font-size:10px;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.tbtn:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}
#exp-tree{flex:1;overflow-y:auto;padding:4px 0;min-height:0}
#exp-tree::-webkit-scrollbar{width:3px}
#exp-tree::-webkit-scrollbar-thumb{background:var(--bg3)}
.ti{display:flex;align-items:center;cursor:pointer;user-select:none;height:26px}
.ti:hover{background:var(--bg2)}
.ti.sel{background:var(--accent-bg)}
.ti.sel .ti-name{color:var(--accent)}
.ti-arr{width:14px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:8px;flex-shrink:0;transition:transform .12s}
.ti-arr.op{transform:rotate(90deg)}
.ti-arr.lf{opacity:0;pointer-events:none}
.ti-ico{font-size:13px;width:18px;text-align:center;flex-shrink:0}
.ti-name{font-size:12px;color:var(--muted2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
.ti-acts{display:none;gap:2px;padding-right:5px;flex-shrink:0}
.ti:hover .ti-acts{display:flex}
.ti-act{width:16px;height:16px;border-radius:3px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center}
.ti-act:hover{background:var(--bg3);color:var(--text)}

/* MEDIA PANE */
#media-no-folder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center}
#media-has-folder{flex:1;display:none;flex-direction:column;overflow:hidden;min-height:0}
.media-toolbar{padding:6px 8px;border-bottom:1px solid var(--border);display:flex;align-items:center;flex-shrink:0}
#media-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px;overflow-y:auto;flex:1;min-height:0;align-content:start}
#media-grid::-webkit-scrollbar{width:3px}
#media-grid::-webkit-scrollbar-thumb{background:var(--bg3)}
.mg{background:var(--bg2);border:1px solid var(--border);border-radius:6px;overflow:hidden;cursor:pointer;position:relative;transition:border-color .15s}
.mg:hover{border-color:var(--border2)}
.mg.sel{border-color:var(--accent)}
.mg-thumb{width:100%;height:56px;object-fit:cover;display:block}
.mg-icon{width:100%;height:56px;display:flex;align-items:center;justify-content:center;font-size:24px}
.mg-name{font-size:9px;color:var(--muted2);padding:3px 5px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-del{position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:3px;border:none;background:rgba(0,0,0,.7);color:#f87171;font-size:11px;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;line-height:1}
.mg:hover .mg-del{display:flex}
#media-preview{height:160px;border-top:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;background:var(--bg0)}
#mp-empty{flex:1;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted)}
#mp-content{flex:1;display:none;flex-direction:column;overflow:hidden}
#mp-bar{padding:4px 8px;font-size:10px;color:var(--muted2);font-family:'JetBrains Mono',monospace;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;flex-shrink:0}
#mp-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mp-size{color:var(--muted)}
#mp-copy{padding:2px 6px;border-radius:4px;border:1px solid var(--border2);background:transparent;color:var(--muted2);font-size:10px;cursor:pointer;font-family:inherit}
#mp-copy:hover{color:var(--text)}
#mp-inner{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:5px}
#mp-img{display:none;max-width:100%;max-height:100%;border-radius:3px;object-fit:contain}
#mp-video{display:none;max-width:100%;max-height:100%}
#mp-audio{display:none;width:90%}
#mp-other{display:none;font-size:11px;color:var(--muted)}

/* BUILDER PANE */
#templates{padding:10px;border-bottom:1px solid var(--border);flex-shrink:0}
.slabel{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.tmbtn{padding:6px 7px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--muted2);font-size:11px;cursor:pointer;text-align:left;transition:all .15s;display:flex;align-items:center;gap:5px;font-family:inherit}
.tmbtn:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}
#history{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:5px}
#history::-webkit-scrollbar{width:3px}
.msg{padding:7px 9px;border-radius:7px;font-size:12px;line-height:1.5}
.msg.user{background:var(--accent-bg);border:1px solid var(--accent-border)}
.msg-lbl{font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.msg.ai{background:var(--bg2);border:1px solid var(--border);color:var(--muted2);display:flex;align-items:center;gap:8px}
.msg.ai.ok{border-color:rgba(16,185,129,.25);color:var(--green)}
.msg.ai.err{border-color:rgba(239,68,68,.25);color:#f87171}
.dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0}
.msg.ai.ok .dot{background:var(--green)}
.msg.ai.err .dot{background:#ef4444}
.msg.ai.spin .dot{background:var(--accent);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
#input-area{padding:8px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px;flex-shrink:0}
#prompt{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:12px;padding:8px 10px;resize:none;height:70px;font-family:inherit;outline:none;line-height:1.5}
#prompt:focus{border-color:var(--accent-border)}
#prompt::placeholder{color:var(--muted)}
.irow{display:flex;align-items:center;gap:6px}
.key-toggle{font-size:11px;color:var(--muted);cursor:pointer;text-decoration:underline;text-decoration-style:dotted;margin-right:auto;background:none;border:none;font-family:inherit}
#key-area{padding:0 2px 4px;display:none;flex-direction:column;gap:3px}
#key-area label{font-size:10px;color:var(--muted)}
#apikey{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--muted2);font-size:11px;font-family:'JetBrains Mono',monospace;padding:5px 9px;outline:none}
.build-btn{flex:1;padding:8px;background:var(--accent);color:#000;border:none;border-radius:7px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit}
.build-btn:hover{background:#fbbf24}
.build-btn:disabled{opacity:.5;cursor:not-allowed}

/* RIGHT AREA */
#rarea{flex:1;display:flex;flex-direction:column;overflow:hidden}
#rtabs{height:38px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:stretch;flex-shrink:0}
.rtab{padding:0 16px;font-size:12px;cursor:pointer;border:none;background:transparent;color:var(--muted2);border-bottom:2px solid transparent;font-family:inherit;display:flex;align-items:center;gap:5px}
.rtab:hover{color:var(--text)}
.rtab.on{color:var(--accent);border-bottom-color:var(--accent)}
.rtab-r{margin-left:auto;display:flex;align-items:center;padding-right:10px;gap:4px}
.vpbtn{width:24px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-size:10px}
.vpbtn:hover,.vpbtn.on{background:var(--bg3);color:var(--text);border-color:var(--border2)}

/* PREVIEW */
#preview-pane{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
#pbar{height:34px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 10px;gap:8px;flex-shrink:0}
.tlights{display:flex;gap:5px}
.tl{width:10px;height:10px;border-radius:50%}
.tl-r{background:#ff5f56}.tl-y{background:#febc2e}.tl-g{background:#27c93f}
#urlbar{flex:1;background:var(--bg2);border-radius:5px;padding:3px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted2);border:1px solid var(--border)}
#pwrap{flex:1;display:flex;align-items:flex-start;justify-content:center;overflow:auto;background:rgb(177,177,177)}
#frame{width:100%;height:100%;border:none;background:rgb(177,177,177)}
#pwrap.tablet #frame{width:768px;height:100%;box-shadow:0 0 0 1px var(--border2),0 20px 60px rgba(0,0,0,.5)}
#pwrap.mobile #frame{width:390px;height:100%;box-shadow:0 0 0 1px var(--border2),0 20px 60px rgba(0,0,0,.5)}
#preview-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}
.ei{font-size:44px;opacity:.3}
.eh{font-size:14px;color:var(--muted2)}
.ep{font-size:11px;color:var(--muted);text-align:center;max-width:220px;line-height:1.6}

/* API TESTER */
#method-sel{background:var(--bg2);border:1px solid var(--border2);border-radius:6px;font-size:12px;font-family:'JetBrains Mono',monospace;font-weight:600;padding:5px 8px;outline:none;cursor:pointer;width:90px;color:var(--green)}
#req-url{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;font-family:'JetBrains Mono',monospace;padding:6px 10px;outline:none}
#req-url:focus{border-color:var(--accent-border)}
#req-url::placeholder{color:var(--muted)}
#send-btn{padding:6px 14px;background:var(--accent);color:#000;border:none;border-radius:6px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit}
#send-btn:hover{background:#fbbf24}
#send-btn:disabled{opacity:.5;cursor:not-allowed}
#api-split{flex:1;display:flex;overflow:hidden}
#api-req-panel{width:42%;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
#api-res-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}
.stabs{display:flex;height:32px;align-items:stretch;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg1)}
.stab{padding:0 11px;font-size:11px;cursor:pointer;border:none;background:transparent;color:var(--muted2);border-bottom:2px solid transparent;font-family:inherit}
.stab:hover{color:var(--text)}
.stab.on{color:var(--text);border-bottom-color:var(--border2)}
.sbody{flex:1;display:none;flex-direction:column;overflow:hidden}
.sbody.on{display:flex}
.hdr-list{flex:1;overflow-y:auto;padding:7px}
.hdr-row{display:flex;gap:4px;margin-bottom:4px;align-items:center}
.hdr-row input{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:5px;color:var(--text);font-size:11px;font-family:'JetBrains Mono',monospace;padding:4px 7px;outline:none;min-width:0}
.hdr-row input::placeholder{color:var(--muted)}
.hdr-del{width:16px;height:16px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;flex-shrink:0}
.hdr-del:hover{color:#ef4444}
.hdr-add{margin:0 7px 7px;padding:4px 8px;background:transparent;border:1px dashed var(--border2);border-radius:5px;color:var(--muted);font-size:11px;cursor:pointer;width:calc(100% - 14px);font-family:inherit}
.hdr-add:hover{color:var(--text)}
.body-editor{flex:1;display:flex;flex-direction:column;overflow:hidden}
.body-fmt{padding:5px 7px;border-bottom:1px solid var(--border);display:flex;gap:4px;flex-shrink:0;align-items:center}
.bfmt-btn{padding:2px 7px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--muted2);font-size:10px;cursor:pointer;font-family:inherit}
.bfmt-btn.on,.bfmt-btn:hover{background:var(--bg3);color:var(--text)}
#req-body{flex:1;background:transparent;border:none;color:var(--text);font-size:12px;font-family:'JetBrains Mono',monospace;padding:9px 11px;resize:none;outline:none;line-height:1.6}
#req-body::placeholder{color:var(--muted)}
#res-statusbar{padding:7px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px;flex-shrink:0;background:var(--bg1)}
.sbadge{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px}
.s2xx{background:rgba(16,185,129,.12);color:var(--green)}
.s3xx{background:rgba(59,130,246,.12);color:var(--blue)}
.s4xx{background:rgba(249,115,22,.12);color:var(--orange)}
.s5xx{background:rgba(239,68,68,.12);color:var(--red)}
.s0{background:var(--bg3);color:var(--muted2)}
.res-meta{font-size:11px;color:var(--muted2);display:flex;gap:10px}
#copy-res{margin-left:auto;padding:2px 8px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:10px;cursor:pointer;font-family:inherit}
#copy-res:hover{color:var(--text)}
#copy-res.ok{color:var(--green)}
#res-body-wrap{flex:1;overflow:auto;position:relative}
#res-body-wrap::-webkit-scrollbar{width:4px}
#res-body-wrap::-webkit-scrollbar-thumb{background:var(--bg3)}
#res-body{padding:10px 12px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.7;white-space:pre-wrap;word-break:break-all;color:var(--muted2)}
.jk{color:#93c5fd}.jvs{color:#86efac}.jvn{color:var(--accent)}.jvb{color:var(--purple)}.jvz{color:var(--muted2)}
#res-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);pointer-events:none}
#api-history-pane{flex:1;overflow-y:auto;padding:7px;display:flex;flex-direction:column;gap:4px}
.ah{padding:6px 8px;background:var(--bg2);border:1px solid var(--border);border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:7px}
.ah:hover{border-color:var(--border2)}
.ah-m{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;padding:2px 4px;border-radius:3px;flex-shrink:0;min-width:42px;text-align:center}
.m-GET{background:rgba(16,185,129,.15);color:var(--green)}.m-POST{background:rgba(245,158,11,.15);color:var(--accent)}
.m-PUT{background:rgba(59,130,246,.15);color:var(--blue)}.m-DELETE{background:rgba(239,68,68,.15);color:var(--red)}
.m-PATCH{background:rgba(167,139,250,.15);color:var(--purple)}.m-HEAD,.m-OPTIONS{background:var(--bg3);color:var(--muted2)}
.ah-u{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ah-s{font-family:'JetBrains Mono',monospace;font-size:10px;flex-shrink:0}
.ah-d{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:0 2px;flex-shrink:0}
.ah-d:hover{color:#ef4444}
#res-hdr-list{flex:1;overflow-y:auto;padding:8px 12px;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.9;color:var(--muted2)}
#res-sb2{padding:7px 10px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg1)}

/* MODAL */
#modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9999;align-items:center;justify-content:center}
#modal-box{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:18px 20px;width:300px;display:flex;flex-direction:column;gap:12px}
#modal-title{font-size:13px;font-weight:600;color:var(--text)}
#modal-input{background:var(--bg3);border:1px solid var(--border2);border-radius:7px;color:var(--text);font-size:13px;font-family:'JetBrains Mono',monospace;padding:8px 11px;outline:none;width:100%}
#modal-input:focus{border-color:var(--accent-border)}
#modal-err{font-size:11px;color:#f87171;display:none;margin-top:-6px}
.modal-btns{display:flex;gap:8px;justify-content:flex-end}
.mok{padding:6px 16px;background:var(--accent);color:#000;border:none;border-radius:6px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit}
.mok:hover{background:#fbbf24}
.mcancel{padding:6px 12px;background:transparent;border:1px solid var(--border2);border-radius:6px;color:var(--muted2);font-size:12px;cursor:pointer;font-family:inherit}
.mcancel:hover{color:var(--text)}

/* MENU BAR */
#menubar{height:26px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:stretch;padding:0 6px;flex-shrink:0;position:relative;z-index:300}
.mi{position:relative}
.mt{height:100%;padding:0 9px;background:transparent;border:none;color:var(--muted2);font-size:12px;cursor:pointer;font-family:inherit;border-radius:3px;transition:all .1s}
.mt:hover,.mt.open{background:var(--bg3);color:var(--text)}
.md{display:none;position:absolute;top:calc(100% + 2px);left:0;background:var(--bg2);border:1px solid var(--border2);border-radius:7px;padding:4px;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.6);z-index:500}
.md.open{display:block}
.msep{height:1px;background:var(--border);margin:3px 0}
.ma{width:100%;padding:6px 10px;background:transparent;border:none;color:var(--muted2);font-size:12px;cursor:pointer;text-align:left;border-radius:5px;display:flex;align-items:center;gap:9px;font-family:inherit;transition:all .1s}
.ma:hover{background:var(--bg3);color:var(--text)}
.ma .mico{font-size:13px;width:16px;text-align:center}
.ma .mkey{margin-left:auto;font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace}

/* REOPEN BANNER */
#reopen-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:99999;background:var(--bg1);border-bottom:1px solid var(--accent-border);padding:10px 16px;align-items:center;gap:10px;animation:slideDown .2s ease}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
#reopen-banner.show{display:flex}
#reopen-banner .rb-icon{font-size:18px}
#reopen-banner .rb-text{flex:1;font-size:12px;color:var(--muted2)}
#reopen-banner .rb-name{color:var(--accent);font-family:'JetBrains Mono',monospace;font-weight:600}
#reopen-banner .rb-open{padding:6px 14px;background:var(--accent);color:#000;border:none;border-radius:6px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit}
#reopen-banner .rb-open:hover{background:#fbbf24}
#reopen-banner .rb-dismiss{padding:4px 8px;background:transparent;border:1px solid var(--border2);border-radius:6px;color:var(--muted2);font-size:11px;cursor:pointer;font-family:inherit}
#reopen-banner .rb-dismiss:hover{color:var(--text)}

/* CONTEXT MENU */
#ctx{display:none;position:fixed;background:var(--bg2);border:1px solid var(--border2);border-radius:7px;padding:4px;min-width:170px;z-index:9998;box-shadow:0 8px 24px rgba(0,0,0,.7)}
.ci{width:100%;padding:6px 10px;background:transparent;border:none;color:var(--muted2);font-size:12px;cursor:pointer;text-align:left;border-radius:5px;display:flex;align-items:center;gap:8px;font-family:inherit}
.ci:hover{background:var(--bg3);color:var(--text)}
.ci.danger:hover{background:rgba(239,68,68,.12);color:#f87171}
.csep{height:1px;background:var(--border);margin:3px 0}

/* FTP PANEL */
.ftp-card{background:var(--bg1);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.ftp-card-hdr{padding:8px 12px;border-bottom:1px solid var(--border);font-size:10px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.ftp-card-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.ftp-field{display:flex;flex-direction:column;gap:3px}
.ftp-field label{font-size:10px;color:var(--muted)}
.ftp-inp{background:var(--bg2);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-size:12px;font-family:'JetBrains Mono',monospace;padding:6px 9px;outline:none;width:100%}
.ftp-inp:focus{border-color:var(--accent-border)}
.ftp-inp::placeholder{color:var(--muted)}
.ftp-check{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted2);cursor:pointer}
.ftp-check input{accent-color:var(--accent)}

/* INSPECTOR */
.insp-section{display:flex;flex-direction:column;gap:5px}
.insp-sec-title{font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);padding:2px 0 3px;border-bottom:1px solid var(--border);margin-bottom:2px}
.insp-row{display:flex;flex-direction:column;gap:2px}
.insp-row label{font-size:10px;color:var(--muted)}
.insp-inp{background:var(--bg2);border:1px solid var(--border2);border-radius:5px;color:var(--text);font-size:11px;font-family:'JetBrains Mono',monospace;padding:5px 8px;outline:none;width:100%}
.insp-inp:focus{border-color:var(--accent-border)}
.insp-inp::placeholder{color:var(--muted)}
.insp-ta{background:var(--bg2);border:1px solid var(--border2);border-radius:5px;color:var(--text);font-size:11px;font-family:'JetBrains Mono',monospace;padding:5px 8px;outline:none;width:100%;resize:vertical}
.insp-ta::placeholder{color:var(--muted)}
.insp-sel{background:var(--bg2);border:1px solid var(--border2);border-radius:5px;color:var(--text);font-size:11px;padding:5px 8px;outline:none;width:100%;cursor:pointer}
/* RIGHT INSPECTOR PANEL */
#inspector-panel{width:220px;background:var(--bg1);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;transition:width .2s,opacity .15s}
#inspector-panel.hidden{width:0;opacity:0;border-left:none}
#inspector-panel-hdr{height:34px;padding:0 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;flex-shrink:0;background:var(--bg1)}
#pane-inspector{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
#insp-panel{overflow-y:auto}
#insp-panel::-webkit-scrollbar{width:3px}
#insp-panel::-webkit-scrollbar-thumb{background:var(--bg3)}

/* OBJECTS TREE (same style as file tree) */
#obj-tree{flex:1;overflow-y:auto;padding:4px 0;min-height:0;font-family:'JetBrains Mono',monospace;font-size:11px}
#obj-tree::-webkit-scrollbar{width:3px}
#obj-tree::-webkit-scrollbar-thumb{background:var(--bg3)}
.ot-node{display:flex;align-items:center;height:24px;cursor:pointer;user-select:none}
.ot-node:hover{background:var(--bg2)}
.ot-node.ot-sel{background:var(--accent-bg)}
.ot-node.ot-sel .ot-tag{color:var(--accent)}
.ot-arr{width:14px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:8px;flex-shrink:0;transition:transform .12s}
.ot-arr.op{transform:rotate(90deg)}
.ot-arr.lf{opacity:0;pointer-events:none}
.ot-tag{color:#93c5fd;font-size:11px;flex-shrink:0}
.ot-id{color:#f97316;font-size:10px;flex-shrink:0}
.ot-cls{color:#86efac;font-size:10px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.ot-txt{color:var(--muted2);font-size:10px;font-style:italic;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:4px}


#dom-tree::-webkit-scrollbar{width:3px}
#dom-tree::-webkit-scrollbar-thumb{background:var(--bg3)}
.dom-node{display:flex;align-items:center;height:22px;cursor:pointer;white-space:nowrap;overflow:hidden;position:relative}
.dom-node:hover{background:var(--bg2)}
.dom-node.dom-sel{background:var(--accent-bg)}
.dom-node.dom-sel .dom-tag{color:var(--accent)}
.dom-arr{width:14px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:8px;flex-shrink:0;transition:transform .1s}
.dom-arr.open{transform:rotate(90deg)}
.dom-arr.leaf{opacity:0;pointer-events:none}
.dom-tag{color:#93c5fd;flex-shrink:0}
.dom-id{color:#f97316;flex-shrink:0}
.dom-cls{color:#86efac;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;max-width:100px}
.dom-txt{color:var(--muted2);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;max-width:80px;font-style:italic}
.dom-children{display:none}
.dom-children.open{display:block}

/* RESIZE HANDLES */
.resize-handle{width:4px;background:transparent;cursor:col-resize;flex-shrink:0;transition:background .15s;z-index:10;position:relative}
.resize-handle:hover,.resize-handle.dragging{background:var(--accent)}
.resize-handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:32px;background:var(--border2);border-radius:2px}
.resize-handle:hover::after,.resize-handle.dragging::after{background:var(--accent)}

#insert-toolbar{height:32px;background:var(--bg0);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 8px;gap:4px;flex-shrink:0;overflow-x:auto;overflow-y:hidden}
#insert-toolbar::-webkit-scrollbar{height:2px}
#insert-toolbar::-webkit-scrollbar-thumb{background:var(--bg3)}
.ins-btn{padding:2px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg2);color:var(--muted2);font-size:10px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .12s;flex-shrink:0;height:22px;display:flex;align-items:center}
.ins-btn:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}
.ins-btn.ins-custom{color:var(--accent);border-color:var(--accent-border);background:var(--accent-bg)}
.ins-btn.ins-custom:hover{background:var(--accent);color:#000}
.bgm-btn{padding:2px 6px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-size:11px;transition:all .12s}
.bgm-btn:hover{background:var(--bg3);color:var(--text)}
.bgm-btn.bgm-on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
.ti.drag-over{background:var(--accent-bg)!important;outline:1px dashed var(--accent);outline-offset:-1px}
.ti.dragging{opacity:.4}
padding:5px 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:20px;color:var(--muted2);font-size:11px;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.style-preset:hover{background:var(--bg3);color:var(--text)}
.style-preset.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
#toast{display:none;position:fixed;bottom:16px;left:50%;transform:translateX(-50%);padding:8px 18px;border-radius:8px;font-size:12px;font-family:inherit;z-index:9999;pointer-events:none;color:#fff}
*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:#2a2a2a;color:#e0e0e0;padding:40px} blocks from snippet and inject into <head>
    const styleMatch=code.match(/<style[^>]*>([\s\S]*?)<\/style>/gi);
    if(styleMatch){
      styleMatch.forEach(styleBlock=>{
        const s=doc.createElement('style');
        s.textContent=styleBlock.replace(/<\/?style[^>]*>/gi,'');
        doc.head.appendChild(s);
      });
    }

    // serialize back to currentHTML
    const editStyle=doc.getElementById('__edit_style');
    if(editStyle)editStyle.remove();
    currentHTML='<!DOCTYPE html>\n'+doc.documentElement.outerHTML;
    injectEditMode();
    if(monacoEditor&&monacoEditor.getValue()!==currentHTML)monacoEditor.setValue(currentHTML);
    if(curFileHandle)saveToHandle(curFileHandle);

    document.getElementById('import-snippet-modal').style.display='none';
    toast('Snippet inserted ✓');
  }catch(e){
    toast('Insert failed: '+e.message,true);
  }
}

function elExport(){
  _closeElCtx();
  if(!selectedEl){toast('No element selected',true);return;}

  let node=selectedEl._liveEl;
  if(!node||!node.isConnected){
    try{
      const doc=document.getElementById('frame').contentDocument;
      node=selectedEl.id?doc.getElementById(selectedEl.id):doc.querySelector(selectedEl.selector);
    }catch(e){}
  }
  if(!node){toast('Element not found — re-select it first',true);return;}

  _exportTag=selectedEl.tag||'element';

  // extract CSS rules that apply to this element and its descendants
  const doc=document.getElementById('frame').contentDocument;
  const frameWin=document.getElementById('frame').contentWindow;
  let cssText='';
  try{
    const sheets=Array.from(doc.styleSheets);
    const relevant=[];
    for(const sheet of sheets){
      try{
        const rules=Array.from(sheet.cssRules||[]);
        for(const rule of rules){
          if(rule.selectorText){
            try{
              // check if rule matches element or any descendant
              if(node.matches(rule.selectorText)||node.querySelector(rule.selectorText)){
                relevant.push(rule.cssText);
              }
            }catch(e){}
          } else if(rule.cssText.startsWith('@')){
            // include @keyframes, @media etc. that might be needed
            relevant.push(rule.cssText);
          }
        }
      }catch(e){}
    }
    if(relevant.length) cssText='\n'+relevant.join('\n')+'\n