:root{
  --bg:#14161c; --bg2:#1b1e26; --bg3:#232733; --fg:#d7dbe4; --muted:#7f889b;
  --line:#2c3140; --accent:#5aa9e6; --ok:#57c98a; --err:#ef6b6b; --warn:#e8b84b;
  --mono:"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:13px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}

#topbar{display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--bg2);border-bottom:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:.4px;color:var(--accent)}
.muted{color:var(--muted);font-size:12px}
.spacer{flex:1}

button{background:var(--bg3);color:var(--fg);border:1px solid var(--line);border-radius:5px;
  padding:5px 11px;font-size:12px;cursor:pointer;font-family:inherit}
button:hover{background:#2b3140}
button.primary{background:var(--accent);border-color:var(--accent);color:#0d1117;font-weight:600}
button.primary:hover{filter:brightness(1.1)}
button:disabled{opacity:.5;cursor:default}

.toggle{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.toggle input{accent-color:var(--accent);margin:0}

.status{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;
  padding:3px 9px;border-radius:99px;border:1px solid var(--line)}
.status.idle{color:var(--muted)}
.status.busy{color:var(--warn);border-color:var(--warn)}
.status.ok{color:var(--ok);border-color:var(--ok)}
.status.err{color:var(--err);border-color:var(--err)}

.dot{width:9px;height:9px;border-radius:50%;background:var(--err);display:inline-block}
.dot.live{background:var(--ok)}

main{display:flex;height:calc(100% - 41px)}
#left{display:flex;flex-direction:column;min-width:260px;width:46%}
#right{display:flex;flex-direction:column;flex:1;min-width:320px}

.splitter{background:var(--line);flex:0 0 5px;cursor:col-resize}
.splitter:hover{background:var(--accent)}
.splitter.horizontal{cursor:row-resize;flex:0 0 5px}

#filebar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg2);border-bottom:1px solid var(--line)}
#filesel{background:var(--bg3);color:var(--fg);border:1px solid var(--line);border-radius:5px;padding:4px 8px;font-family:var(--mono);font-size:12px}
.dirty{color:var(--warn);font-size:11px}
#editor{flex:1;min-height:0}

#emuwrap{flex:1;min-height:120px;background:#000;display:flex}
#emu{border:0;width:100%;height:100%;display:block}

#panel{display:flex;flex-direction:column;height:38%;min-height:90px;background:var(--bg2)}
#tabs{display:flex;align-items:center;gap:4px;padding:4px 8px;border-bottom:1px solid var(--line)}
.tab{background:transparent;border:0;color:var(--muted);padding:4px 10px;border-radius:5px}
.tab.active{background:var(--bg3);color:var(--fg)}
.tabpane{display:none;flex:1;overflow:auto}
.tabpane.active{display:block}

#output{margin:0;padding:9px 12px;font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-word}
.line-err{color:var(--err)}
.line-warn{color:var(--warn)}
.line-ok{color:var(--ok)}

.note{padding:10px 12px;color:var(--muted)}
.decoded{padding:8px 12px;display:flex;flex-wrap:wrap;gap:7px}
.chip{background:var(--bg3);border:1px solid var(--line);border-radius:5px;padding:3px 8px;
  font-family:var(--mono);font-size:11.5px}
.chip b{color:var(--accent);font-weight:600}
.chip.bad{border-color:var(--err);color:var(--err)}
.chip.bad b{color:var(--err)}
.chip.good{border-color:var(--ok)}

.reggrids{display:flex;flex-wrap:wrap;gap:14px;padding:4px 12px 14px}
.reggrids h4{margin:6px 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--fg);font-weight:600}
.regs{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:3px;min-width:250px}
.reg{font-family:var(--mono);font-size:11px;background:var(--bg3);border:1px solid var(--line);
  border-radius:4px;padding:2px 5px;display:flex;justify-content:space-between;gap:5px}
.reg .a{color:var(--muted)}
.reg .v{color:var(--fg)}
.reg.changed .v{color:var(--warn);font-weight:700}