@font-face{font-family:'JetBrains Mono';src:url(fonts/JetBrainsMono-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url(fonts/JetBrainsMono-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:'JetBrains Mono';src:url(fonts/JetBrainsMono-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:block}
:root{--side-w:270px;--ui:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono',Menlo,Consolas,monospace;--row:24px}
[data-theme=dark]{--bg:#16181d;--bg2:#1c1f26;--bg3:#232731;--bd:#2b303b;--fg:#d7dae0;--fg2:#8b93a3;--fg3:#5c6370;--acc:#7aa2f7;--acc2:#7aa2f733;--hov:#ffffff0d;--sel:#7aa2f726;--err:#f7768e;--ok:#9ece6a;--dirty:#e0af68;--shadow:0 10px 40px #0008}
[data-theme=light]{--bg:#fbfbfc;--bg2:#f3f4f6;--bg3:#e9ebef;--bd:#dfe2e8;--fg:#24292f;--fg2:#5b6472;--fg3:#97a0ad;--acc:#3b6fd8;--acc2:#3b6fd833;--hov:#0000000a;--sel:#3b6fd81f;--err:#d1343e;--ok:#2e8b57;--dirty:#c8890b;--shadow:0 10px 40px #0002}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font:13px/1.4 var(--ui);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
body{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
button{font:inherit;color:inherit}
input,select{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--bd);border-radius:6px;padding:6px 8px;outline:none;width:100%;user-select:text;-webkit-user-select:text}
input:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc2)}
svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.grow{flex:1}
[hidden]{display:none!important}
#top{height:40px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--bg2);border-bottom:1px solid var(--bd)}
#bMenu{display:none}
.tb-brand{display:flex;align-items:center;gap:9px;white-space:nowrap;min-width:0}
.tb-brand .mk{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#4f6cf7,#a46cf4);position:relative;flex:none}
.tb-brand .mk::after{content:'{}';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:700 10px var(--mono)}
.tb-brand b{font-weight:600;letter-spacing:.02em}
.by{color:var(--fg3);font-size:11.5px}
.tb-brand .by{border-left:1px solid var(--bd);padding-left:9px;overflow:hidden;text-overflow:ellipsis}
.seg{display:flex;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:2px;flex:none}
.seg button{border:0;background:none;padding:4px 12px;border-radius:6px;cursor:pointer;color:var(--fg2);font-size:12px;white-space:nowrap}
.seg button.on{background:var(--acc);color:#fff}
.seg button:not(.on):hover{color:var(--fg)}
.seg .s{display:none}
#netBadge{font-size:11px;padding:3px 9px;border-radius:20px;background:#e0af6826;color:var(--dirty);white-space:nowrap;cursor:default}
#netBadge.on{background:#9ece6a26;color:var(--ok);cursor:pointer}
#app{flex:1;display:flex;min-height:0;position:relative}
#side{width:var(--side-w);min-width:180px;max-width:600px;background:var(--bg2);display:flex;flex-direction:column;border-right:1px solid var(--bd)}
.side-head,.side-foot{display:flex;align-items:center;gap:2px;padding:6px;flex:none}
.side-foot{border-top:1px solid var(--bd)}
.ib{display:inline-grid;place-items:center;width:28px;height:28px;border:0;background:none;border-radius:6px;color:var(--fg2);cursor:pointer;padding:0;flex:none}
.ib:hover{background:var(--hov);color:var(--fg)}
.ib.on{color:var(--acc);background:var(--acc2)}
.ib:disabled{opacity:.35;pointer-events:none}
.view{flex:1;display:flex;flex-direction:column;min-height:0}
.sbox{padding:0 8px 8px}
.sline{display:flex;gap:4px;align-items:center}
.tg{border:1px solid var(--bd);background:var(--bg);border-radius:6px;height:30px;min-width:30px;cursor:pointer;color:var(--fg2);font:600 11px var(--mono)}
.tg.on{background:var(--acc2);color:var(--acc);border-color:var(--acc)}
#tree,#sres{flex:1;overflow:auto;padding-bottom:30px;outline:none;-webkit-overflow-scrolling:touch}
.row{display:flex;align-items:center;gap:5px;height:var(--row);padding-right:6px;cursor:pointer;white-space:nowrap;color:var(--fg);position:relative}
.row:hover{background:var(--hov)}
.row.sel{background:var(--sel)}
.row.act .nm{color:var(--acc)}
.row.root{font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.04em;color:var(--fg2);margin-top:4px}
.row.drop{background:var(--acc2);outline:1px dashed var(--acc);outline-offset:-1px}
.tw{width:12px;display:grid;place-items:center;color:var(--fg3);flex:none}
.tw svg{width:12px;height:12px}
.fi{display:grid;place-items:center;color:var(--fg2);flex:none}
.fi.dir{color:#e0af68}
.ficon{display:inline-grid;place-items:center;min-width:22px;height:15px;font:700 8.5px/1 var(--mono);border-radius:3px;padding:0 2px;letter-spacing:-.02em;flex:none}
.nm{overflow:hidden;text-overflow:ellipsis;flex:1}
.sub{color:var(--fg3);font-size:11px;margin-left:6px}
.ra{display:none;gap:1px}
.row:hover .ra{display:flex}
.ra button{border:0;background:none;width:20px;height:20px;border-radius:4px;display:grid;place-items:center;color:var(--fg2);cursor:pointer;padding:0}
.ra button:hover{background:var(--hov);color:var(--fg)}
.ra svg{width:13px;height:13px}
.ra .more{display:none}
.empty{padding:24px 16px;color:var(--fg2);text-align:center;line-height:2}
.btn{border:1px solid var(--bd);background:var(--bg3);border-radius:6px;padding:7px 14px;cursor:pointer}
.btn:hover{border-color:var(--acc)}
.btn.pri{background:var(--acc);color:#fff;border-color:var(--acc)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.dng{background:var(--err);border-color:var(--err);color:#fff}
#resizer{width:4px;margin-left:-2px;margin-right:-2px;cursor:col-resize;z-index:5}
#resizer:hover,#resizer.on{background:var(--acc)}
#scrim{display:none}
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#tabbar{display:flex;background:var(--bg2);border-bottom:1px solid var(--bd);height:38px;flex:none}
#tabs{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
#tabs::-webkit-scrollbar{display:none}
.tools{display:flex;align-items:center;gap:2px;padding:0 6px;border-left:1px solid var(--bd)}
.tab{display:flex;align-items:center;gap:6px;padding:0 6px 0 12px;height:100%;border-right:1px solid var(--bd);cursor:pointer;white-space:nowrap;color:var(--fg2);max-width:240px;position:relative;flex:none}
.tab:hover{background:var(--hov)}
.tab.on{background:var(--bg);color:var(--fg)}
.tab.on::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--acc)}
.tab .nm{max-width:160px}
.tab .x,.tab .tb{width:20px;height:20px;border:0;background:none;border-radius:4px;display:grid;place-items:center;color:var(--fg2);cursor:pointer;padding:0;position:relative}
.tab .tb{display:none}
.tab.on .tb,.tab:hover .tb{display:grid}
.tab .x:hover,.tab .tb:hover{background:var(--hov);color:var(--fg)}
.tab .x svg,.tab .tb svg{width:13px;height:13px}
.tab.dirty .x::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--dirty);position:absolute}
.tab.dirty .x svg{opacity:0}
.tab.dirty .x:hover::before{display:none}
.tab.dirty .x:hover svg{opacity:1}
.tab .loc{font-size:9px;color:var(--fg3);border:1px solid var(--bd);border-radius:3px;padding:0 3px}
#crumbs{height:24px;flex:none;display:flex;align-items:center;padding:0 12px;color:var(--fg3);font-size:12px;gap:4px;border-bottom:1px solid var(--bd);overflow:hidden;white-space:nowrap}
#crumbs b{color:var(--fg2);font-weight:500}
#work{flex:1;position:relative;display:flex;min-height:0}
#editor{flex:1;min-width:0}
#preview{width:45%;border-left:1px solid var(--bd);background:#fff}
#preview iframe{width:100%;height:100%;border:0;background:#fff}
#dropzone{position:absolute;inset:10px;border:2px dashed var(--acc);border-radius:12px;background:var(--acc2);display:grid;place-items:center;font-size:15px;color:var(--acc);z-index:5;pointer-events:none}
#welcome{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg);color:var(--fg3);z-index:2;padding:20px;overflow:auto}
#welcome h1{font:300 28px var(--ui);color:var(--fg2);margin:12px 0 18px;letter-spacing:.04em;text-align:center}
#welcome p{text-align:center}
.wbtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.hint{font-size:12px}
kbd{font:11px var(--mono);border:1px solid var(--bd);border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:var(--fg2);background:var(--bg2)}
.logo{width:64px;height:64px;margin:0 auto;border-radius:16px;background:linear-gradient(135deg,#4f6cf7,#a46cf4);position:relative;box-shadow:0 8px 30px #4f6cf744}
.logo::after{content:'{ }';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:700 22px var(--mono);letter-spacing:-2px}
#keybar{flex:none;display:flex;gap:4px;padding:5px 6px;background:var(--bg2);border-top:1px solid var(--bd);overflow-x:auto;scrollbar-width:none}
#keybar::-webkit-scrollbar{display:none}
#keybar button{flex:none;min-width:38px;height:36px;border:1px solid var(--bd);background:var(--bg3);border-radius:7px;font:500 15px var(--mono);color:var(--fg);padding:0 8px}
#keybar button:active{background:var(--acc);color:#fff}
#keybar button.w{font:600 12px var(--ui)}
#status{height:24px;flex:none;display:flex;align-items:center;gap:14px;padding:0 12px;padding-bottom:env(safe-area-inset-bottom);box-sizing:content-box;background:var(--bg2);border-top:1px solid var(--bd);color:var(--fg2);font-size:11.5px;white-space:nowrap;overflow:hidden}
#status span:empty{display:none}
#status .clk{cursor:pointer}
#status .clk:hover{color:var(--fg)}
#stPath{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}
.res-f{display:flex;align-items:center;gap:6px;padding:4px 10px;font-weight:600;cursor:pointer}
.res-f:hover{background:var(--hov)}
.res-f .cnt{margin-left:auto;background:var(--bg3);border-radius:10px;padding:0 7px;font-size:11px;color:var(--fg2);font-weight:400}
.res-l{padding:2px 10px 2px 30px;font:12px var(--mono);color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.res-l:hover{background:var(--hov);color:var(--fg)}
.res-l mark{background:#e0af6855;color:inherit;border-radius:2px}
.res-l i{font-style:normal;color:var(--fg3);margin-right:6px}
#sinfo{padding:0 10px 6px;color:var(--fg3);font-size:11.5px}
#menu{position:fixed;z-index:50;background:var(--bg2);border:1px solid var(--bd);border-radius:8px;box-shadow:var(--shadow);padding:4px;min-width:200px;max-width:92vw;max-height:80vh;overflow:auto}
#menu .mi{padding:6px 10px;border-radius:5px;cursor:pointer;display:flex;gap:10px;align-items:center}
#menu .mi:hover{background:var(--acc);color:#fff}
#menu .mi.dng:hover{background:var(--err)}
#menu .mi span{margin-left:auto;color:var(--fg3);font-size:11px}
#menu .mi:hover span{color:#fffc}
#menu hr{border:0;border-top:1px solid var(--bd);margin:4px 2px}
#modal{position:fixed;inset:0;background:#0006;z-index:60;display:grid;place-items:start center;padding-top:14vh}
.dlg{background:var(--bg2);border:1px solid var(--bd);border-radius:10px;box-shadow:var(--shadow);width:min(420px,92vw);padding:18px}
.dlg h3{margin:0 0 6px;font-size:14px}
.dlg p{margin:0 0 12px;color:var(--fg2);word-break:break-all}
.dlg .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.dlg .fld{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:10px;margin:8px 0}
.dlg .fld label{color:var(--fg2)}
.dlg .fld input[type=checkbox]{width:auto;justify-self:start}
#toasts{position:fixed;right:16px;bottom:40px;z-index:70;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{background:var(--bg3);border:1px solid var(--bd);border-left:3px solid var(--acc);border-radius:6px;padding:8px 14px;box-shadow:var(--shadow);animation:tin .18s ease-out;max-width:min(420px,90vw)}
.toast.err{border-left-color:var(--err)}
.toast.ok{border-left-color:var(--ok)}
@keyframes tin{from{opacity:0;transform:translateY(6px)}}
#lock{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;padding:20px}
#lock form{width:min(300px,100%);text-align:center;display:flex;flex-direction:column;gap:10px}
#lock h2{margin:10px 0 0;font-weight:400;letter-spacing:.04em}
#lock p{margin:0 0 6px;color:var(--fg2)}
#lock p.by{color:var(--fg3);font-size:12px;margin-top:-4px}
#lockErr{color:var(--err);min-height:18px;font-size:12px}
#lock input{padding:10px 12px;text-align:center;font-size:16px}
#lock .btn{padding:10px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--bd);border-radius:10px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--fg3)}

/* ---------- touch ---------- */
@media (pointer:coarse){
  :root{--row:36px}
  .ra{display:flex}
  .ra .more{display:grid}
  .ra button{width:32px;height:32px}
  .ra svg{width:16px;height:16px}
  .ib{width:36px;height:36px}
  .tab .tb{display:grid}
  .tab .x,.tab .tb{width:28px;height:28px}
  #menu .mi{padding:11px 12px;font-size:14px}
  input,select{font-size:16px}
  .keys{display:none}
}
/* ---------- mobile ---------- */
@media (max-width:820px){
  #bMenu{display:inline-grid}
  #top{padding:0 6px;gap:6px;height:46px}
  .tb-brand{flex-direction:column;align-items:flex-start;gap:0;line-height:1.15}
  .tb-brand .mk{display:none}
  .tb-brand b{font-size:14px}
  .tb-brand .by{border:0;padding:0;font-size:9.5px;max-width:42vw}
  .seg .l{display:none}
  .seg .s{display:inline}
  .seg button{padding:6px 8px;font-size:11.5px}
  #side{position:absolute;left:0;top:0;bottom:0;z-index:30;width:min(86vw,340px);max-width:none;transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow)}
  body.side-open #side{transform:none}
  body.side-open #scrim{display:block;position:absolute;inset:0;background:#0007;z-index:29}
  #resizer{display:none}
  #tabbar{flex-wrap:wrap;height:auto}
  #tabs{flex:1 1 100%;height:40px}
  .tools{flex:1 1 100%;justify-content:space-around;border-left:0;border-top:1px solid var(--bd);height:44px}
  #crumbs{display:none}
  #preview{position:absolute;inset:0;width:auto;z-index:4;border:0}
  #stPath,#stIndent,#stEnc{display:none}
  #status{gap:12px}
  #toasts{left:12px;right:12px;align-items:center;bottom:90px}
  #modal{padding-top:8vh}
  .dlg .fld{grid-template-columns:110px 1fr}
}
@media (max-width:380px){.tb-brand .by{max-width:34vw}.seg button{padding:6px 6px}}