[hidden]{display:none!important;}
:root{
  --bg:#1e1f22; --bg2:#26272b; --bg3:#2d2f34; --line:#3a3c42;
  --fg:#d8dadf; --fg-dim:#8a8d96; --accent:#5fb3ff; --accent2:#ffb454;
  --red:#ff6b6b; --green:#7ee787;
  font-size:13px;
}
*{box-sizing:border-box;}
body{
  margin:0; height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--fg);
  font-family:ui-monospace,"SF Mono",Consolas,"Cascadia Code",monospace;
}
button{
  background:var(--bg3); color:var(--fg); border:1px solid var(--line);
  padding:5px 10px; border-radius:4px; cursor:pointer; font-family:inherit; font-size:12px;
}
button:hover{border-color:var(--accent);}
button:disabled{opacity:.4; cursor:default;}
button:disabled:hover{border-color:var(--line);}
input{
  background:var(--bg); color:var(--fg); border:1px solid var(--line);
  border-radius:4px; padding:5px 8px; font-family:inherit; font-size:12px;
}

#topbar{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:var(--bg2); border-bottom:1px solid var(--line); flex:0 0 auto;
}
.brand{font-weight:700; color:var(--accent); letter-spacing:.5px;}
.filename{color:var(--fg-dim);}
.spacer{flex:1;}

