html,body{height:100%;margin:0;font:14px/1.3 system-ui,sans-serif;background:#111;color:#ddd}
body{display:flex;flex-direction:column}
#bar{display:flex;gap:.5em;align-items:center;padding:.4em .6em;background:#222;border-bottom:1px solid #333}
#bar button{font:inherit;padding:.2em .6em;background:#333;color:#eee;border:1px solid #555;border-radius:3px;cursor:pointer}
#bar button:hover{background:#444}
#status{margin-left:auto;color:#9c9;font-family:monospace;font-size:12px}
#status.err{color:#f77}
#panes{flex:1;display:flex;min-height:0}
#panes.vertical{flex-direction:row}
#panes.horizontal{flex-direction:column}
.pane{flex:1 1 50%;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}
#panes.vertical #shell{border-right:1px solid #333}
#panes.horizontal #shell{border-bottom:1px solid #333}
#term{flex:1;min-height:0;padding:4px;background:#000}
#tabs{display:flex;background:#1a1a1a;border-bottom:1px solid #333}
#tabs button{font:inherit;padding:.3em .8em;background:none;color:#aaa;border:0;border-bottom:2px solid transparent;cursor:pointer}
#tabs button.on{color:#fff;border-bottom-color:#6af}
.tab{display:none;flex:1;overflow:auto;padding:.6em}
.tab.on{display:block}
table{border-collapse:collapse;font-family:monospace}
th,td{border:1px solid #444;padding:.15em .5em;text-align:left}
th{background:#222}
td[contenteditable]{min-width:6em;background:#181818}
td[contenteditable]:focus{outline:1px solid #6af;background:#1e2a38}
td.del{cursor:pointer;color:#f77;text-align:center}
#addrow{margin-top:.5em;font:inherit;background:#333;color:#eee;border:1px solid #555;border-radius:3px;padding:.2em .6em}
#log{font:12px/1.4 monospace;white-space:pre-wrap;margin:0;color:#ccc}
#log .err{color:#f77}