#layout{flex:1; display:flex; min-height:0;}
#sidebar{
  width:260px; flex:0 0 auto; background:var(--bg2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.tabs{display:flex; border-bottom:1px solid var(--line);}
.tab{flex:1; background:transparent; border:none; border-radius:0; padding:8px 4px; color:var(--fg-dim);}
.tab.active{color:var(--accent); border-bottom:2px solid var(--accent);}
.tabpanes{flex:1; overflow:auto; min-height:0;}
.tabpane{display:none; padding:4px;}
.tabpane.active{display:block;}
.rowitem{padding:4px 6px; border-radius:3px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rowitem:hover{background:var(--bg3);}
.rowitem .addr{color:var(--accent2); margin-right:6px;}
.gotobar{display:flex; gap:4px; padding:6px; border-top:1px solid var(--line);}
.gotobar input{flex:1; width:0;}
.infobox{padding:8px; font-size:11px; color:var(--fg-dim); border-top:1px solid var(--line); line-height:1.6; overflow:auto;}
.infobox b{color:var(--fg);}

.paneheader{
  padding:6px 10px; background:var(--bg2); border-bottom:1px solid var(--line);
  color:var(--fg-dim); font-size:11px; text-transform:uppercase; letter-spacing:.5px; flex:0 0 auto;
}

#disasmPane{flex:1.4; display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line);}
.disasmlist{flex:1; overflow:auto; padding:4px 0;}
.dline{
  display:flex; gap:10px; padding:2px 10px; cursor:pointer; white-space:nowrap;
}
.dline:hover{background:var(--bg3);}
.dline.current{background:#2a3a4d;}
.dline .addr{color:var(--accent2); min-width:110px;}
.dline .bytes{color:var(--fg-dim); min-width:170px; overflow:hidden;}
.dline .mnem{color:var(--fg); flex:1; overflow:hidden; text-overflow:ellipsis;}
.dline .actions{display:none; gap:4px;}
.dline:hover .actions{display:flex;}
.dline .actions button{padding:1px 6px; font-size:10px;}
.dline input.editline{
  flex:1; background:var(--bg); border:1px solid var(--accent); color:var(--fg);
}

#hexPane{flex:1; display:flex; flex-direction:column; min-width:0;}
.hexgrid{flex:1; overflow:auto; padding:6px 10px; font-variant-ligatures:none;}
.hexrow{display:flex; gap:12px; white-space:nowrap; padding:1px 0;}
.hexrow .off{color:var(--accent2); min-width:90px;}
.hexbyte{
  display:inline-block; width:1.6em; text-align:center; cursor:pointer; border-radius:2px;
}
.hexbyte:hover{background:var(--bg3);}
.hexbyte.patched{color:var(--green); font-weight:700;}
.hexbyte.current{outline:1px solid var(--accent);}
.hexbyte input{
  width:1.5em; text-align:center; padding:0; border:1px solid var(--accent); background:var(--bg);
  font-family:inherit; font-size:inherit; color:var(--fg);
}
.ascii{color:var(--fg-dim); margin-left:6px;}
.ascii span.patched{color:var(--green);}

#patchbar{flex:0 0 160px; border-top:1px solid var(--line); display:flex; flex-direction:column; background:var(--bg2);}
.patchlist{flex:1; overflow:auto; padding:4px 8px;}
.prow{display:flex; gap:8px; align-items:center; padding:3px 0; border-bottom:1px dashed var(--line); font-size:11px;}
.prow .addr{color:var(--accent2); min-width:100px;}
.prow .kind{color:var(--fg-dim); min-width:50px;}
.prow .diff{flex:1; overflow:hidden; text-overflow:ellipsis;}
.prow .old{color:var(--red); text-decoration:line-through; margin-right:6px;}
.prow .new{color:var(--green);}
.prow button{padding:1px 6px; font-size:10px;}

#toast{
  position:fixed; bottom:16px; right:16px; background:var(--bg3); border:1px solid var(--accent);
  padding:8px 14px; border-radius:4px; display:none; max-width:400px; font-size:12px;
}
#toast.error{border-color:var(--red); color:var(--red);}
#toast.show{display:block;}

.filterbox{width:100%; margin-bottom:4px; padding:5px 6px;}
.searchbar{display:flex; gap:4px; padding:4px; flex-wrap:wrap;}
.searchbar input{flex:1; min-width:100px;}
.searchbar select{background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:4px; font-family:inherit; font-size:11px;}
.searchbar button{flex:0 0 auto;}
.searchresult .sec{color:var(--fg-dim); margin-left:6px; font-size:10px;}
.patchheader{display:flex; align-items:center; gap:10px;}
.patchheader .filterbox{width:260px; margin-bottom:0;}

.overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:50;}
.overlay-inner{background:var(--bg); border:1px solid var(--line); width:92vw; height:88vh; display:flex; flex-direction:column; border-radius:6px; overflow:hidden;}
.overlay-header{display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--bg2); border-bottom:1px solid var(--line);}
.overlay-header input{width:220px;}
.overlay-body{flex:1; overflow:auto; padding:10px; display:flex; flex-direction:column; min-height:0; position:relative;}
.cmp-summary{padding:2px 0 8px;}
.badge{display:inline-block; padding:1px 7px; border-radius:3px; font-size:10px; text-transform:uppercase; margin-right:5px; letter-spacing:.4px;}
.badge.same{background:#2d2f34; color:var(--fg-dim);}
.badge.modified{background:#4a3a1f; color:var(--accent2);}
.badge.added{background:#1f3a24; color:var(--green);}
.badge.removed{background:#3a1f1f; color:var(--red);}
.badge.unknown{background:#2d2f34; color:var(--fg-dim);}
.cmp-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:6px; flex:0 0 auto;}
.cmp-tab{background:transparent; border:none; border-radius:0; padding:6px 10px; color:var(--fg-dim);}
.cmp-tab.active{color:var(--accent); border-bottom:2px solid var(--accent);}
.cmp-pane{display:none; flex:1; overflow:auto; min-height:0;}
.cmp-pane.active{display:block;}
.cmp-func-row{display:flex; align-items:center; gap:8px; padding:3px 4px; border-bottom:1px dashed var(--line); font-size:12px;}
.cmp-func-row .fname{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cmp-func-row .fsize{color:var(--fg-dim); font-size:11px; flex:0 0 auto;}
.cmp-strings-cols{display:flex; gap:10px; height:100%;}
.cmp-strings-cols > div{flex:1; overflow:auto; border:1px solid var(--line); border-radius:4px; display:flex; flex-direction:column; min-height:0;}
.cmp-strings-cols .rowitem{padding:3px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px;}
.cmp-diffview{position:absolute; inset:44px 10px 10px 10px; background:var(--bg); border:1px solid var(--line); display:flex; flex-direction:column; z-index:5;}
.cmp-diffview-header{display:flex; justify-content:space-between; align-items:center; padding:6px 10px; border-bottom:1px solid var(--line);}
.cmp-diff-cols{flex:1; display:flex; min-height:0;}
.cmp-diff-cols > div{flex:1; overflow:auto; border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0;}
.diffline{background:rgba(255,180,84,0.15);}